SpringBoot - WebSocket的整合与使用详解1(消息群发样例)
一、WebSocket 介绍
1,什么是 WebSocket?
- WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,已被 W3C 定为标准。使用 WebSocket 可以使得客户端和服务器之间的数据交换变得更加简单。
- 在 WebSocket 协议中,浏览器和服务器只需要完成一次握手,两者之间就可以直接创建持久性的连接,并进行双向数据传输。
2,WebSocket 的特点
- WebSocket 使用时需要先创建连接,这使得 Websocket 成为一种有状态的协议,在之后的通信过程中可以省略部分状态信息(例如身份认证等)。
- WebSocket 连接在端口 80(ws)或者 443(wss)上创建,与 HTTP 使用的端口相同,这样,基本上所有的防火墙都不会阻止 WebSocket 连接。
- WebSocket 使用 HTTP 协议进行握手,因此它可以自然而然地集成到网络浏览器和 HTTP 服务器中,而不需要额外的成本。
- 心跳消息(ping 和 pong)将被反复的发送,进而保持 WebSocket 连接一直处于活跃状态。
- 使用该协议,当消息启动或者到达的时候,服务端和客户端都可以知道。
- WebSocket 连接关闭时将发送一个特殊的关闭消息。
- WebSocket 支持跨域,可以避免 Ajax 的限制。
- HTTP 规范要求浏览器将并发连接数限制为每个主机名两个连接,但是当我们使用 Websocket 的时候,当握手完成之后,该限制就不存在了,因为此时的连接已经不再是 HTTP 连接了。
- WebSocket 协议支持扩展,用户可以扩展协议,实现部分自定义的子协议。
- WebSocket 拥有更好的二进制支持以及更好的压缩效果。
3,WebSocket 常见的使用场景
- 在线股票网站
- 即时聊天
- 多人在线游戏
- 应用集群通信
- 系统性能实时监控
二、实现一个消息群发样例
1,添加依赖
编辑项目的 pom.xml 文件,添加相关依赖:
注意:只有第一个 spring-boot-starter-websocket 依赖是 Web Socket 相关依赖,其他的都是前端库,这里使用 jar 形式对这些前端库进行统一管理。这些使用 webjar 添加到项目中的前端库,在 Spring 项目中已经默认添加了静态资源过滤,因此可以直接使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | < dependency > < groupId >org.springframework.boot</ groupId > < artifactId >spring-boot-starter-websocket</ artifactId > </ dependency > < dependency > < groupId >org.webjars</ groupId > < artifactId >webjars-locator-core</ artifactId > </ dependency > < dependency > < groupId >org.webjars</ groupId > < artifactId >sockjs-client</ artifactId > < version >1.1.2</ version > </ dependency > < dependency > < groupId >org.webjars</ groupId > < artifactId >stomp-websocket</ artifactId > < version >2.3.3</ version > </ dependency > < dependency > < groupId >org.webjars</ groupId > < artifactId >jquery</ artifactId > < version >3.3.1</ version > </ dependency > |
2,配置 WebSocket
自定义类 WebSocketConfig 继承自 WebSocketMessageBrokerConfigurer 进行 WebSocket 配置,然后通过 @EnableWebSocketMessageBroker 注解开启 WebSocket 消息代理。具体代码如下:Spring 框架提供了基于 WebSocket 的 STOMP 支持,STOMP 是一个简单的可互操作的协议,通常被用于通过中间服务器在客户端之间进行异步消息传递。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { // 设置消息代理的前缀,如果消息的前缀为"/topic",就会将消息转发给消息代理(broker) // 再由消息代理广播给当前连接的客户端 config.enableSimpleBroker( "/topic" ); // 下面方法可以配置一个或多个前缀,通过这些前缀过滤出需要被注解方法处理的消息。 // 例如这里表示前缀为"/app"的destination可以通过@MessageMapping注解的方法处理 // 而其他 destination(例如"/topic""/queue")将被直接交给 broker 处理 config.setApplicationDestinationPrefixes( "/app" ); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { // 定义一个前缀为"/chart"的endpoint,并开启 sockjs 支持。 // sockjs 可以解决浏览器对WebSocket的兼容性问题,客户端将通过这里配置的URL建立WebSocket连接 registry.addEndpoint( "/chat" ).withSockJS(); } } |
3,定义 Controller
(1)接着定义一个 Controller 用来实现对消息的处理:
- 根据上面 WebSocketConfig 的配置,@MessageMapping("/hello") 注解的方法将用来接收“/app/hello”路径发送来的消息,在注解方法中对消息进行处理后,再将消息转发到 @SendTo 定义的路径上。
- 而 @SendTo 路径是一个前缀为“/topic”的路径,因此该消息被交给消息代理 broker,再由 broker 进行广播。
1 2 3 4 5 6 7 8 9 | @Controller public class GreetingController { @MessageMapping ( "/hello" ) @SendTo ( "/topic/greetings" ) public Message greeting(Message message) throws Exception { return message; } } |
(2)自定义的 Message 对象代码如下:
1 2 3 4 5 6 | @Setter @Getter public class Message { private String name; private String content; } |
4,构建聊天页面
在 resources/static 目录下创建 chat.html 页面作为聊天页面,代码如下:
注意:第 6、7、8 行是引入外部的 JS 库,这些 JS 库之前已经在 pom.xml 中通过依赖加入进来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>群聊</title> <script src= "/webjars/jquery/jquery.min.js" ></script> <script src= "/webjars/sockjs-client/sockjs.min.js" ></script> <script src= "/webjars/stomp-websocket/stomp.min.js" ></script> <script> var stompClient = null ; // 根据是否已连接设置页面元素状态 function setConnected(connected) { $( "#connect" ).prop( "disabled" , connected); $( "#disconnect" ).prop( "disabled" , !connected); if (connected) { $( "#conversation" ).show(); $( "#chat" ).show(); } else { $( "#conversation" ).hide(); $( "#chat" ).hide(); } $( "#greetings" ).html( "" ); } // 建立一个WebSocket连接 function connect() { // 用户名不能为空 if (!$( "#name" ).val()) { return ; } // 首先使用 SockJS 建立连接 var socket = new SockJS( '/chat' ); // 然后创建一个STOMP实例发起连接请求 stompClient = Stomp.over(socket); // 连接成功回调 stompClient.connect({}, function (frame) { // 进行页面设置 setConnected( true ); // 订阅服务端发送回来的消息 stompClient.subscribe( '/topic/greetings' , function (greeting) { // 将服务端发送回来的消息展示出来 showGreeting(JSON.parse(greeting.body)); }); }); } // 断开WebSocket连接 function disconnect() { if (stompClient !== null ) { stompClient.disconnect(); } setConnected( false ); } // 发送消息 function sendName() { stompClient.send( "/app/hello" , {}, JSON.stringify({ 'name' : $( "#name" ).val(), 'content' :$( "#content" ).val()})); } // 将服务端发送回来的消息展示出来 function showGreeting(message) { $( "#greetings" ) .append( "<div>" + message.name+ ":" +message.content + "</div>" ); } // 页面加载后进行初始化动作 $( function () { $( "#connect" ).click( function () { connect(); }); $( "#disconnect" ).click( function () { disconnect(); }); $( "#send" ).click( function () { sendName(); }); }); </script> </head> <body> <div> <label for = "name" >请输入用户名:</label> <input type= "text" id= "name" placeholder= "用户名" > </div> <div> <button id= "connect" type= "button" >连接</button> <button id= "disconnect" type= "button" disabled= "disabled" >断开连接</button> </div> <div id= "chat" style= "display: none;" > <div> <label for = "name" >请输入聊天内容:</label> <input type= "text" id= "content" placeholder= "聊天内容" > </div> <button id= "send" type= "button" >发送</button> <div id= "greetings" > <div id= "conversation" style= "display: none" >群聊进行中...</div> </div> </div> </body> </html> |
5,运行测试
(1)启动项目,使用浏览器访问 http://localhost:8080/chat.html 显示如下页面:
(2)输入用户名后点击“连接”按钮,显示如下结果:

(3)在打开一个其他的浏览器,重复上面操作,这样就有两个用户连上了服务器。接下来就可以开始群聊了:
