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/something'
const connection = new WebSocket(url)
connection是一個WebSocket對象。
在連接成功建立時，將觸發open事件。
通過將回調函數賦值給connection對象的onopen屬性來監聽它：
connection.onopen = () => {
//...
}
如果出現任何錯誤，將觸發onerror回調函數：
connection.onerror = (error) => {
console.log(`WebSocket error: ${error}`)
}
使用WebSockets將數據發送到服務器
一旦連接打開，您可以向服務器發送數據。
您可以在onopen回調函數內部輕松地這樣做：
connection.onopen = () => {
connection.send('hey')
}
使用WebSockets從服務器接收數據
通過在onmessage上設置回調函數來監聽message事件，當接收到該事件時將調用此函數：
connection.onmessage = (e) => {
console.log(e.data)
}
在Node.js中實現服務器
ws是Node.js的一個流行的WebSockets庫。
我們將使用它來構建一個WebSockets服務器。它也可以用於實現客戶端，並使用WebSockets在兩個後端服務之間進行通信。
使用npm安裝它：
npm init
npm install ws
您需要編寫的代碼非常少：
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的開發者工具可以做得比我展示的要多。在我用於測試的示例中，我只發送了一個字符串，但您可以以更有組織的方式檢查所有發送的數據：
請查看Mozilla Hacks上的這篇文章，以了解有關如何使用此工具的更多信息。
這是Chrome的屏幕截圖，希望它很快能改進其WebSockets調試工具：
