vue + websocket 的使用

 

陽光正好，咱們正在努力前行。

一。引言

初始使用websocket ,一開始看文檔的時候，以爲很簡單，只須要建立websocket實例，而後有幾個監聽打開鏈接，監聽關閉鏈接，監聽鏈接異常等方法。可是， 在項目中使用的時候，就會發現 不是那麼的簡單 。。。經過這篇博客可以給你們講一下什麼是websocket ,如何在項目中實際去使用websocket。

二。什麼是websocket

WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議(摘自維基百科)。咱們都知道Http協議，通訊由客戶端發起。可是，有需求須要咱們在客戶端不發起通訊的時候，由服務器端發送，此時就須要websocket了。

websoket是經過客戶端向服務器創建鏈接，保持客戶端和服務器端雙向的通訊的過程。

三。websocket 的使用

 1>readyState屬性返回實例對象的當前狀態。共四種：

　　CONNECTING：值爲0，表示正在鏈接。

　　OPEN：值爲1，表示鏈接成功，能夠通訊了。

　　CLOSING：值爲2，表示鏈接正在關閉。

　　CLOSED：值爲3，表示鏈接已經關閉，或者打開鏈接失敗。

2> onopen： 實例對象的onpen屬性，用於指定鏈接成功後的回調函數。

3>onclose: 實例對象的onclose屬性，用於指定鏈接關閉後的回調函數。

4>onmessage: 實例對象的onmessage屬性，用於指定收到服務器 數據後的回調函數。

5>send:實例對象的send()方法用於向服務器發送數據

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};
ws.onerror = function() {
console.log('Connection error‘)
}

 

四。在vue 中如何使用

1》建立websocket鏈接,同時在websocket實例上掛在上監聽打開，監聽關閉，監聽異常，監聽消息的方法

init() {
     let url = 'wss://finance.allhome.com.cn/scanCodeLogin'
       // 建立websocket鏈接
      this.websock = new WebSocket(url);
　　　　// 監聽打開
      this.websock.onopen= this.websockOpen;
　　　　// 監聽關閉
      this.websock.onclose = this.websockClose;
　　　　//監聽異常
      this.websock.onerror = this.websockError;
　　　　//監聽服務器發送的消息
      this.websock.onmessage = this.websockMessage;
    },

2》監聽打開，監聽關閉，監聽異常，監聽消息的方法

websockOpen() {
     console.log('監聽打開')
 },
websockClose() {
console.log('監聽關閉)
},
websockError() {
console.log('監聽異常')
}
websockMessage（e） {
console.log('監聽服務器發送的消息'，e.data)
}

四。碰見的坑

1>長鏈接 在長時間不發送消息的時候，會自動斷開。緣由是運維那塊使用了nginx服務,會配置一個時間段， 在這個時間裏，若是一直滅有數據的傳輸，鏈接就會在這個時間以後自動關閉。由於咱們沒法控制用戶何時去觸發websocket消息的推送。那麼解決方案是：

心跳保持鏈接:實現心跳檢測的思路是： 每隔固定的時間，發送一個數據到服務器，服務器接收以後，返回一個數據給客戶端。若是客戶端onmessage事件能監聽到返回的數據，則表示鏈接未斷開。不然，表示鏈接斷開，須要客戶端去從新發送請求進行鏈接。

start() {
　　　　// 發送心跳
      clearInterval(this.timeoutObj)
      this.timeoutObj = setInterval(() => {
        let date = new Date()
        this.webSocket.send(`發送心跳給後端${date}`)
      }, 2 * 60 * 1000)
    }

參考博客： https://www.cnblogs.com/tugenhua0707/p/8648044.html

若是不正確的，請多多指教！！！

碰見關於websocket的問題，會繼續更新的~~~