WebSocket簡介

smallbone發表於2018-04-21
Web

WebSocket 是一種基於TCP的提供全雙工/雙向通訊的通訊協議，因為它原生支援跨域，且安全性較高，而且上手容易，是很好的跨域解決方案，甚至可以很容易的搭建一個聊天室。

使用方法

客戶端

//WebSocket接收兩個引數，一個是URL(必須的)，一個是所使用的子協議（可選），可以是字串也可以是陣列，沒有指定則為空字元。http使用ws，https使用wss
var ws = new WebSocket('ws://hostname:port')
複製程式碼

伺服器(NodeJS)

//create WebSocket Server
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8181});
複製程式碼

WebSocket事件

  • open
ws.onopen = function(e) {
    ...
}
複製程式碼
  • message
ws.onmessage = function(e) {
    ...
}
複製程式碼
  • error
ws.onerror = function(e) {
    ...
}
複製程式碼
  • close
ws.onclose = function(e) {
    ...
}
複製程式碼

WebSocket方法

  • send() 可以傳輸兩種型別的之：string和binary；因為WebSocket是事件驅動的協議，所以必須確保連線已經開啟並且已經準備好接收資訊了。
var ws = new WebSocket('ws://localhost:8181');
ws.onopen = function(e) {
    ws.send(JSON.stringigy(stock_request));
}
//or
function processEvent(e) {
    if(ws.readState === WebSocket.OPEN) {
        //Socket open, send
        ws.send(e);
    } else {
        //Show an error, queue it for sending later, etc
    }
}
複製程式碼
  • close()
ws.close();
//or pass a numeric code and human-readable string
ws.close(100, "Goodbye, World!");
複製程式碼

WebSocket close()方法狀態碼 https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent

WebSocket 屬性

當open事件觸發後，WebSocket物件會有幾個屬性可以被客戶端應用讀取。

  • readyState

WebSocket簡介

  • bufferedAmount 常用於傳送二進位制資料，確保在連線關閉前所有資料已經傳送或者在客戶端執行某些限制
  • protocol 伺服器端所採用的子協議（在使用WebSocket構造器時指定的protocol引數，如果伺服器沒有采用則為空）

更多WebSocket詳細資訊參考MDN的WebSocket API

相關文章