简介

  • #就是用于服务端给客户端主动发送数据的技术。传统的方式是js定时进行请求，这样效率低
  • WebSocket的这个TCP连接将不会被服务器关闭，而是一直保持，服务器可随时向浏览器推送消息，浏览器也可随时向服务器推送消息
  • 现代浏览器都已经支持WebSocket协议，服务器则需要底层框架支持。Java的Servlet规范从3.1开始支持WebSocket

  • 使用websocket有一个弊端：websocket无法设置或者添加请求头信息，只能追加信息到websocket自己的一些头信息里（Sec-WebSocket-...这样的就是websocket自己的请求头信息） 所以不方便认证授权，一般都得后端配置放行或者校验，如前端将token拼到url里后端对于websocket就通过url认证

    原理

  • 因为HTTP本身是基于TCP连接的，所以，WebSocket在HTTP协议的基础上做了一个简单的升级，即建立TCP连接后，浏览器发送请求时，附带几个头,表示希望升级为**WebSocket**连接

    1. GET /chat HTTP/1.1
    2. Host: www.example.com
    3. Upgrade: websocket
    4. Connection: Upgrade

  • 服务器返回升级成功的响应：

    1. HTTP/1.1 101 Switching Protocols
    2. Upgrade: websocket
    3. Connection: Upgrade

    Springboot使用WebSocket

  • 下面的并没有运用到最方便最新的springboot对于websocket的支持，但是也算经典

    依赖

  • 现代浏览器都已经支持WebSocket协议，服务器则需要底层框架支持。Java的Servlet规范从3.1开始支持WebSocket，所以，必须选择支持Servlet 3.1或更高规范的Servlet容器，才能支持WebSocket。最新版本的Tomcat、Jetty等开源服务器均支持WebSocket。

    • tomcat一般都集成了webSocket的包
      1. <dependency>  
      2. <groupId>org.springframework.boot</groupId>  
      3. <artifactId>spring-boot-starter-websocket</artifactId>  
      4. </dependency>

      配置类

  • 下面配置类的作用是启用WebSocket

  • WebSocket 启动的时候优先于 spring 容器，可能导致在 WebSocketServer 中调用业务Service会报空指针异常。我们可以在配置类中提前注入服务

    1. @Configuration
    2. public class WebSocketConfig {
    3.  @Bean
    4.  public ServerEndpointExporter serverEndpointExporter() {
    5.      return new ServerEndpointExporter();
    6.  }
    7.  @Authwired
    8.  RedisServer ...;   //如websocket会用到redis，那我们不应该在websocket服务类注入，而是在配置类注入
    9. }

    WebSocket服务器类

  • 这是websocket的重点，下面的例子是类似聊天室的代码，即一个连接发送了消息，服务端给所有连接都推送一次该消息

  • @ServerEndpoint 注解功能主要是将目前的类定义成一个 websocket 服务器端。
    • 即相当于专门用于websocket连接的**@Controller**。服务器类就是个控制器夹杂些服务方法
      • webSocket应该仅仅存放些自动监听的那几个**@On?**控制器方法，跟业务相关)的应该单独写个控制器类，因为**@On?**监听的是ws路径，不是url路径，而且ws也不会自动生成httpServlet等，自然无法进行url参数获取
    • 注解的值将被用于监听用户连接的终端访问 URL 地址，客户端可以通过这个 URL 来连接到 WebSocket 服务器端
  • CopyOnWriteArraySet就是线程安全的Set，用于保存连接
  • 连接数等变量都要加锁
  • 每一个websocket连接都会自动创建个WebSocketServer，即下面的this

后端自动发消息给前端是如下格式：data.msg中为我们发送的信息

  • image.png ```java import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; @ServerEndpoint(“/websocket/{sid}”) @Component @Slf4j public class WebSocketServer { //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。 private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。 private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据 private Session session;

    //接收sid private String sid=””;

    /**

    • 连接建立成功调用的方法*/ @OnOpen public void onOpen(Session session,@PathParam(“sid”) String sid) { this.session = session; webSocketSet.add(this); //加入set中 addOnlineCount(); //在线数加1 log.info(“有新窗口开始监听:”+sid+”,当前在线人数为” + getOnlineCount()); this.sid=sid; // try { // sendMessage(“连接成功”); // } catch (IOException e) { // log.error(“websocket IO异常”); // } }

    /**

    • 连接关闭调用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); //从set中删除 subOnlineCount(); //在线数减1 log.info(“有一连接关闭！当前在线人数为” + getOnlineCount()); }

    /**

    • 收到客户端消息后调用的方法，群发消息 *
    • @param message 客户端发送过来的消息*/ @OnMessage public void onMessage(String message, Session session) { log.info(“收到来自窗口”+sid+”的信息:”+message); //群发消息 for (WebSocketServer item : webSocketSet) {
      1.    try {
      2.         item.sendMessage(message);
      3.    } catch (IOException e) {
      4.         e.printStackTrace();
      5.    }
      } }

    /*

    • @param session
    • @param error */ @OnError public void onError(Session session, Throwable error) { log.error(“发生错误”); error.printStackTrace(); } //————————-公共方法————————————————————

    /**

    • 实现服务器主动推送 */ public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); }
 /**
  * 群发自定义消息，或者指定某个人发消息
  * */
 public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
      log.info("推送消息到窗口"+sid+"，推送内容:"+message);
      for (WebSocketServer item : webSocketSet) {
           try {
                //这里可以设定只推送给这个sid的，为null则全部推送
                if(sid == null) {
                     item.sendMessage(message);
                }else if(item.sid.equals(sid)){
                     item.sendMessage(message);
                }
           } catch (IOException e) {
                continue;
           }
      }
 }

 public static synchronized int getOnlineCount() {
      return onlineCount;
 }

 public static synchronized void addOnlineCount() {
      WebSocketServer.onlineCount++;
 }

 public static synchronized void subOnlineCount() {
      WebSocketServer.onlineCount--;
 }

}

<a name="PDuWP"></a>
## 控制器

- 用于需要用到websocket但是又需要用到httpServlet的类
```java
 @ResponseBody
    @RequestMapping("/socket/push/{cid}")
    public Map pushToWeb(@PathVariable String cid, String message) {
        Map<String,Object> result = new HashMap<>();
        try {
            WebSocketServer.sendInfo(message, cid);
            result.put("code", cid);
            result.put("msg", message);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }

前端

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Java后端WebSocket的Tomcat实现</title>
    <script type="text/javascript" src="../jquery.js"></script>
</head>

<body>
<div id="main" style="width: 1200px;height:800px;"></div>
Welcome<br/><input id="text" type="text" />
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window) {
        //改成你的地址
        websocket = new WebSocket("ws://localhost:8081/websocket/100");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function() {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function() {
        setMessageInnerHTML("WebSocket连接成功");
    }
    var U01data, Uidata, Usdata
    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        console.log(event);
      setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        closeWebSocket();
    }
//----------------------------公共方法--------------------------------------
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send('{"msg":"' + message + '"}');
        setMessageInnerHTML(message + "&#13;");
    }
</script>

</html>

简便推送消息

  • 该工具包能更加方便地服务端推送消息给客户端。
  • 依赖还是上面那个

  • 详见spring-boot-websocket ```java */ @Configuration @EnableWebSocket @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override public void registerStompEndpoints(StompEndpointRegistry registry) {

      // 注册一个 /notification 端点，前端通过这个端点进行连接
  registry.addEndpoint("/notification")
      //解决跨域问题
      .setAllowedOrigins("*").withSockJS();

    }

    @Override public void configureMessageBroker(MessageBrokerRegistry registry) {

      //定义了一个客户端订阅地址的前缀信息，也就是客户端接收服务端发送消息的前缀信息
  registry.enableSimpleBroker("/topic");

    }

}

```java
@Autowired
    private SimpMessagingTemplate wsTemplate;   //自动装配好地

wsTemplate.convertAndSend("推送地址", toString(new User()));