WebSockets 是 Web 應用程式中 HTTP 通訊的替代方案。它們提供了一個長期存在的、雙向的客戶端和伺服器之間的通訊通道。

WebSockets 是 Web 應用程式中 HTTP 通訊的替代方案。 它們提供了一個長期存在的、雙向的客戶端和伺服器之間的通訊通道。 一旦建立，通道保持開啟，提供非常快速的連線速度和低延遲。

支援 WebSockets 的瀏覽器

所有現代瀏覽器都支援 WebSockets。

WebSockets 與 HTTP 的區別

HTTP 是一個非常不同的協議，也是一種不同的溝通方式。

HTTP 是一種請求/回應協議：當客戶端發出請求時，伺服器回傳一些資料。

而 WebSockets：

  • 伺服器可以在未經客戶端明確請求的情況下傳送訊息給客戶端
  • 客戶端和伺服器可以同時彼此對話
  • 傳送訊息時需要交換的資料量非常少。這意味著通訊延遲低。

WebSockets 非常適合實時和長期存在的通訊。

HTTP 非常適合偶爾的資料交換和由客戶端啟動的互動。

HTTP 的實作要簡單得多，而 WebSockets 需要更多的開銷。

安全的 WebSockets

請總是使用安全、加密的 WebSockets 協議 wss://。

ws:// 是不安全的 WebSockets 版本（WebSockets 的 http://），出於明顯的原因應該避免使用。

建立新的 WebSockets 連線

const url = 'wss://myserver.com/somet hing'
const connection = new WebSocket(url)

connection 是一個 WebSocket 物件。

當連線建立成功時，將觸發 open 事件。

通過將回調函式分配給 connection 物件的 onopen 屬性，來監聽此事件：

connection.onopen = () => {
  //...
}

若出現任何錯誤，將觸發 onerror 函式回調：

connection.onerror = error => {
  console.log(`WebSocket 錯誤：${error}`)
}

使用 WebSockets 將資料發送給伺服器

連線建立後，你可以向伺服器發送資料。

你可以在 onopen 回調函式中方便地這樣做：

connection.onopen = () => {
    connection.send('嗨')
}

使用 WebSockets 從伺服器接收資料

使用回調函式在 onmessage 上監聽，當收到 message 事件時會調用：

connection.onmessage = e => {
    console.log(e.data)
}

在 Node.js 中實作 WebSockets 伺服器

ws 是一個流行的 Node.js WebSockets 庫。

我們將使用它來建立一個 WebSockets 伺服器。它還可以用於實作客戶端，並使用 WebSockets 在兩個後端服務之間進行通訊。

輕鬆安裝它：

yarn init
yarn add ws

你只需要寫很少的程式碼：

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', ws => {
    ws.on('message', message => {
        console.log(`收到訊息 => ${message}`)
  })
    ws.send('嘿！')
})

此程式碼在 8080 埠（WebSockets 的預設埠）上建立了一個新的伺服器，當建立連線時，它會向客戶端發送 嘿！，並記錄所接收到的訊息。

在 Glitch 上查看實時範例

以下是一個 WebSockets 伺服器的實時範例：https://glitch.com/edit/#!/flavio-websockets-server-example

以下是與伺服器互動的 WebSockets 客戶端的範例：https://glitch.com/edit/#!/flavio-websockets-client-example