前端培訓-中級階段（25）-Web Socket 網絡編程（2019-11-14期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

這塊內容是我早就想下手的，可是由於以前服務沒跑起來。因此文章沒寫成。今天通過一下午，終於鼓搗好了demo地址

websocket

webSocket 能夠幫助瀏覽器與服務器完成雙向通訊。
在 webSocket 出現以前，咱們想接收到服務端的數據須要使用一些特殊手段，好比 輪詢、長鏈接。

構造函數

var protocol = 'wss'
if(location.protocol == "http:") protocol = 'ws'
ws = new WebSocket(protocol+"://ws.lilnong.top");

WebSocket(url[, protocols]) 傳入 webScoket服務的URL，便可創建鏈接。

屬性與方法

名稱	類型	描述
url	屬性	當前鏈接的絕對路徑
protocol	屬性	下屬協議，對應構造函數第二個參數
readyState	屬性	當前的連接狀態
bufferedAmount	屬性	當前鏈接的絕對路徑
binaryType	屬性	數據類型：blob
close()	方法	關閉當前連接
send()	方法	發送數據到服務端

readyState 狀態碼

常量	數值	描述
WebSocket.CONNECTING	0	正在鏈接中
WebSocket.OPEN	1	已經鏈接而且能夠雙向通信
WebSocket.CLOSING	2	正在關閉中
WebSocket.CLOSED	3	已關閉或者沒有鏈接成功

WebSocket.send() 方法

WebSocket.send(String | ArrayBuffer | Blob | ArrayBufferView);

var protocol = 'wss'
if(location.protocol == "http:") protocol = 'ws'
wsTest = new WebSocket(protocol+"://ws.lilnong.top");
wsTest.onclose = ()=>console.log('onclose');
wsTest.onerror = ()=>console.log('onerror');
wsTest.onmessage = ()=>console.log('onmessage');
wsTest.onopen = ()=>console.log('onopen')

var blob = new Blob(['lilnong.top','水的一批'])
filereader = new FileReader()
filereader.readAsArrayBuffer(blob);
filereader.onload = function(){
    wsTest.send(filereader.result)
    wsTest.send(new Int8Array(filereader.result))
}
wsTest.send(blob)
wsTest.send('lilnong.top水的一批1')

能夠看到blob實際上是發送失敗了。通常來講咱們仍是發送String居多。

WebSocket.close() 方法

WebSocket.close([code] [, reason]);

1. code 表示錯誤碼。默認爲1005。CloseEvent
2. reason 爲錯誤碼的描述。

回調函數

函數名稱	觸發時機	備註
onclose	當鏈接關閉後的回調函數	主動close或者被動close都會觸發
onerror	當鏈接失敗後的回調函數	只有被動close會觸發
onmessage	當接收到服務端發送數據時的回調函數	e.data爲服務端返回的信息
onopen	當鏈接成功後的回調函數	以後就能夠進行交互了

實現

node

依賴ws = require('ws');這個 websocket 模塊。
咱們能夠把connection 中的鏈接對象保存到全局的數組。這樣咱們就能夠廣播消息了。
在close把鏈接對象移出數組。

var ws = require('ws');
var socketServer = ws.Server;
var wss = new socketServer({port: 8090});//建立服務，監聽8090端口
// 監聽鏈接
wss.on('connection', function(ws){
    // 推送消息
    ws.send(JSON.stringify({type: 'start',time: Date.now()}))
    // 接收瀏覽器端發送的消息
    ws.on('message',function(message){
        console.log(JSON.parse(message))
    })
    // 監聽鏈接斷開
    ws.on('close', function() {})
})

html

var initWs = function initWs(){
    var protocol = 'wss'
    if(location.protocol == "http:") protocol = 'ws'
    ws = new WebSocket(protocol+"://ws.lilnong.top");
    ws.onopen = function (e) {console.log('鏈接成功');}
    //收到消息處理
    ws.onmessage = function (e) {
        console.log(e.data)
    }
    //監聽鏈接關閉狀況
    ws.onclose = function (e) {
        setTimeout(v=>initWs(), 2000);//自動重連
        console.log('鏈接關閉');
    }
}
initWs();
setInterval(v=>{ws.send(JSON.stringify({type: 'ping'}));}, 10 * 1000);// 保持心跳

總結

1. socket 須要保存心跳，通常是 ping、pong 邏輯。
2. 超時時間是能夠人爲設置的，因此心跳時間也是能夠選擇的。（個人是20s，因此心跳是10s。公司以前作的5m）。

3. socket 若是斷線要注意重連。由於都會落到close裏面，因此咱們能夠直接在close裏面重連。

   1. 部分狀況要注意重連頻率、以及重連次數的策略。
4. 發送和接受只能是字符串，因此要JSON.stringify()

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. WebSockets