SpringBoot进阶教程(七十七)WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

v原理

很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。
在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
v架构搭建

添加maven引用

1.         <dependency>
2.             <groupId>org.springframework.boot</groupId>
3.             <artifactId>spring-boot-starter-websocket</artifactId>
4.         </dependency>
5.         <dependency>
6.             <groupId>org.springframework.boot</groupId>
7.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
8.         </dependency>

复制代码

配置应用属性

1. server.port=8300
2. spring.thymeleaf.mode=HTML
3. spring.thymeleaf.cache=true
4. spring.thymeleaf.prefix=classpath:/web/
5. spring.thymeleaf.encoding: UTF-8
6. spring.thymeleaf.suffix: .html
7. spring.thymeleaf.check-template-location: true
8. spring.thymeleaf.template-resolver-order: 1

复制代码

添加WebSocketConfig

1. package com.test.config;
3. import org.springframework.context.annotation.Bean;
4. import org.springframework.context.annotation.Configuration;
5. import org.springframework.web.socket.config.annotation.EnableWebSocket;
6. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
8. /**
9. * @Author chen bo
10. * @Date 2023/10
11. * @Des
12. */
13. @Configuration
14. public class WebSocketConfig {
15.     /**
16.      * bean注册：会自动扫描带有@ServerEndpoint注解声明的Websocket Endpoint(端点)，注册成为Websocket bean。
17.      * 要注意，如果项目使用外置的servlet容器，而不是直接使用springboot内置容器的话，就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。
18.      */
19.     @Bean
20.     public ServerEndpointExporter serverEndpointExporter() {
21.         return new ServerEndpointExporter();
22.     }
23. }

复制代码

添加WebSocket核心类
因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller
直接@ServerEndpoint("/imserver/{userId}") 、@Component启用即可，然后在里面实现@OnOpen开启连接，@onClose关闭连接，@onMessage接收消息等方法。
新建一个ConcurrentHashMap用于接收当前userId的WebSocket或者Session信息，方便IM之间对userId进行推送消息。单机版实现到这里就可以。集群版（多个ws节点）还需要借助 MySQL或者 Redis等进行订阅广播方式处理，改造对应的 sendMessage方法即可。

1. package com.test.util;
3. import com.google.gson.JsonParser;
4. import lombok.extern.slf4j.Slf4j;
5. import org.springframework.stereotype.Component;
7. import javax.websocket.*;
8. import javax.websocket.server.PathParam;
9. import javax.websocket.server.ServerEndpoint;
10. import java.util.Map;
11. import java.util.concurrent.ConcurrentHashMap;
12. import java.util.concurrent.atomic.AtomicInteger;
13. import com.google.gson.JsonObject;
15. /**
16. * WebSocket的操作类
17. * html页面与之关联的接口
18. * var reqUrl = "http://localhost:8300/websocket/" + cid;
19. * socket = new WebSocket(reqUrl.replace("http", "ws"));
20. */
21. @Component
22. @Slf4j
23. @ServerEndpoint("/websocket/{sid}")
24. public class WebSocketServer {
26.     /**
27.      * 静态变量，用来记录当前在线连接数，线程安全的类。
28.      */
29.     private static AtomicInteger onlineSessionClientCount = new AtomicInteger(0);
31.     /**
32.      * 存放所有在线的客户端
33.      */
34.     private static Map<String, Session> onlineSessionClientMap = new ConcurrentHashMap<>();
36.     /**
37.      * 连接sid和连接会话
38.      */
39.     private String sid;
40.     private Session session;
42.     /**
43.      * 连接建立成功调用的方法。由前端new WebSocket触发
44.      *
45.      * @param sid     每次页面建立连接时传入到服务端的id，比如用户id等。可以自定义。
46.      * @param session 与某个客户端的连接会话，需要通过它来给客户端发送消息
47.      */
48.     @OnOpen
49.     public void onOpen(@PathParam("sid") String sid, Session session) {
50.         /**
51.          * session.getId()：当前session会话会自动生成一个id，从0开始累加的。
52.          */
53.         log.info("连接建立中 ==> session_id = {}， sid = {}", session.getId(), sid);
54.         //加入 Map中。将页面的sid和session绑定或者session.getId()与session
55.         //onlineSessionIdClientMap.put(session.getId(), session);
56.         onlineSessionClientMap.put(sid, session);
58.         //在线数加1
59.         onlineSessionClientCount.incrementAndGet();
60.         this.sid = sid;
61.         this.session = session;
62.         sendToOne(sid, "上线了");
63.         log.info("连接建立成功，当前在线数为：{} ==> 开始监听新连接：session_id = {}， sid = {},。", onlineSessionClientCount, session.getId(), sid);
64.     }
66.     /**
67.      * 连接关闭调用的方法。由前端socket.close()触发
68.      *
69.      * @param sid
70.      * @param session
71.      */
72.     @OnClose
73.     public void onClose(@PathParam("sid") String sid, Session session) {
74.         //onlineSessionIdClientMap.remove(session.getId());
75.         // 从 Map中移除
76.         onlineSessionClientMap.remove(sid);
78.         //在线数减1
79.         onlineSessionClientCount.decrementAndGet();
80.         log.info("连接关闭成功，当前在线数为：{} ==> 关闭该连接信息：session_id = {}， sid = {},。", onlineSessionClientCount, session.getId(), sid);
81.     }
83.     /**
84.      * 收到客户端消息后调用的方法。由前端socket.send触发
85.      * * 当服务端执行toSession.getAsyncRemote().sendText(xxx)后，前端的socket.onmessage得到监听。
86.      *
87.      * @param message
88.      * @param session
89.      */
90.     @OnMessage
91.     public void onMessage(String message, Session session) {
92.         /**
93.          * html界面传递来得数据格式，可以自定义.
94.          * {"sid":"user","message":"hello websocket"}
95.          */
96.         JsonObject jsonObject = JsonParser.parseString(message).getAsJsonObject();
97.         String toSid = jsonObject.get("sid").getAsString();
98.         String msg = jsonObject.get("message").getAsString();
99.         log.info("服务端收到客户端消息 ==> fromSid = {}, toSid = {}, message = {}", sid, toSid, message);
101.         /**
102.          * 模拟约定：如果未指定sid信息，则群发，否则就单独发送
103.          */
104.         if (toSid == null || toSid == "" || "".equalsIgnoreCase(toSid)) {
105.             sendToAll(msg);
106.         } else {
107.             sendToOne(toSid, msg);
108.         }
109.     }
111.     /**
112.      * 发生错误调用的方法
113.      *
114.      * @param session
115.      * @param error
116.      */
117.     @OnError
118.     public void onError(Session session, Throwable error) {
119.         log.error("WebSocket发生错误，错误信息为：" + error.getMessage());
120.         error.printStackTrace();
121.     }
123.     /**
124.      * 群发消息
125.      *
126.      * @param message 消息
127.      */
128.     private void sendToAll(String message) {
129.         // 遍历在线map集合
130.         onlineSessionClientMap.forEach((onlineSid, toSession) -> {
131.             // 排除掉自己
132.             if (!sid.equalsIgnoreCase(onlineSid)) {
133.                 log.info("服务端给客户端群发消息 ==> sid = {}, toSid = {}, message = {}", sid, onlineSid, message);
134.                 toSession.getAsyncRemote().sendText(message);
135.             }
136.         });
137.     }
139.     /**
140.      * 指定发送消息
141.      *
142.      * @param toSid
143.      * @param message
144.      */
145.     private void sendToOne(String toSid, String message) {
146.         // 通过sid查询map中是否存在
147.         Session toSession = onlineSessionClientMap.get(toSid);
148.         if (toSession == null) {
149.             log.error("服务端给客户端发送消息 ==> toSid = {} 不存在, message = {}", toSid, message);
150.             return;
151.         }
152.         // 异步发送
153.         log.info("服务端给客户端发送消息 ==> toSid = {}, message = {}", toSid, message);
154.         toSession.getAsyncRemote().sendText(message);
155.         /*
156.         // 同步发送
157.         try {
158.             toSession.getBasicRemote().sendText(message);
159.         } catch (IOException e) {
160.             log.error("发送消息失败，WebSocket IO异常");
161.             e.printStackTrace();
162.         }*/
163.     }
165. }

复制代码

添加controller

1. package com.test.controller;
3. import org.springframework.stereotype.Controller;
4. import org.springframework.ui.Model;
5. import org.springframework.web.bind.annotation.*;
7. import javax.servlet.http.HttpServletResponse;
9. /**
10. * @Author chen bo
11. * @Date 2023/10
12. * @Des
13. */
14. @Controller
15. public class HomeController {
16.     /**
17.      * 跳转到websocketDemo.html页面，携带自定义的cid信息。
18.      * http://localhost:8300/demo/toWebSocketDemo/user
19.      *
20.      * @param cid
21.      * @param model
22.      * @return
23.      */
24.     @GetMapping("/demo/toWebSocketDemo/{cid}")
25.     public String toWebSocketDemo(@PathVariable String cid, Model model) {
26.         model.addAttribute("cid", cid);
27.         return "index";
28.     }
30.     @GetMapping("hello")
31.     @ResponseBody
32.     public String hi(HttpServletResponse response) {
33.         return "Hi";
34.     }
35. }

复制代码

添加html
注意:html文件添加在application.properties配置的对应目录中。

1. <!DOCTYPE html>
2. <html xmlns:th="http://www.thymeleaf.org">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>聊天窗口</title>
6. </head>
7. <body>
9. 我的用户名：
10. <input type="text" th:value="${cid}" readonly="readonly" id="cid"/>
13. 收消息人用户名：<input id="toUserId" name="toUserId" type="text">
14. 输入你要说的话：<input id="contentText" name="contentText" type="text">
16.     <button type="button" onclick="sendMessage()">发送消息</button>
18. </body>
21. </html>

复制代码

1对1模拟演练
启动项目后，在浏览器访问http://localhost:8300/demo/toWebSocketDemo/{cid} 跳转到对应页面，其中cid是用户名。
为了便于1对1测试，这里我们启动两个浏览器窗口。
http://localhost:8300/demo/toWebSocketDemo/阳光男孩
http://localhost:8300/demo/toWebSocketDemo/水晶女孩
按照要求输入对方用户信息之后，便可以输入你要说的话，畅快聊起来了。
效果图如下：

当然，如果收消息人用户名是自己的话，也可以自己给自己发送数据的。
群发模拟演练
为了便于群发测试，这里我们启动3个浏览器窗口。
http://localhost:8300/demo/toWebSocketDemo/阳光男孩
http://localhost:8300/demo/toWebSocketDemo/水晶女孩
http://localhost:8300/demo/toWebSocketDemo/路人A
由于sendToAll方法中定义群发的条件为：当不指定 toUserid时，则为群发。
效果图如下：

项目架构图如下：

v源码地址

https://github.com/toutouge/javademosecond
其他参考/学习资料：

• https://www.cnblogs.com/xswz/p/10314351.html
  
• https://www.cnblogs.com/xuwenjin/p/12664650.html
  
• https://blog.csdn.net/qq_42402854/article/details/130948270
  
• https://www.cnblogs.com/zhangxinhua/p/11341292.html
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！