在vue中使用SockJS實現webSocket通信

原文

1、簡單介紹

基於webSocket通信的庫主要有 socket.io，SockJS，這次用的是 SockJS。

2、前提

這里我們使用sockjs-client、stomjs這兩個模塊，要實現webSocket通信，需要后台配合，也使用相應的模塊。

sockjs-client
sockjs-client是從SockJS中分離出來的用於客戶端使用的通信模塊.所以我們就直接來看看SockJS. SockJS是一個瀏覽器的JavaScript庫,它提供了一個類似於網絡的對象,SockJS提供了一個連貫的,跨瀏覽器的JavaScriptAPI,它在瀏覽器和Web服務器之間創建了一個低延遲,全雙工,跨域通信通道. 你可能會問,我為什么不直接用原生的WebSocket而要使用SockJS呢?這得益於SockJS的一大特性,一些瀏覽器中缺少對WebSocket的支持,因此，回退選項是必要的，而Spring框架提供了基於SockJS協議的透明的回退選項。SockJS提供了瀏覽器兼容性,優先使用原生的WebSocket,如果某個瀏覽器不支持WebSocket,SockJS會自動降級為輪詢.

stomjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡單文本協議;
WebSocket是一個消息架構,不強制使用任何特定的消息協議,它依賴於應用層解釋消息的含義.
與HTTP不同,WebSocket是處在TCP上非常薄的一層,會將字節流轉化為文本/二進制消息,因此,對於實際應用來說,WebSocket的通信形式層級過低,因此，可以在 WebSocket 之上使用STOMP協議，來為瀏覽器 和 server間的 通信增加適當的消息語義。

STOMP與WebSocket 的關系:

1. HTTP協議解決了web瀏覽器發起請求以及web服務器響應請求的細節,假設HTTP協議不存在,只能使用TCP套接字來編寫web應用,你可能認為這是一件瘋狂的事情;
2. 直接使用WebSocket(SockJS)就很類似於使用TCP套接字來編寫web應用,因為沒有高層協議,就需要我們定義應用間發送消息的語義,還需要確保連接的兩端都能遵循這些語義;
3. 同HTTP在TCP套接字上添加請求-響應模型層一樣,STOMP在WebSocket之上提供了一個基於幀的線路格式層,用來定義消息語義.

3、代碼

先安裝 sockjs-client 和 stompjs

npm install sockjs-client npm install stompjs 

import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; export default { data(){ return { stompClient:'', timer:'', } }, methods:{ initWebSocket() { this.connection(); let that= this; // 斷開重連機制,嘗試發送消息,捕獲異常發生時重連 this.timer = setInterval(() => { try { that.stompClient.send("test"); } catch (err) { console.log("斷線了: " + err); that.connection(); } }, 5000); }, connection() { // 建立連接對象 let socket = new SockJS('http://10.10.91.4:8081/ws'); // 獲取STOMP子協議的客戶端對象 this.stompClient = Stomp.over(socket); // 定義客戶端的認證信息,按需求配置 let headers = { Authorization:'' } // 向服務器發起websocket連接 this.stompClient.connect(headers,() => { this.stompClient.subscribe('/topic/public', (msg) => { // 訂閱服務端提供的某個topic console.log('廣播成功') console.log(msg); // msg.body存放的是服務端發送給我們的信息 },headers); this.stompClient.send("/app/chat.addUser", headers, JSON.stringify({sender: '',chatType: 'JOIN'}), ) //用戶加入接口 }, (err) => { // 連接發生錯誤時的處理函數 console.log('失敗') console.log(err); }); }, //連接 后台 disconnect() { if (this.stompClient) { this.stompClient.disconnect(); } }, // 斷開連接 }, mounted(){ this.initWebSocket(); }, beforeDestroy: function () { // 頁面離開時斷開連接,清除定時器 this.disconnect(); clearInterval(this.timer); } } 

參考文章 https://juejin.im/post/5b7fd02d6fb9a01a196f6276