不斷互相的client端與server端

what is websocket?

websocket 為真正讓瀏覽器實現雙向溝通的一項協議, 讓 server 也可以主動 push 訊息到 client, 有以下優點

1. 較小的頻寬資源消耗, 連線建立後, 伺服器和用戶端之間交換資料時, 不用每次傳輸都攜帶完整的表頭檔, 而 http 卻需要

2. 更強的實時性, 延遲更少, 比起 polling, long-polling能在短時間推送更多次資料

3. 可以傳輸二進位的數據

4. client 可以和不同的 server進行通訊

5. 更好的壓縮效果。相對於HTTP壓縮，Websocket在適當的擴充功能支援下，可以沿用之前內容的上下文，在傳遞類似的資料時，可以明顯提高壓縮率。

Websocket使用ws或wss的統一資源標誌符，類似於HTTPS，其中wss表示在TLS之上的Websocket。

如：

ws://example.com/wsapi
wss://secure.example.com/

Websocket使用和 HTTP 相同的 TCP 埠，可以繞過大多數防火牆的限制。預設情況下，Websocket協定使用80埠；執行在TLS之上時，預設使用443埠。

瀏覽器的 websocket api

const ws = new WebSocket('ws://localhost:8080');

ws物件建立後, 就會開始執行握手

webSocket.readyState

類似於XMLHttpRequest.readyState, 共有四種狀態

• 0 : connecting, 正在連接
• 1 : open, 連接成功
• 2 : closing, 正在關閉連線
• 3 : closed, 連線關閉, 連線失敗

webSocket.onopen

用來監聽連接成功的狀態

ws.onopen = function () {
  ws.send('Hello Server!');
}

webSocket.onclose

用來監聽連線關閉的狀態

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
};

webSocket.onmessage

用來監聽接收伺服器傳過來的訊息

ws.onmessage = function(event) {
  var data = event.data;
};

webSocket.send()

send()方法用來向伺服器傳送訊息

ws.send('your message');

參考資料 阮一峰的网络日志