最近接到一個業務需求,需要做一個聊天信息的實時展示的界面,這就需要和服務器端建立webSocket連接,從而實現數據的實時獲取和視圖的實時刷新.在此將我的實現記錄下來,希望可以給有同樣需求的人一些幫助.廢話少說,下面我就來講一下我的實現過程:

socksjs

•客戶端和服務器端api盡可能簡潔，盡量靠近websocket api
•支持服務端擴展和負載均衡技術
•傳輸層應該全面支持跨域通信
•如果受到代理服務器的限制，傳輸層能優雅地從一種方式回退到另一種方式
•盡可能快地建立連接
•客戶端只是純粹的JavaScript，不需要flash
•客戶端JavaScript必須經過嚴格的測試
•服務器端代碼盡可能簡單，降低用另一種語言重寫server的代價

前提

要進行文章中的代碼的測試,需要服務端端開發人員配合你,提供相關的通信接口.來完成客戶端和服務端的通信.實現通信,我們需要用到另個模塊 sockjs-client 模塊和 stomjs 模塊,接下來我會先對這兩個模塊做一個簡單的介紹.

關于實時通信

實現實時通信,我們通常有三種方法:

ajax輪詢 ajax輪詢的原理非常簡單,讓瀏覽器每隔幾秒就像服務器發送一個請求,詢問服務器是否有新的信息.

http 長輪詢 長輪詢的機制和ajax輪詢差不多,都是采用輪詢的方式,不過才去的是阻塞模型(一直打電話,沒收到就不掛電話),也就是說,客戶端發起鏈接后,如果沒有消息,就一直不返回response給客戶端.知道有新的消息才返回,返回完之后,客戶端再此建立連接,周而復始.

WebSocket WebSocket是HTML5開始提供的一種在單個TCP連接上進行全雙工通訊的協議.在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送,不需要繁瑣的詢問和等待. 從上面的介紹很容易看出來,ajax輪詢和長輪詢都是非常耗費資源的,ajax輪詢需要服務器有很快的處理速度和資源,http長輪詢需要有很高的并發,也就是同時接待客戶的能力.而WebSocket,只需要經過一次HTTP請求,就可以與服務端進行源源不斷的消息收發了.

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 的關系:

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

代碼實現

代碼中除了最基本的連接,還設置了一個定時器,每隔十秒發送一條數據到服務器端,如果發生錯誤,catch這個錯誤,重新建立連接.

// 安裝并引入相關模塊import SockJS from 'sockjs-client'; import Stomp from 'stompjs';export default { data() {  return {  dataList: []  }; }, mounted:function(){  this.initWebSocket(); }, beforeDestroy: function () {  // 頁面離開時斷開連接,清除定時器  this.disconnect();  clearInterval(this.timer); }, methods: {  initWebSocket() {  this.connection();  let self = this;  // 斷開重連機制,嘗試發送消息,捕獲異常發生時重連  this.timer = setInterval(() => {   try {   self.stompClient.send("test");   } catch (err) {   console.log("斷線了: " + err);   self.connection();   }  }, 5000);  },  removeTab(targetName) {  console.log(targetName)  },  connection() {  // 建立連接對象  this.socket = new SockJS('http://xxxxxx:8089/ws');//連接服務端提供的通信接口，連接以后才可以訂閱廣播消息和個人消息  // 獲取STOMP子協議的客戶端對象  this.stompClient = Stomp.over(this.socket);  // 定義客戶端的認證信息,按需求配置  var headers = {   login: 'mylogin',   passcode: 'mypasscode',   // additional header   'client-id': 'my-client-id'  };  // 向服務器發起websocket連接  this.stompClient.connect(headers,(frame) => {   this.stompClient.subscribe('/topic/chat_msg', (msg) => { // 訂閱服務端提供的某個topic   consolel.log(msg.body); // msg.body存放的是服務端發送給我們的信息   });  }, (err) => {     });  },  disconnect() {  if (this.stompClient != null) {   this.stompClient.disconnect();   console.log("Disconnected");  }  } }};

總結

以上所述是小編給大家介紹的在vue中使用SockJS實現webSocket通信的過程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！