使用 Spring Boot websocket 写简单网页聊天室

Spring Boot 为 websocket 提供了一些默认配置，简化了 websocket 使用，这里我们将使用 Spring Boot websocket，并加入 stomp 和 sockjs 的支持，快速编写一个简单的网页聊天室，实现广播消息推送以及点对点的私人消息推送。

篇幅限制下边只给出关键的代码，需要 HTML 页面代码或项目完整源代码的可到这里查看（使用 IDEA 导入后可直接运行）。

基本页面： 将服务器关闭，客户端自动重连： 超过重连次数后，不再重连：

项目的编写分为服务器端和客户端，因此下边也就分为这两个方面进行讲述

服务端

由于 spring boot 的默认配置，大大简化了开发，服务器端需要编写的只有两个地方：配置类和控制器。

当然首先需要引入依赖（这里使用 gradle 作为包管理工具）

compile('org.springframework.boot:spring-boot-starter-web') compile('org.springframework.boot:spring-boot-starter-websocket')

编写配置类

然后是 websocket 的配置类 WebSocketConfig，配置项的解释见注释

@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic", "/user");// “/topic“ 用于给客户端订阅广播信息，”/user“用于给客户端订阅点对点消息 //registry.setApplicationDestinationPrefixes("/app");// 客户端向服务器发送消息时 URL 为：【/app + controller中 @MessageMapping 的地址】，此处暂时不使用该配置 //registry.setUserDestinationPrefix("/user/");// 客户端向指定用户发送（一对一）信息时 URL 前缀是“/user/”，即使不配置默认也是“/user/“ } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/endpoint").withSockJS();//注册客户端websocket连接的端口 } }

编写 controller

@Controller public class WebsocketController { /** * 广播推送 * @param text * @param sessionId * @return * @throws Exception */ @MessageMapping(value = "/chat") @SendTo("/topic/getResponse") public String talk(@Payload String text, @Header("simpSessionId") String sessionId) throws Exception { return "【" + sessionId + "】说:【" + text + "】"; } /** * 点对点推送 * @param text * @param sessionId * @return * @throws Exception */ @MessageMapping(value = "/speak") @SendToUser(value = "/personal") public String speak(@Payload String text, @Header("simpSessionId") String sessionId) throws Exception { return text; } /** * 异常信息推送 * @param exception * @return */ @MessageExceptionHandler @SendToUser(value = "/errors") public String handleException(Throwable exception) { return exception.getMessage(); } }

这里需要说一下其中用到的几个注解： - 方法注解 - @MessageMapping(value = “/URL”) 匹配客户端 send 消息时的URL； - @sendTo 和 @sendToUser 分别用于给客户端订阅广播消息和点对点消息； - 参数注解 - @Payload：使用客户端 STOMP 帧的 body 赋值； - @Header(“xxx”)：使用客户端 STOMP 帧的 headers 中的 xxx 赋值；

在查阅资料的时候，看到也可以使用 SimpMessagingTemplate 进行消息的代理转发，可以这么理解：

@MessageMapping("/chat") public void chat(String value){ this.simpMessagingTemplate.convertAndSend("/topic/getResponse", value); }

等同于

@MessageMapping("/chat") @SendTo("/topic/getResponse") public String chat(String value) { return value; }

客户端

客户端的代码主要是使用 JavaScript 进行 websocket 的一系列操作，由于使用 STOMP 协议，因此需要使用 STOMP API， 关于 STOMP API 的使用，可以参考这里的 总结。

基本操作如下

var socket = new SockJS('/endpoint'); stompClient = Stomp.over(socket); stompClient.connect( {}, function connectCallback (frame) {...}, function errorCallBack (error) {...} );

一对一消息推送

// 获取 socket 连接的sessionId，即从 socket._transport.url 中使用正则截取 var sessionId = /\/([^\/]+)\/websocket/.exec(socket._transport.url)[1]; console.log("connected, session id: " + sessionId); ...... // 订阅私人消息 var subscription_personal = stompClient.subscribe('/user/' + sessionId + '/personal', function callBack (response) { if (response.body) { printToScreen("【私人消息】" + response.body); } else { printToScreen("收到一个空消息"); } } ...... // 发送消息 stompClient.send("/speak", headers, JSON.stringify(body));

广播消息推送

...... // 订阅广播消息 var subscription_broadcast = stompClient.subscribe('/topic/getResponse', function callBack (response) { if (response.body) { printToScreen("【广播】" + response.body); } else { printToScreen("收到一个空消息"); } }); ...... // 发送广播消息 stompClient.send("/chat", headers, JSON.stringify(body));

异常消息推送

// 获取 websocket 连接的 sessionId var sessionId = /\/([^\/]+)\/websocket/.exec(socket._transport.url)[1]; // 订阅异常消息 var subscription_errors = stompClient.subscribe('/user/' + sessionId + '/errors', function callBack (response) { if (response.body) { printToScreen("【异常消息】" + response.body); } else { printToScreen("收到一个空消息"); } });

自动重连机制

使用JavaScript设置自动重连机制，与服务器断开连接后自动重来，重连失败超过10后不再重连

function errorCallBack (error) { document.getElementById("state-info").innerHTML = "连接断开"; console.log('连接断开【' + error + '】'); if (curTryNum <= maxTryNum) { document.getElementById("state-info").innerHTML = "连接关闭，10秒后重新连接……"; console.log("连接关闭，10秒后重新连接……"); // 10秒后重新连接，实际效果：每10秒重连一次，直到连接成功 setTimeout(function () { connect(); }, 10000); } else { document.getElementById("state-info").innerHTML = "连接关闭，且已超过最大重连次数，不再重连"; console.log("连接关闭，且已超过最大重连次数，不再重连"); } }