WebSocket協議可以實現前后端全雙工通信，從而取代浪費資源的長輪詢。在此協議的基礎上，可以實現前后端數據、多端數據，真正的實時響應。在學習WebSocket的過程中，實現了一個簡化版群聊，過程和代碼詳細記錄在這篇文章中。
本篇文章來自董沅鑫的個人網站，引用、轉載請指明出處。
查看更多知識，或者技術交流：請訪問godbmw.com
1 概述
1.1 WebSocket 是什么？
- 建立在 TCP 協議之上的網絡通信協議
- 全雙工通信協議
- 沒有同源限制
- 可以發送文本、二進制數據等
1.2 為什么需要 WebSocket？
了解計算機網絡協議的人，應該都知道：HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理。
這種通信模型有一個弊端：HTTP 協議無法實現服務器主動向客戶端發起消息。
因此，如果在客戶端想實時監聽服務器變化，必須使用 ajax 來進行輪詢，效率低，浪費資源。
而 websocket 就可以使得前后端進行全雙工通信（兩方都可以向對方進行數據推送），是真正的平等對話。
2 WebSocket 客戶端
支持HTML5的瀏覽器支持 WebSocket 協議：
var ws = new WebSocket(url); // 創建一個websocket對象
2.1 WebSocket 屬性
| 屬性 | 描述 |
|---|---|
| ws.readyState | 只讀屬性 readyState 表示連接狀態，可以是以下值：0 - 表示連接尚未建立。1 - 表示連接已建立，可以進行通信。2 - 表示連接正在進行關閉。3 - 表示連接已經關閉或者連接不能打開。 |
| ws.bufferedAmount | 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數。 |
2.2 WebSocket 方法
| 屬性 | 描述 |
|---|---|
| ws.send() | 數據發送 |
| ws.close() | 關閉連接 |
2.3 Websocket 事件
| 屬性 | 描述 |
|---|---|
| open | 連接建立觸發 |
| message | 通信時觸發 |
| error | 出錯觸發 |
| close | 關閉連接觸發 |
2.4 代碼實現
假設我們在本地8080端口打開了websocket服務，那么，下面代碼可以在瀏覽器中實現和這個服務的通信：
<body>
<script>
var ws = new WebSocket("ws://localhost:8080/");
// 建立連接觸發
ws.onopen = function () {
ws.send("open ws");
console.log("open ws");
};
// 接收服務端數據觸發
ws.onmessage = function (evt) {
var data = evt.data;
console.log("Data is ", data);
};
// 斷開連接觸發
ws.onclose = function () {
console.log("close ws");
};
</script>
</body>
3 WebSocket 服務端
關於服務端實現，根據技術選型不同，可以選用不同的庫和包。我這里使用的是
node的ws庫來websocket服務端。
在阮一峰的博文提到的socket.io庫，在瀏覽器端的寫法不兼容原生API，准確來說，它們自己實現了一套websocket。所以，使用的時候前后端都應該引用第三方庫。這樣就造成了代碼遷移性，嚴重下降。
綜上所述，ws庫有以下優點：
- 兼容性好，兼容瀏覽器原生API
- 長期維護，效果穩定
- 使用方便（往下看就知道了）
4 實現群聊
4.1 群聊 服務端實現
首先，在命令行中，安裝ws庫: npm install ws --save
現在，利用ws來實現一個監聽8080端口的websocket服務器，講解都在代碼注釋里，一目了然：
const PORT = 8080; // 監聽端口
const WebSocket = require("ws"); // 引入 ws 庫
const wss = new WebSocket.Server({ port: PORT }); // 聲明wss對象
/**
* 向除了本身之外所有客戶端發送消息，實現群聊功能
* @param {*} data 要發送的數據
* @param {*} ws 客戶端連接對象
*/
wss.broadcastToElse = function broadcast(data, ws) {
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
};
/* 客戶端接入，觸發 connection */
wss.on("connection", function connection(ws, req) {
let ip = req.connection.remoteAddress; // 通過req對象可以獲得客戶端信息，比如：ip，headers等
/* 客戶端發送消息，觸發 message */
ws.on("message", function incoming(message) {
ws.send(message); // 向客戶端發送消息
wss.broadcastToElse(message, ws); // 向 其他的 客戶端發送消息，實現群聊效果
});
});
4.2 群聊 客戶端實現
為了方便編寫，這里引入了jquery和bootstrap這兩個庫，只需要關注js代碼即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>群聊</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<textarea class="form-control" rows="30" disabled="disabled" id="show-area"></textarea>
<input type="text" class="form-control" placeholder="請輸入聊天內容" id="chat-input">
<button type="button" class="btn btn-info" id="send-btn">發送</button>
</div>
<script>
var userName = parseInt(Math.random() * 1000, 10) // 隨機用戶名, 以標識身份
var sendBtn = $("#send-btn"), // 發送信息按鈕
chatInput = $("#chat-input"), // 聊天信息輸入框
showArea = $("#show-area") // 聊天信息展示框
var ws = new WebSocket("ws://localhost:8080/") // 初始化WebSocket對象
sendBtn.on("click", function () {
var content = chatInput.val()
if (content.length === 0) {
return alert("請不要輸入空白內容")
}
content = "At " + (new Date()).toString() + "\n" + "來自用戶" + userName + "\n" + content // 拼接用戶信息、時間信息和消息
ws.send(content) // 發送消息
chatInput.val("") // 清空輸入框
})
ws.onopen = function () { console.log("Conncet open") }
ws.onmessage = function (evt) {
var data = evt.data
showArea.val(showArea.val() + data + "\n\n") // 刷新聊天信息展示框：顯示群聊信息
}
ws.onclose = function () { console.log("Connect close") }
</script>
</body>
</html>
4.3 群聊 效果展示
首先啟動我們的服務端代碼：node server.js 。其中，server.js是放置服務端代碼的文件。
然后，我們打開2次編寫的html代碼，這相當於，打開2個客戶端。來檢測群聊功能。
5. 相關資料
- 概念解釋：
ws文檔：https://www.npmjs.com/package/ws
本篇文章來自董沅鑫的個人網站，引用、轉載請指明出處。
查看更多知識，或者技術交流：請訪問godbmw