Node.js WebSocket聊天室实战教程 专家推荐
WebSocket 是实现实时双向通信的关键技术,尤其在搭建聊天服务器时优势明显。从早期的 IRC 到如今的各类即时通讯工具,核心逻辑始终围绕实时消息传递展开。此前我们探讨过多种基于 Node.js 构建聊天服务的方式,今天专注于如何利用 WebSocket 协议,从零搭建一个可运行的双向通信聊天服务器。
选择 WebSocket 的原因在于其原生支持全双工通信,天然适配实时场景。Node.js 原生 API 未直接提供 WebSocket 实现,但社区中的第三方库如 ws(GitHub 仓库 websockets/ws)已成为标准选择。该库轻量、零依赖,仅需几行代码即可完成服务器初始化,非常适合快速原型开发或生产级部署。
安装只需一条命令:
npm install ws
创建 WebSocket 服务器极为简洁。以下示例监听 8080 端口:
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
服务器启动后,需要设计聊天室的核心功能。这里实现经典群聊模式:所有在线用户共享消息,新用户连接时自动以 IP 和端口组合作为临时昵称,便于识别参与者。
服务器端实现
明确需求后,代码编写自然顺畅。完整服务器端脚本如下:
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('open', function open() {
console.log('connected');
});
server.on('close', function close() {
console.log('disconnected');
});
server.on('connection', function connection(ws, req) {
const ip = req.connection.remoteAddress;
const port = req.connection.remotePort;
const clientName = ip + ':' + port;
console.log('%s is connected', clientName);
// 发送欢迎信息给客户端
ws.send("Welcome " + clientName);
ws.on('message', function incoming(message) {
console.log('received: %s from %s', message, clientName);
// 广播消息给所有客户端
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(clientName + " -> " + message);
}
});
});
});
核心逻辑清晰直接:收到客户端消息后,遍历所有已连接客户端,将消息附加发送者昵称后广播至全体。由此实现即时群聊。
客户端实现
客户端开发更为简便——现代浏览器原生支持 WebSocket API,无需额外库。只需 HTML 与 JavaScript 即可构建交互界面。
以下是客户端文件 client.html 的完整代码:
WebSocket Chat
<script type="text/ja vascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
socket = new WebSocket("ws://localhost:8080/ws");
socket.onmessage = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + '\n' + event.data;
};
socket.onopen = function (event) {
var ta = document.getElementById('responseText');
ta.value = "连接开启!";
};
socket.onclose = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + "连接被关闭";
};
} else {
alert("你的浏览器不支持 WebSocket!");
}
function send(message) {
if (!window.WebSocket) { return; }
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("连接没有开启.");
}
}
</script>
注意:客户端连接地址为 ws://localhost:8080/ws,实际运行时服务器未限定路径,因此直接连接 ws://localhost:8080 亦可正常工作。此处保留原始写法以便理解。
启动应用
先启动服务端:
node index.js
随后在浏览器中打开 client.html,即可看到聊天界面。
多开几个窗口即可模拟多用户同时在线聊天。任意用户发送的消息,其他窗口会立即显示。
纵观整个过程,核心步骤仅涉及创建服务器、处理连接、广播消息三个环节。WebSocket 使通信流畅自然,而 Node.js 的非阻塞 I/O 特性保障高并发下的稳定性能。在此基础上,可轻松扩展昵称自定义、消息持久化、私聊等高级功能。

