WebSocket 學習記錄

什麼是 websocket

websocket是html5開始提供的一種在單個tcp連線上進行雙向通訊的協議。

websocket使得客戶端和伺服器之間的資料交換變得更加簡單，允許伺服器主動向客戶端推送資料。在websocket api中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。

websocket的特點

客戶端api

websocket建構函式

// websocket物件作為乙個建構函式，用於新建websocket例項。建立例項，客戶端就會與伺服器進行連線。
var ws = new websocket("ws://localhost:8080");

websocket.readystate返回當前websocket的連線狀態，唯讀

websocket.onopen連線成功後的**函式

ws.onopen = function () ;
// 如果需要指定多個**函式，可以使用 addeventlistener 方法進行繫結 
ws.addeventlistener('open', function (event) );

websocket.onclose連線關閉後的**函式

ws.onclose = function (event) 
// 指定多個**函式
ws.addeventlistener('close', function(event) );

websocket.onmessage客戶端接收到服務端資料時觸發的**函式

ws.onmessage = function(event) 
// 指定多個**函式
ws.addeventlistener('message', function(event) );
// 動態判斷收到的資料型別, 可以是文字(blob)，也可能是二進位制資料(arraybuffer)
ws.onmessage = function(event) 
if(event.data instanceof arraybuffer) 
}

websocket.onerror通訊發生錯誤時觸發的**函式

ws.onerror = function(event) 
ws.addeventlistener("error", function() );

websocket.send()用於向伺服器傳送資料

ws.send('傳送資料')； // 傳送文字資料
// 傳送 blob 物件
var file = document.queryselector('input[type="file"]').files[0];
ws.send(file);
// 傳送 arraybuffer 物件
var img = canvas_context.getimagedata(0,0,400, 320);
var binary = new uint8array(img.data.length);
for(var i = 0; i < img.data.length; i++) 
ws.send(binary.buffer);

websocket.bufferedamount屬性，表示還有多少位元組的二進位制資料沒有傳送出去。可以用來判斷傳送是否結束。

var data = new arraybuffer(1000000);
ws.send(data);
if(ws.bufferedamount === 0) else

關於websocket重連機制

在實際的運用中總是回遇到很多意外情況，包括網路不穩定、後端介面不穩定，或者長時間不與後台"聯絡"等因素，都有可能導致websocket連線斷開，所以想要乙個穩定的websocket連線，就必須有重連機制，websocket在檢測到連線斷開時可以自動嘗試重新連線，不影響資料的傳輸以及業務的開展。

var isreconnect = false; // 避免重複連線
var timer = null; // 避免重複連線，保證同一時刻只有乙個重連
var ws = null;
// 重連方法
function reconnectwebsocket() 
isreconnect = true;
// 如果沒有連線上會一直重連，設定延遲避免請求過多
timer && cleartimeout(timer);
timer = settimeout(() => , 2000);
}// 初始化連線websocket
function initwebsocket() 
// 建立例項，連線伺服器
ws = new websocket(socketurl);
// 連線成功，可以傳送訊息
ws.onopen = function(event) {};
// 收到伺服器訊息後觸發
ws.onmessage = function(event) {};
// 連線斷開，進行重連
ws.onclose = function(event) 
// 發生錯誤時，進行重連
ws.onerror = function(event) 
}

websocket 心跳機制

websocket重連機制，一般的網路斷開，連線不穩定斷開可以重連成功，但是有些情況是無法被檢測到連線已經斷開的，比如潮湧無線連線時，裝置連著wifi，凡是wifi實際上已經沒有流量或者跟網路的連線已經斷開，websocket是不會知道的，或者檢測到了會一直不停重連，但是一直連不上，等到wifi恢復正常了也很大機率是連線失敗。這個時候需要加上心跳機制，心跳是前端和後端的一種約定，前端每過一段時間就向後端傳送規定格式的"心跳"，後台收到這個心跳後，返回相應的資訊，只要兩端一直有心跳的互動就任務互動還存在。如果在約定時間內(比如2分鐘)前端都沒有收到後端返回的心跳資訊，那麼久可以認為這是乙個有問題的連線，前端就主動斷掉這次連線，重新發起乙個websocket連線。

websocket 簡單的封裝

(function() 
// 初始化websocket連線
chatnotice.prototype.initconnection = function () 
// 連線伺服器
this.socket = new websocket(this.socketurl);
console.log("readystate:::", this.socket.readystate);
// 伺服器連線成功後**
this.socket.onopen = function(event) ;
// 收到伺服器訊息後**
this.socket.onmessage = function(event) 
// 連線斷開後**
this.socket.onclose = function(event) ;
// 報錯時**
this.socket.onerror = function(event) 
return this;
}// 傳送訊息給伺服器進行登入
chatnotice.prototype.login = function() 
if(this.sessionid) 
console.log(':::::::傳送訊息:::::::', data);
// 向伺服器傳送訊息
this.socket.send(json.stringify(data));
}// 處理訊息
chatnotice.prototype.handlemessage = function(msg) else 
}// 斷掉重新連線伺服器
chatnotice.prototype.againconnectionwebsocket = function() 
console.log(':::::::嘗試重新連線伺服器:::::::');
this.isconnection = true;
this.timer && cleartimeout(this.timer);
this.timer = settimeout(function() , 1000); 
}new chatnotice(
}); 
}());

WebSocket 學習記錄

websocket 踩坑記錄

學習隨記 websocket

websocket學習持續更新

WebSocket 學習記錄

websocket 踩坑記錄

學習隨記 websocket

websocket學習 持續更新

相關推薦

websocket學習持續更新