/

WebSockets介紹

WebSockets介紹

WebSockets是Web應用程序中HTTP通信的替代方案。它們提供了一個客戶端和服務器之間長期存在的、雙向的通信通道。讓我們來了解如何使用它們來進行網絡交互。

WebSockets是Web應用程序中HTTP通信的替代方案。

它們提供了一個客戶端和服務器之間長期存在的、雙向的通信通道。

一旦建立，該通道保持打開，提供了非常快速的連接和低延遲和開銷。

WebSockets的瀏覽器支持

WebSockets在所有現代瀏覽器中都得到支持。

WebSockets的瀏覽器支持

WebSockets和HTTP的區別

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

HTTP是一種請求/響應協議：當客戶端請求時，服務器返回一些數據。

而WebSockets這樣：

  • 服務器可以在客戶端不明確請求的情況下向客戶端發送消息
  • 客戶端和服務器可以同時交談
  • 傳送消息時只需交換非常少的數據開銷。這意味着低延遲通信。

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

HTTP非常適合偶爾的數據交換和客戶端發起的交互。

HTTP實現起來要簡單得多，而WebSockets則需要更多的開銷。

安全的WebSockets

請始終使用安全、加密的WebSockets協議，即wss://。

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

建立新的WebSockets連接

1
2
const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)

connection是一個WebSocket對象。

在連接成功建立時，將觸發open事件。

通過將回調函數賦值給connection對象的onopen屬性來監聽它：

1
2
3
connection.onopen = () => {
 //...
}

如果出現任何錯誤，將觸發onerror回調函數：

1
2
3
connection.onerror = (error) => {
 console.log(`WebSocket error: ${error}`)
}

使用WebSockets將數據發送到服務器

一旦連接打開，您可以向服務器發送數據。

您可以在onopen回調函數內部輕松地這樣做：

1
2
3
connection.onopen = () => {
 connection.send('hey')
}

使用WebSockets從服務器接收數據

通過在onmessage上設置回調函數來監聽message事件，當接收到該事件時將調用此函數：

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

在Node.js中實現服務器

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

我們將使用它來構建一個WebSockets服務器。它也可以用於實現客戶端，並使用WebSockets在兩個後端服務之間進行通信。

使用npm安裝它：

1
2
npm init
npm install ws

您需要編寫的代碼非常少：

1
2
3
4
5
6
7
8
9
10
const WebSocket = require('ws')

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

wss.on('connection', (ws) => {
 ws.on('message', (message) => {
 console.log(`Received message => ${message}`)
 })
 ws.send('ho!')
})

此代碼在8080端口（WebSockets的默認端口）上創建了一個新的服務器，並在建立連接時添加了一個回調函數，將ho!發送給客戶端並記錄接收到的消息。

在Glitch上查看實時示例

這是一個WebSockets服務器的實時示例：https://glitch.com/edit/#!/flavio-websockets-server-example

這是與服務器進行交互的WebSockets客戶端：https://glitch.com/edit/#!/flavio-websockets-client-example。

調試WebSockets

Chrome和Firefox都有一種方便的方式來可視化通過WebSockets傳送的所有信息。它們的開發者工具的支持一直在不斷改進。在撰寫本文時，Firefox具有最有用和詳細的調試工具。

在兩者中，您可以查看網絡面板並選擇WS以僅過濾WebSockets連接。

我使用Firefox（開發者版）拍攝了這些屏幕截圖：

Firefox標頭

Firefox詳細信息

Firefox的開發者工具可以做得比我展示的要多。在我用於測試的示例中，我只發送了一個字符串，但您可以以更有組織的方式檢查所有發送的數據：

Firefox中的數據

請查看Mozilla Hacks上的這篇文章，以了解有關如何使用此工具的更多信息。

這是Chrome的屏幕截圖，希望它很快能改進其WebSockets調試工具：

Chrome

tags: [“WebSockets”, “HTTP”, “network communication”, “real-time communication”]