应用场景

弹幕
游戏广播
消息订阅
多玩家游戏
协同编辑
股票基金实时报价
视频会议
在线教育
聊天室

结论

  • WebSocket和HTTP都是基于TCP协议。两个完全不同的应用层协议
  • WebSocket依赖于HTTP连接进行第一次握手
  • Socket不是协议，它是在程序层面上对传输层协议的接口封装，可以理解为一个能够提供端对端的通信的调用接口（API）

实例

springboot

依赖

  1.         <dependency>
  2.             <groupId>org.springframework.boot</groupId>
  3.             <artifactId>spring-boot-starter-websocket</artifactId>
  4.         </dependency>

内置tomcat注入bean

  1. import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication;
  2. import org.springframework.context.annotation.Bean;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  7. @Configuration
  8. @ConditionalOnWebApplication
  9. public class WebSocketConfig {
  11.     //注意：用外置tomcat不需要注入此bean
  12.     @Bean
  13.     public ServerEndpointExporter serverEndpointExporter() {
  14.         return new ServerEndpointExporter();
  15.     }
  17. }

websocket实现类

  1. import cn.hutool.core.collection.CollectionUtil;
  2. import com.alibaba.fastjson.JSON;
  3. import lombok.extern.slf4j.Slf4j;
  4. import org.apache.commons.lang3.StringUtils;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.scheduling.annotation.Scheduled;
  7. import org.springframework.stereotype.Component;
  9. import javax.websocket.CloseReason;
  10. import javax.websocket.OnClose;
  11. import javax.websocket.OnOpen;
  12. import javax.websocket.Session;
  13. import javax.websocket.server.PathParam;
  14. import javax.websocket.server.ServerEndpoint;
  15. import java.io.IOException;
  16. import java.util.List;
  17. import java.util.Map;
  18. import java.util.concurrent.ConcurrentHashMap;
  19. import java.util.concurrent.atomic.AtomicInteger;
  21. @Slf4j
  22. @ServerEndpoint(value = "/接口名/{userId}")
  23. @Component
  24. public class MyWebSocketService {
  26.     private static final String NULL_KEY = "null";
  27.     /**
  28.      * 心跳连接有效时间(毫秒)
  29.      */
  30.     private static final Long BEAT_HEART_DURATION_TIME_MILLIS = 10 * 60 * 1000L;
  32.     /**
  33.      * 用来记录当前在线连接数
  34.      */
  35.     private static AtomicInteger onlineCount = new AtomicInteger(0);
  37.     /**
  38.      * concurrent包的线程安全Map，用来存放每个客户端对应的Session对象。
  39.      */
  40.     public static Map<String, Session> clients = new ConcurrentHashMap<String, Session>();
  42.     /**
  43.      * concurrent包的线程安全Map，用来存放每个客户端对应的Session对象。
  44.      */
  45.     private static Map<Session, String> sessionMap = new ConcurrentHashMap<Session, String>();
  47.     private static Map<String, Session> oldClients = new ConcurrentHashMap<String, Session>();
  50.     private static Map<Session, Long> sessionBeatheartMap = new ConcurrentHashMap<Session, Long>();
  52.     @Autowired
  53.     private MessageService messageService;
  55.     @OnOpen
  56.     public void onOpen(@PathParam("userId") String userId, Session session) {
  57.         if (StringUtils.isEmpty(userId) || NULL_KEY.equalsIgnoreCase(userId)) {
  58.             try {
  59.                 log.warn("[key={}]非法,禁止连接！！！", userId);
  60.                 session.close();
  61.             } catch (IOException e) {
  62.             }
  63.         }
  64.         if (clients.containsKey(userId)) {
  65.             //删除原有连接
  66.             destroyOldSession(userId);
  67.         }
  68.         //在线数加1
  69.         addOnlineCount();
  70.         clients.put(userId, session);
  71.         sessionMap.put(session, userId);
  72.         sessionBeatheartMap.put(session, System.currentTimeMillis());
  73.         log.info("新连接[userId={}]加入！当前在线连接数为{}", userId, getOnlineCount());
  75.     }
  77.     @OnClose
  78.     public void onClose(Session session) {
  79.         String key = sessionMap.get(session);
  80.         if (StringUtils.isNotEmpty(key)) {
  81.             if (clients.containsKey(key)) {
  82.                 clients.remove(key);
  83.                 //在线数减1
  84.                 subOnlineCount();
  85.             }
  86.             sessionMap.remove(session);
  87.             sessionBeatheartMap.remove(session);
  88.             log.info("连接 [userId={}]关闭！当前在线连接数为{}", key, getOnlineCount());
  89.             /**通知系统断开连接**/
  90.             destroyOldSession(key);
  91.         }
  92.     }
  95.     @Scheduled(cron = " */5 * * * * ?")
  96.     public void processTerminalInformation() {
  97.         if (clients.isEmpty()) {
  98.             return;
  99.         }
  100.         clients.forEach((k, v) -> {
  101.             try {
  102.                 List<Message> messages = messageService.getMessageLists(k);
  104.                 if (CollectionUtil.isNotEmpty(messages)) {
  106.                     v.getAsyncRemote().sendText(JSON.toJSONString(messages));
  107.                 }
  108.             } catch (Exception e) {
  109.                 destroyOldSession(k);
  110.             }
  111.         });
  112.     }
  115.     @Scheduled(cron = "0 */1 * * * ?")
  116.     public void processOnlineTime() {
  118.         oldClients.forEach((k, v) -> {
  119.             try {
  120.                 Long lastBeatTime = sessionBeatheartMap.get(v);
  121.                 if (lastBeatTime == null || (System.currentTimeMillis() - lastBeatTime) > BEAT_HEART_DURATION_TIME_MILLIS) {
  122.                     //超过90秒未收到空消息,KEY 设备已断开连接
  123.                     destroyOldSession(k);
  124.                 }
  125.             } catch (Exception e) {
  126.                 //连接不可用,清理连接
  127.                 destroyOldSession(k);
  128.             }
  129.         });
  130.         oldClients = clients;
  131.     }
  134.     private void destroyOldSession(String key) {
  135.         Session oldSession = clients.get(key);
  136.         if (oldSession != null) {
  137.             if (clients.containsKey(key)) {
  138.                 subOnlineCount();
  139.                 clients.remove(key);
  140.                 if (oldSession != null) {
  141.                     sessionMap.remove(oldSession);
  142.                     sessionBeatheartMap.remove(oldSession);
  143.                 }
  144.                 try {
  145.                     oldSession.close(new CloseReason(CloseReason.CloseCodes.NORMAL_CLOSURE, "已断开连接!"));
  146.                 } catch (IOException e) {
  147.                 }
  148.             }
  149.         }
  150.     }
  153.     public static synchronized AtomicInteger getOnlineCount() {
  154.         return onlineCount;
  155.     }
  157.     /**
  158.      * 增加连接人数
  159.      */
  160.     public static synchronized void addOnlineCount() {
  161.         onlineCount.incrementAndGet();
  162.     }
  164.     /**
  165.      * 减少连接人数
  166.      */
  167.     public static synchronized void subOnlineCount() {
  168.         onlineCount.decrementAndGet();
  169.     }
  170. }

Vue

用法

  1.   created() {
  2.             this.initWebSocket();
  3.         },
  4.         methods: {
  5.             initWebSocket() {
  6.                 let token = localStorage.getItem('token');
  7.                 const url = 'ws://127.0.0.1:端口号/接口名/' + token;
  8.                 this.websocket = new WebSocket(url);
  9.                 this.websocket.onopen = this.websockOpen;
  10.                 this.websocket.onmessage = this.websocketonmessage;
  11.                 this.websocket.onclose = this.websocketclose;
  12.             },
  13.             websockOpen() {
  14.                 console.log("WebSocket连接成功");
  15.             },
  16.             websocketonmessage(e) { //数据接收
  17.                 console.log(e);
  19.             },
  20.             websocketclose(e) { //关闭
  21.                 console.log("close..")
  22.             },
  23.             logout() { //这部分是退出的时候关闭websocket链接
  24.                 window.localStorage.removeItem('token');
  25.                 this.$router.push({path: '/login'})
  26.                 this.websocket.close();
  27.             },
  28.             }

结论刨析

Ajax、Long poll、Websocket图示

WebSocket - 图1
虽然http1.1默认开启了keep-alive长连接保持了这个TCP通道使得在一个HTTP连接中，可以发送多个Request，接收多个Response，但是一个request只能有一个response。而且这个response也是被动的，不能主动发起

协议升级

每个WebSocket连接都始于一个HTTP请求。WebSocket协议在第一次握手连接时，通过HTTP协议在传送WebSocket支持的版本号，协议的字版本号，原始地址，主机地址等等一些列字段给服务器端：

GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Version: 13

注意，关键的地方是，这里面有个Upgrade首部，用来把当前的HTTP请求升级到WebSocket协议，这是HTTP协议本身的内容，是为了扩展支持其他的通讯协议。如果服务器支持新的协议，则必须返回101：

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept:s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

至此，HTTP请求物尽其用，如果成功出发onopen事件，否则触发onerror事件，后面的传输则不再依赖HTTP协议。

为什么依赖http

  1. WebSocket设计上就是天生为HTTP增强通信（全双工通信等），所以在HTTP协议连接的基础上是很自然的一件事，并因此而能获得HTTP的诸多便利。
  2. 这诸多便利中有一条很重要，基于HTTP连接将获得最大的一个兼容支持，比如即使服务器不支持WebSocket也能建立HTTP通信，只不过返回的是onerror而已，这显然比服务器无响应要好的多。

参考文章

理清 WebSocket 和 HTTP 的关系
零距离接触websocket