javascript
【原创】基于Springboot、WebSocket的一对一聊天室
版權聲明:本文為博主ExcelMann的原創文章,未經博主允許不得轉載。
基于Springboot、WebSocket、STOMP協議、SockJS協議的一對一聊天室
作者:ExcelMann,轉載需注明。
因為最近學校一個項目,需要實現與商家溝通的這么一個需求,所以經過一段時間的網上收集資料,了解到了要主動讓服務器推送消息,更好的辦法就是采用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相同時,該客戶端才會收到服務端的推送消息。
以上
gitee項目地址:https://gitee.com/XuXuanGan/OnlineChatDemo
總結
以上是生活随笔為你收集整理的【原创】基于Springboot、WebSocket的一对一聊天室的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux架设代理服务器
- 下一篇: JavaScript 跳格子游戏