【原创】基于Springboot、WebSocket的一对一聊天室

版权声明：本文为博主SGCoder的原创文章，未经博主允许不得转载。

基于Springboot、WebSocket、STOMP协议、SockJS协议的一对一聊天室

作者：SGCoder，转载需注明。

因为最近学校一个项目，需要实现与商家沟通的这么一个需求，所以经过一段时间的网上收集资料，了解到了要主动让服务器推送消息，更好的办法就是采用WebSocket技术

一.简要介绍WebSocket

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

一般的轮询，是通过Client间隔一定时间的向Server发出HTTP请求，让Server回应请求来达到实时更新数据的，但是这种方式有个明显的缺点，当这个间隔时间很大时，就不可以实现真正的“实时更新”了，如果很小时，又会浪费很多无效的资源。
所以相对于轮询，WebSocket是一种长连接的协议，当Client第一次发出HTTP请求时，Server就与Client建立长连接，便于后面Server主动更新数据推送给Client。

二.简要介绍STOMP协议与SockJS协议

1、STOMP协议是WebSocket的子协议，它是一个简单的文本消息传输协议，提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。
2、SockJS是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

其中WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，也是底层协议，因为在部分浏览器中是不支持WebSocket协议的，因此采用SockJS作为备选的方案，而 STOMP 是基于 WebSocket（SockJS） 的上层协议。

三.介绍主要代码

3.1、服务端代码

第一步：首先需要在Spring上下文中添加对WebSocket的配置

（1）.需要为类添加@EnableWebSocketMessageBroker注解，用于开启使用STOMP协议，并且该类需要继承WebSocketMessageBrokerConfigurer类，也可以继承AbstractWebSocketMessageBrokerConfigurer

（2）.需要添加public void registerStompEndpoints()方法，来注册STOMP协议的节点，用于客户端SoskJS连接

（3）.配置消息代理（Broker）

第二步：生成WebSocketController类，编写接口逻辑

（1）.用SpringBoot中操作WebSocket的SimpMessagingTemplate类，并用该类的convertAndSendToUser（参数一、参数二、参数三）方法，向指定客户端推送消息。
（2）.convertAndSendToUser方法中的参数一为指定客户端的用户标识；参数二为设定的访问服务器的URL；参数三为发送的消息体。

3.2、客户端代码

var stompClient = null;	
//加载完浏览器后  调用connect（），打开双通道
$(function(){	
//打开双通道
connect()
})	
//强制关闭浏览器  调用websocket.close（）,进行正常关闭
window.onunload = function() {
	disconnect()
}
function connect(){
	var userId='1';
    var socket = new SockJS('http://127.0.0.1:8080/endpointOyzc'); //连接SockJS的endpoint名称为"endpointOyzc"
    console.log('我userId1已经连接成功');
    stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
    stompClient.connect({},function(frame){//连接WebSocket服务端        
        console.log('Connected:' + frame);
        stompClient.subscribe('/user/' + userId + '/queue/getResponse',function(response){     
        	showResponse(response.body);
        });
    });
}

第一步：通过Stomp.over（）方法创建stompClient，参数为socket，并且该socket是由SockJS创建的，new SockJS（）的参数为前面WebSocketConfig类中配置的stomp节点路径。

第二步：连接WebSocket服务端，通过stompClient.connect({},function(frame){}。

第三步：通过stompClient.subscribe订阅/queue/getResponse 发送的消息，其中当userId与服务端指定的userId相同时，该客户端才会收到服务端的推送消息。

---

以上