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

2022/12/23閱讀時間約 25 分鐘

1.1 What is WebSocket?

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

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

1.2 Why WebSocket?

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

1.3 How to use WebSocket?

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

ws://example.com/wsapi

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

ws://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 連線溝通那麼就開始吧！

1.3.1 Server 端：建置 WebSocket 環境

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

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

首先是安裝套件

$ 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：

$ node server.js

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

1.3.2 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 連結之後，就可以進行雙向溝通了！

1.3.3 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]')
 })

 // ...
})

1.3.4 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)
}

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

先前提到 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]')
}