淺談 WebSocket 協定：實作一個簡單的即時聊天室吧！

參考資料：https://leesonhsu.blogspot.com/2018/07/socketwebsocketsocketio.html

What is WebSocket?

WebSocket 是 HTML5 提供的一種網路傳輸協定，是瀏覽器（Client）與伺服器（Server）交換資料的方式之一。

與我們較為熟知的 HTTP 或 HTTPS 協定，同樣位於 OSI 模型的應用層，且基於傳輸層的 TCP 協定。其最大不同在於，WebSocket 協定只需連線一次，就能保持雙向溝通，不需重複發送 Request，因此回應更即時，進而提升 Web 通訊速度。

Why WebSocket?

HTTP 協定只能由 Client 端「單向」發送請求，無法由 Server 端主動發送請求；WebSocket 協定則允許 Server 端主動向 Client 端推播資料，實現「雙向溝通」機制
透過 HTTP 1.1 持久連接（keep-alive），有效解決 HTTP 輪詢（Polling）產生的效能問題，節省伺服器資源
實際範例：訊息推播、即時聊天室、共同編輯等功能

How to use WebSocket?

WebSocket 的建立是由瀏覽器透過 JavaScript 指令，發起一個 HTTP Request 來實現。請求網址會長這樣：

1	ws://example.com/wsapi

若經過 SSL 加密（WebSocket Secure），則加密連接網址會變成：

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

WebSocket 進行一次雙方握手過程，Client 端發送資訊：

GET ws://localhost:8080 HTTP/1.1             // 透過 HTTP/1.1 進行交握
Origin: http://localhost:8080                // Client 端 URL
Host: localhost:8080
Upgrade: websocket                           // 表示發送 WebSocket 類型請求
Connection: Upgrade                          // 表示 Client 希望連接升級
Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg==  // base64 編碼密文，瀏覽器在每次握手隨機生成
Sec-WebSocket-Protocol: chat, superchat      // 用來區分同 URL 下不同 Server 需要之協議
Sec-WebSocket-Version: 13                    // 支持的 WebSocket 版本號

Server 端回應資訊：

HTTP/1.1 101  Switching Protocols    // 表示成功建立連接
Upgrade: websocket     
Connection: Upgrade     
Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8= // Server 端回覆對應的加密
Sec-WebSocket-Protocol: chat         // Server 端使用的協議
Sec-WebSocket-Location: ws://localhost:8080

可參考 MDN 上提供的 WebSocket API 使用範例，建立簡單的 WebSocket 連線。

接下來會分幾個步驟來實作 WebSocket，其中又分 Server 和 Client 兩個面向進行：

Step1. 建置 WebSocket Server
Step2. 從 Client 發送請求給 WebSocket Server 建立連線
Step3. Server 處理來自 Client 的訊息與回應
Step4. Client 處理來自 Server 的訊息與回應
Step5. 實戰練習：實現 Server 與多個 Client 連線溝通

那麼就開始吧！

Server 端：建置 WebSocket 環境

這裡以 Node.js 為例，使用 Express 框架搭配 WebSocket 套件來建立環境。

關於如何使用 Express 來架設 Server，可參考過去寫的筆記：[week 17] 後端中階 - 使用 Node.js + Express 框架建立一個靜態網頁。

首先是安裝套件

1 2	$ npm install express $ npm install ws

安裝完套件後，在專案中建立 server.js 檔案，作為專案的進入點：

// import library
const express = require('express')
const ServerSocket = require('ws').Server   // 引用 Server

// 指定一個 port
const PORT = 8080

// 建立 express 物件並用來監聽 8080 port
const server = express()
    .listen(PORT, () => console.log(`[Server] Listening on https://localhost:${PORT}`))

// 建立實體，透過 ServerSocket 開啟 WebSocket 的服務
const wss = new ServerSocket({ server })

// Connection opened
wss.on('connection', ws => {
    console.log('[Client connected]')

    // Connection closed
    ws.on('close', () => {
        console.log('Close connected')
    })
})

即可輸入下方指令來運行 Server：

1	$ node server.js

出現以下 log 代表 Server 正在監聽 8080 port：

Client 端：與 WebSocket Server 連線

處理完 Server 後，接下來要從 Client 端連結 WebSocket 服務。這裡需另起一個專案，包含 index.html 和 index.js 兩個檔案。

UI 畫面：新增一個 index.html 檔案

<html>
    <head>
    </head>
    <body>
        <!-- Connect or Disconnect WebSocket Server -->
        <button id="connect">Connect</button>
        <button id="disconnect">Disconnect</button>

        <!-- Send Message to Server -->
        <div>
            Message: <input type="text" id="sendMsg" ><button id="sendBtn">Send</button>
        </div>

        <!-- Import index.js after UI rendered -->
        <script src='./index.js'></script>
    </body>
</html>

渲染後如下圖所示：

邏輯處理：新增一個 index.js 檔案

var ws

// 監聽 click 事件
document.querySelector('#connect')?.addEventListener('click', (e) => {
    console.log('[click connect]')
    connect()
})

document.querySelector('#disconnect')?.addEventListener('click', (e) => {
    console.log('[click disconnect]')
    disconnect()
})

document.querySelector('#sendBtn')?.addEventListener('click', (e) => {
    const msg = document.querySelector('#sendMsg')
    sendMessage(msg?.value)
})

function connect() { 
    // Create WebSocket connection
    ws = new WebSocket('ws://localhost:8080') 
    // 在開啟連線時執行
    ws.onopen = () => console.log('[open connection]')
}

function disconnect() {
    ws.close()
    // 在關閉連線時執行
    ws.onclose = () => console.log('[close connection]')
}

可搭配 https://github.com/indexzero/http-server 套件快速架設 localhost 測試環境：

// 安裝套件
$ npm install http-server
// 運行 http-server
$ http-server [path] [options]

// 預設為 8080 port，這裡指定 3000 port 為例
$ http-server -p 3000

實際運行如下方所示：

建立好 WebSocket 連結之後，就可以進行雙向溝通了！

Server 端：處理接發送 message

Server 端分別能使用 send 發送訊息，以及透過監聽 message 事件接收來自 Client 的訊息：

// Connection opened
wss.on('connection', ws => {
    console.log('[Client connected]')

	// Listen for messages from client
	ws.on('message', data => {
	    console.log('[Message from client]: ', data)
	    // Send message to client
	    ws.send('[Get message from server]')
	})

	// ...
})

Client 端：處理接發送 message

同樣的，Client 端也能使用 send 送出訊息，以及透過 onmessage 接收 Server 端的訊息：

// 監聽 click 事件
document.querySelector('#sendBtn')?.addEventListener('click', (e) => {
    const msg = document.querySelector('#sendMsg')
    sendMessage(msg?.value)
})

// Listen for messages from Server
function sendMessage(msg) {
    // Send messages to Server
    ws.send(msg)
    // Listen for messages from Server
    ws.onmessage = event => console.log('[send message]', event)
}

實戰練習：實作一個簡單的即時聊天室

先前提到 WebSocket 常應用於即時聊天室等功能，也就是實現 Server 同時與多個 Client 連線。那該如何在 ClientA 傳送訊息給 Server 的同時，讓 ClientB 也接收到來自 Server 回傳的訊息呢？

這時就要仰賴「廣播功能」，首先透過 ws 提供的方法 clients 取得目前所有連線中的 Clients 資訊，再使用 forEach 迴圈送出訊息給每個 Client：

// Connection opened
wss.on('connection', ws => {
  console.log('[Client connected]')

	// Listen for messages from client
	ws.on('message', data => {
	    console.log('[Message from client]: ', data)
	    // Get clients who connected
	    let clients = wss.clients
	    // Use loop for sending messages to each client
	    clients.forEach(client => {
	        client.send('[Broadcast][Get message from server]')
	    })
	})

	// ...
})

至於如何區分各個 Client，可參考這篇提供的方法：《webSocketServer node.js how to differentiate clients》，直接賦值 id 一個隨機變數。

或是參考 github 上的這篇討論《unique identifier for each client request to websocket server》，直接取 request header 中的 'sec-websocket-key' 給每個 Client 新屬性 id：

wss.on('connection', (ws, req) => {
      var id = req.headers['sec-websocket-key']
      // Do something...
})

總之目的是取得各個使用者獨一無二的識別證，透過這些識別證，又能夠對照到我們所熟悉的遊戲 ID 或是帳號。

經整理後的程式碼如下：

Server 端：server.js

// import library
const express = require('express')
const ServerSocket = require('ws').Server   // 引用 Server

const PORT = 8080

// 建立 express 物件並用來監聽 8080 port
const server = express()
    .listen(PORT, () => console.log(`[Server] Listening on https://localhost:${PORT}`))

// 建立實體，透過 ServerSocket 開啟 WebSocket 的服務
const wss = new ServerSocket({ server })

// Connection opened
wss.on('connection', (ws, req) => {
    ws.id = req.headers['sec-websocket-key'].substring(0, 8)
    ws.send(`[Client ${ws.id} is connected!]`)

    // Listen for messages from client
    ws.on('message', data => {
        console.log('[Message from client] data: ', data)
        // Get clients who has connected
        let clients = wss.clients
        // Use loop for sending messages to each client
        clients.forEach(client => {
            client.send(`${ws.id}: ` + data)
        })
    })

    // Connection closed
    ws.on('close', () => {
        console.log('[Close connected]')
    })
})

Client 端：index.js

var ws

// 監聽 click 事件
document.querySelector('#connect')?.addEventListener('click', (e) => {
    connect()
})

document.querySelector('#disconnect')?.addEventListener('click', (e) => {
    disconnect()
})

document.querySelector('#sendBtn')?.addEventListener('click', (e) => {
    const msg = document.querySelector('#sendMsg')
    sendMessage(msg?.value)
})

function connect() { 
    // Create WebSocket connection
    ws = new WebSocket('ws://localhost:8080') 
    
    // ws = new WebSocket('ws://192.168.17.35:58095') 
    // 在開啟連線時執行
    ws.onopen = () => {
        console.log('[open connection]')
        // Listen for messages from Server
        ws.onmessage = event => {
            console.log(`[Message from server]:\n %c${event.data}` , 'color: blue')
        }
    }
}

function sendMessage(msg) {
    // Send messages to Server
    ws.send(msg)
}

function disconnect() {
    ws.close()
    // 在關閉連線時執行
    ws.onclose = () => console.log('[close connection]')
}

實際運行如下圖，完成具備廣播功能的即時聊天室！

WebSocket API

在實際練習後，這裡整理一些常用的 WebSocket API：

new WebSocket()：和 Server 建立 WebSocket 連線

WebSocket Event

在建立 WebSocket 連線之後，即可透過 addEventListener() 監聽各種 Events，做出不同的對應方法，可參考 MDN 上的 Events：

open：成功和 Server 建立連線時觸發
message：接收到 Server 端訊息時觸發
close：關閉連線時觸發
error：連線發生錯誤時觸發

WebSocket Methods

同樣在建立 WebSocket 連線後，可使用以下 WebSocket 提供的方法進行互動：

send()：發送訊息給 Server
close()：關閉連線

比較：Socket / WebSocket / Socket.IO

Socket、Websocket、Socket.io 這三者都和網路即時通訊有關，名稱也有 87 像，但實際上是不同的東西，以下做簡單的整理介紹：

參考資料：https://leesonhsu.blogspot.com/2018/07/socketwebsocketsocketio.html

Socket：傳輸與應用層之間的接口

是應用層與 TCP/IP 協議之間的抽象層介面，是一組 API 接口
使用者可透過 Socket 來操作 TCP/IP 協議通信
傳輸方式多為 stream
傳輸載體類型為 binary

WebSocket：應用層協議

為了改善 Web 即時雙向通訊而創造出來的協議
瀏覽器底層使用 Socket 作為通訊介面
載體類型有二種：binary（二進位）或 text（文字），只能擇一使用

Socket.IO：一套 JavaScript 函式庫

是一套用來建立即時通訊應用的 JavaScript 函式庫，透過 Socket.IO 能夠實現 Server 與多個 Client 之間的溝通
是建立在 WebSocket 之上的套件，並支持代理和負載平衡器
由兩部分組成，包含 Server 端的 node.js 和 Client 端的 JavaScript
核心是 engine.io，透過 WebSocket 和 HTTP long-polling 方式實現伺服器和客戶端之間的連線

小結

這次同樣是工作上接手新專案，需要研究 WebSocket 相關技術，於是又把過去一些網路基礎知識給複習一遍，每次都對網路協議多了一層認識。

對自己而言算是比較陌生的領域，即使大概知道功用是什麼，實際操作起來又是另一回事，但學習新知識果然還是很快樂，期許自己能夠早日上手。

Reference

WebSocket 是什么原理？为什么可以实现持久连接？
HTML5 WebSocket
JavaScript | WebSocket 讓前後端沒有距離 - Medium
【筆記】Socket，Websocket，Socket.io的差異
[note] socket.io 筆記
用Socket.io 做一個即時聊天室吧！（直播筆記）