在现代 Web 开发中，实时通信变得越来越重要。WebSocket 协议作为实现这一需求的关键技术，已经成为前端开发者必须掌握的技能之一。本文将带你深入了解 WebSocket 的基本概念、工作原理以及如何在实际项目中应用它。
WebSocket 简介
WebSocket 协议诞生于 2008 年，并在 2011 年成为国际标准。目前，所有主流浏览器都已支持 WebSocket，这使得它成为了实现服务器与客户端之间双向通信的首选技术。
WebSocket 的最大特点是它允许服务器主动向客户端推送信息，而客户端也可以主动向服务器发送信息。这种双向平等对话的能力，使得 WebSocket 成为了实现实时通信的理想选择。
WebSocket 服务器端实现
在 Node.js 环境中，我们可以使用 ws 库来轻松实现 WebSocket 服务器。以下是一个简单的服务器端实现示例：
// 初始化一个 node 项目 npm init -y
// 安装依赖 npm i -save ws
// 引入 WebSocket 库
var WebSocketServer = require('ws').Server;
// 创建 WebSocket 服务器实例，监听 8080 端口
var wss = new WebSocketServer({
port: 8080
});
// 创建一个数组来保存所有已连接的客户端
var clients = [];
// 监听连接事件
wss.on('connection', function (client) {
// 如果客户端是首次连接，将其添加到数组中
if (clients.indexOf(client) === -1) {
clients.push(client);
console.log("有" + clients.length + "客户端在线");
// 监听客户端发送的消息
client.on('message', function (msg) {
console.log(msg, typeof msg);
console.log('收到消息' + msg);
// 将消息广播给所有其他客户端
for (var c of clients) {
if (c !== client) {
c.send(msg.toString());
}
}
});
// 监听客户端断开连接事件
client.on('close', function () {
var index = clients.indexOf(client);
clients.splice(index, 1);
console.log("有" + clients.length + "客户端在线");
});
}
});
console.log("服务器已启动...");
在这个示例中，我们创建了一个监听 8080 端口的 WebSocket 服务器。每当有新的客户端连接时，服务器会将客户端实例保存到 clients 数组中。当客户端发送消息时，服务器会将该消息广播给所有其他客户端。当客户端断开连接时，服务器会从数组中移除该客户端。
WebSocket 客户端实现
在客户端，我们可以使用浏览器内置的 WebSocket 对象来建立与服务器的连接。以下是两个简单的客户端实现示例：
发送消息的客户端
<body>
<!-- 输入框和按钮用于发送消息 -->
<input type="text" id="msg">
<button id="send">发送</button>
<script>
// 建立到服务器的 WebSocket 连接
var ws = new WebSocket("ws://localhost:8080");
var send = document.getElementById('send');
var msg = document.getElementById('msg');
// 监听按钮点击事件，发送消息
send.onclick = function () {
if (msg.value.trim() != '') {
ws.send(msg.value.trim());
}
}
// 监听窗口卸载事件，关闭 WebSocket 连接
window.onbeforeunload = function () {
ws.close();
}
</script>
</body>
接收消息的客户端
<body>
<script>
// 建立到服务器的 WebSocket 连接
var ws = new WebSocket("ws://localhost:8080");
var count = 1;
// 监听连接打开事件
ws.onopen = function (event) {
// 监听消息事件，显示接收到的消息
ws.onmessage = function (event) {
var oP = document.createElement("p");
oP.innerHTML = `第${count}次接收到的消息：${event.data}`;
document.body.appendChild(oP);
count++;
}
}
// 监听窗口卸载事件，关闭 WebSocket 连接
window.onbeforeunload = function () {
ws.close();
}
</script>
</body>
在这两个客户端示例中，我们分别实现了发送消息和接收消息的功能。通过这些简单的示例，你可以看到 WebSocket 在实现实时通信方面的强大能力。
结论
WebSocket 协议为 Web 开发者提供了一种高效、实时的通信方式。通过本文的介绍，你应该对 WebSocket 有了更深入的理解，并能够将其应用到你的项目中。无论是构建聊天应用、实时数据更新系统，还是其他需要实时通信的场景，WebSocket 都是一个理想的选择。
