当前位置:   article > 正文

spring boot学习第六篇:SpringBoot 集成WebSocket详解_springboot websocket

springboot websocket

一、WebSocket概述

1、WebSocket简介

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

2、为什么需要WebSocket

HTTP 是基于请求响应式的,即通信只能由客户端发起,服务端做出响应,无状态,无连接。

无状态:每次连接只处理一个请求,请求结束后断开连接。
无连接:对于事务处理没有记忆能力,服务器不知道客户端是什么状态。
通过HTTP实现即时通讯,只能是页面轮询向服务器发出请求,服务器返回查询结果。轮询的效率低,非常浪费资源,因为必须不停连接,或者 HTTP 连接始终打开。

WebSocket的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话。

WebSocket特点:

(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

二、SpringBoot整合WebSocket

创建 SpringBoot项目,引入 WebSocket依赖,前端这里比较简陋。

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

application.yml:

  1. server:
  2. port: 8081
  3. spring:
  4. thymeleaf:
  5. mode: HTML
  6. cache: true
  7. prefix: classpath:/templates/
  8. encoding: UTF-8
  9. suffix: .html
  10. check-template-location: true
  11. template-resolver-order: 1

1、WebSocketConfig

启用 WebSocket的支持也是很简单。

  1. /**
  2. * WebSocket配置类。开启WebSocket的支持
  3. */
  4. @Configuration
  5. public class WebSocketConfig {
  6. /**
  7. * bean注册:会自动扫描带有@ServerEndpoint注解声明的Websocket Endpoint(端点),注册成为Websocket bean。
  8. * 要注意,如果项目使用外置的servlet容器,而不是直接使用springboot内置容器的话,就不要注入ServerEndpointExporter,因为它将由容器自己提供和管理。
  9. */
  10. @Bean
  11. public ServerEndpointExporter serverEndpointExporter() {
  12. return new ServerEndpointExporter();
  13. }
  14. }

2、WebSocketServer
这里就是重点了,核心都在这里。

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

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

3、controller

controller中只有一个简单的界面跳转操作,其他的不需要。

  1. @Controller
  2. @RequestMapping("/demo")
  3. public class DemoController {
  4. /**
  5. * 跳转到websocketDemo.html页面,携带自定义的cid信息。
  6. * http://localhost:8081/demo/toWebSocketDemo/user-1
  7. *
  8. * @param cid
  9. * @param model
  10. * @return
  11. */
  12. @GetMapping("/toWebSocketDemo/{cid}")
  13. public String toWebSocketDemo(@PathVariable String cid, Model model) {
  14. model.addAttribute("cid", cid);
  15. return "websocketDemo";
  16. }
  17. }

4、websocketDemo.html

新建一个文件,放到 templates目录下面。页面简单使用js代码调用WebSocket。

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>666666</title>
  6. </head>
  7. <body>
  8. 传递来的数据值cid:
  9. <input type="text" th:value="${cid}" id="cid"/>
  10. <p>【toUserId】:
  11. <div><input id="toUserId" name="toUserId" type="text" value="user-1"></div>
  12. <p>【toUserId】:
  13. <div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
  14. <p>【操作】:
  15. <div>
  16. <button type="button" onclick="sendMessage()">发送消息</button>
  17. </div>
  18. </body>
  19. <script type="text/javascript">
  20. var socket;
  21. if (typeof (WebSocket) == "undefined") {
  22. console.log("您的浏览器不支持WebSocket");
  23. } else {
  24. console.log("您的浏览器支持WebSocket");
  25. //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
  26. var cid = document.getElementById("cid").value;
  27. console.log("cid-->" + cid);
  28. var reqUrl = "http://localhost:8081/websocket/" + cid;
  29. socket = new WebSocket(reqUrl.replace("http", "ws"));
  30. //打开事件
  31. socket.onopen = function () {
  32. console.log("Socket 已打开");
  33. //socket.send("这是来自客户端的消息" + location.href + new Date());
  34. };
  35. //获得消息事件
  36. socket.onmessage = function (msg) {
  37. console.log("onmessage--" + msg.data);
  38. //发现消息进入 开始处理前端触发逻辑
  39. };
  40. //关闭事件
  41. socket.onclose = function () {
  42. console.log("Socket已关闭");
  43. };
  44. //发生了错误事件
  45. socket.onerror = function () {
  46. alert("Socket发生了错误");
  47. //此时可以尝试刷新页面
  48. }
  49. //离开页面时,关闭socket
  50. //jquery1.8中已经被废弃,3.0中已经移除
  51. // $(window).unload(function(){
  52. // socket.close();
  53. //});
  54. }
  55. function sendMessage() {
  56. if (typeof (WebSocket) == "undefined") {
  57. console.log("您的浏览器不支持WebSocket");
  58. } else {
  59. // console.log("您的浏览器支持WebSocket");
  60. var toUserId = document.getElementById('toUserId').value;
  61. var contentText = document.getElementById('contentText').value;
  62. var msg = '{"sid":"' + toUserId + '","message":"' + contentText + '"}';
  63. console.log(msg);
  64. socket.send(msg);
  65. }
  66. }
  67. </script>
  68. </html>

5、测试运行效果

(1)访问页面,建立连接

启动项目,访问 http://localhost:8081/demo/toWebSocketDemo/{cid} 跳转到页面,然后就可以和WebSocket交互了。

这里开启三个浏览器的窗口:

http://localhost:8081/demo/toWebSocketDemo/user-1

此时浏览器的console显示如下:

此时浏览器的network 显示如下:

服务端打印如下图所示内容:


http://localhost:8081/demo/toWebSocketDemo/user-2

此时浏览器的network 显示如下:

此时浏览器的network 显示如下:

服务端打印如下图所示内容:


http://localhost:8081/demo/toWebSocketDemo/user-3

此时浏览器的network 显示如下:

此时浏览器的network 显示如下:

服务端打印如下图所示内容:

(2)、在user-2给user-1发消息

此时user-2的浏览器network里面并没有再请求接口

 

此时查看服务端的console,截图如下:

 查看user-1的console,如下所示:

user-1的network并没有再请求接口。

(3)、给全员发消息

在user-3页面,给所有用户发消息

user-2页面console如下

user-1页面的console如下

 此时服务端的console打印如下:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/853443
推荐阅读
相关标签
  

闽ICP备14008679号