Spring boot WebSocket简单实例

1. 简介
   WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
   WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
2. 背景
   现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
   而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。
   在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
3. maven 引入依赖 pom.com配置

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
			<version>4.3.8.RELEASE</version>
		</dependency> 

4. 启用WebSocketConfig
   @Configuration
   public class WebSocketConfig {
   @Bean
   public ServerEndpointExporter serverEndpointExporter() {
   return new ServerEndpointExporter();
   }
   }意有时候ServerEndpointExporter 引不进来注意一下自己的maven镜像（阿里云的不太全，最好配多个镜像）

5. WebSocketServer
   因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller
   直接@ServerEndpoint("/websocket")@Component启用即可，然后在里面实现@OnOpen,@onClose,@onMessage等方法
   @ServerEndpoint("/websocket/{userId}")
   @Component
   public class WebSocketServer {
   // 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
   private static int onlineCount = 0;
   // 与某个客户端的连接会话，需要通过它来给客户端发送数据
   private Session session;

   // 接收userId，客户端传id时最好是加上本机的mac地址保证id唯一性，否则会把同一账号登录的在ConcurrentHashMap替换掉
   private String userId = “”;
   // 使用map对象，便于根据userId来获取对应的WebSocket
   private static ConcurrentHashMap<String,WebSocketServer> webSocketList = new ConcurrentHashMap<>();
   // 连接建立成功调用的方法
   //与客户端进行握手，创建持久性的连接，把信息存到ConcurrentHashMap

   @OnOpen
   public void onOpen(Session session,@PathParam(“userId”) String userId) {
   this.session = session;
   webSocketList.put(userId,this);
   addOnlineCount(); //在线数加1
   this.userId = userId;
   try {
   ResponseDTO responseDTO = new ResponseDTO();
   sendMessage(JSON.toJSONString(responseDTO.success(“连接成功”)));
   } catch (IOException e) {
   System.out.println(e.getMessage());
   }
   }
   //连接关闭调用的方法
   @OnClose
   public void onClose() {
   if(webSocketList.get(this.userId)!=null){
   webSocketList.remove(this.userId);
   subOnlineCount(); //在线数减1
   }
   }
   @OnError
   public void onError(Session session, Throwable error) {
   error.printStackTrace();
   }
   // 实现服务器主动推送
   public void sendMessage(String message) throws IOException {
   this.session.getBasicRemote().sendText(message);
   }
   //群发自定义消息，stringObjectMap 发送数据自己定义
   public void sendInfo(JSONObject stringObjectMap, @PathParam(“userId”) String userId) {
   for (WebSocketServer item : webSocketList.values()) {
   try {
   //这里可以设定只推送给这个userId的，为null则全部推送
   if(userId == null) {
   item.sendMessage(JSONObject.toJSONString(stringObjectMap));
   }else if(item.userId.equals(userId)){
   item.sendMessage(JSONObject.toJSONString(stringObjectMap));
   }
   } catch (IOException e) {
   System.out.println(e.getMessage());
   }
   }
   }
   public synchronized int getOnlineCount() {
   return onlineCount;
   }

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

   private static synchronized void subOnlineCount() {
   WebSocketServer.onlineCount–;
   }
   }

6. 前端
   openSocket() {
   if (typeof(WebSocket) === undefined) {
   console.log(‘您的浏览器不支持WebSocket’);
   return;
   }
   const uuidv1 = require(‘uuid/v1’);
   let socketURL = http://127.0.0.1/websocket/${uuidv1()}`;
   socketURL = socketURL.replace(‘http’, ‘ws’);
   console.log(‘socketURL’, socketURL);
   const socket = new WebSocket(socketURL);
   //打开事件
   const self = this;
   socket.onopen = function() {
   console.log(“Socket 已打开”);
   //socket.send(“这是来自客户端的消息” + location.href + new Date());
   };
   //获得消息事件
   socket.onmessage = function({ data }) {
   const dataInfo = JSON.parse(data);
   if(dataInfo.alertData !== undefined && dataInfo.alertData.length > 0) {
   //发现消息进入 调后台获取
   self.newAlertTableData = dataInfo.alertData;
   // this.total = data.total;
   if (dataInfo.alertData.length !== 0) {
   console.log(‘this’, self)
   self.isImgAlarm = true;
   const myAuto = document.getElementById(‘myaudio’);
   myAuto.play();
   }
   return;
   }
   self.isImgAlarm = false;
   const myAuto = document.getElementById(‘myaudio’);
   myAuto.pause();
   // myAuto.load();
   };
   //关闭事件
   socket.onclose = function() {
   console.log(“Socket已关闭”);
   };
   //发生了错误事件
   socket.onerror = function() {
   alert(“Socket发生了错误”);
   };
   },

7. 优点
   较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
   更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
   保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
   更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
   可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
   更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。