websocket 实现后端主动前端推送数据、实时通讯(vue3 + springboot)

简介

WebSocket 是一种全双工通讯协议，用于在 Web 欣赏器和服务器之间创建恒久的毗连。

  

• WebSocket 协议由 IETF 定为尺度，WebSocket API 由 W3C 定为尺度。  
  
• 一旦 Web 客户端与服务器创建毗连，之后的全部数据通讯都通过这个毗连举行。  
  
• 可以相互发送 JSON、XML、HTML 或图片等恣意格式的数据。
  

WebSocket 与 HTTP 协议的异同:
雷同点：

  

• 都是基于 TCP 的应用层协议。  
  
• 都使用 Request/Response 模子举行毗连的创建。  
  
• 可以在网络中传输数据。
  

差别点：

  

• WebSocket 使用 HTTP 来创建毗连，但界说了一系列新的 header 域，这些域在 HTTP 中并不会使用。  
  
• WebSocket 支持恒久毗连，而 HTTP 协议不支持恒久毗连。
  

WebSocket 优点:
高效性： 允许在一条 WebSocket 毗连上同时并发多个哀求，制止了传统 HTTP 哀求的多个 TCP 毗连。
WebSocket 的长毗连特性进步了服从，制止了 TCP 慢启动和毗连握手的开销。
节流带宽：HTTP 协议的头部较大，且哀求中的大部门头部内容是重复的。WebSocket 复用长毗连，制止了这一题目。
服务器推送：WebSocket 支持服务器主动推送消息，实现实时消息关照。
WebSocket 缺点:
恒久维护资本：服务器须要维护长毗连，资本较高。
欣赏器兼容性：差别欣赏器对 WebSocket 的支持水平不划一。
受网络限定：WebSocket 是长毗连，受网络限定较大，须要处理惩罚好重连。
WebSocket 应用场景:

  

• 实时通讯范畴：  
  
• 外攀谈天弹幕  
  
• 多玩家游戏  
  
• 协同编辑  
  
• 股票基金实时报价  
  
• 体育实况更新  
  
• 视频集会/谈天  
  
• 基于位置的应用  
  
• 在线教导  
  
• 智能家居等须要高实时性的场景。
  

一、后端代码

1、安装核心jar包: spring-boot-starter-websocket

1. <dependencies>
2.         <!-- SpringBoot Websocket -->
3.         <dependency>
4.             <groupId>org.springframework.boot</groupId>
5.             <artifactId>spring-boot-starter-websocket</artifactId>
6.         </dependency>
7.         <dependency>
8.             <groupId>cn.hutool</groupId>
9.             <artifactId>hutool-all</artifactId>
10.             <version>5.1.0</version>
11.         </dependency>
12.         <dependency>
13.             <groupId>com.alibaba</groupId>
14.             <artifactId>fastjson</artifactId>
15.             <version>2.0.22</version>
16.         </dependency>
18.     </dependencies>

复制代码

2. 来一个设置类注入

1. package com.codeSE.config;
3. import org.springframework.context.annotation.Bean;
4. import org.springframework.context.annotation.Configuration;
5. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
7. @Configuration
8. public class WebSocketConfig2 {
9.    
10.    
11.     @Bean
12.     public ServerEndpointExporter serverEndpointExporter(){
13.    
14.    
15.         return new ServerEndpointExporter();
16.     }
17. }

复制代码

3. 写个根本webSocket服务

1. import cn.hutool.log.Log;
2. import cn.hutool.log.LogFactory;
3. import com.alibaba.fastjson.JSON;
4. import com.alibaba.fastjson.JSONObject;
5. //import org.apache.commons.lang3.StringUtils;
6. import org.springframework.stereotype.Component;
7. import org.springframework.util.StringUtils;
9. import javax.websocket.*;
10. import javax.websocket.server.PathParam;
11. import javax.websocket.server.ServerEndpoint;
12. import java.io.IOException;
13. import java.util.concurrent.ConcurrentHashMap;
15. /**
16. * @ClassName: 开启WebSocket支持
17. */
18. @ServerEndpoint("/dev-api/websocket/{userId}")
19. @Component
20. public class WebSocketServer {
21.    
22.    
24.     static Log log = LogFactory.get(WebSocketServer.class);
25.     /**
26.      * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
27.      */
28.     private static int onlineCount = 0;
29.     /**
30.      * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
31.      */
32.     private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
33.     /**
34.      * 与某个客户端的连接会话，需要通过

复制代码