WebSocket是一种在单个TCP连接上实现全双工通信的协议,相比传统的HTTP轮询,它能大幅降低实时通信的延迟和资源消耗,非常适合聊天应用、实时数据推送、在线协作等场景。在Node.js环境中,我们可以借助成熟的第三方模块快速搭建稳定的WebSocket服务,下面将以常用的ws模块为例,完整讲解实现过程。

环境准备与依赖安装
首先确保本地已经安装了Node.js运行环境,然后新建一个项目目录,初始化项目并安装ws模块,ws是目前Node.js生态中最流行的WebSocket实现库,兼容性好且使用简单。
# 初始化项目 npm init -y # 安装ws模块 npm install ws
基础WebSocket服务端实现
安装完依赖后,我们可以编写最基础的WebSocket服务端代码,实现服务启动、客户端连接监听、消息收发等核心功能。
// 引入ws模块
const WebSocket = require('ws');
// 创建WebSocket服务,监听8080端口
const wss = new WebSocket.Server({ port: 8080 });
// 监听服务启动事件
wss.on('listening', () => {
console.log('WebSocket服务已启动,监听端口8080');
});
// 监听客户端连接事件
wss.on('connection', (ws, req) => {
const clientIp = req.socket.remoteAddress;
console.log(`新客户端连接,IP地址:${clientIp}`);
// 监听客户端发送的消息
ws.on('message', (data) => {
const message = data.toString();
console.log(`收到客户端消息:${message}`);
// 向当前客户端回复消息
ws.send(`服务端已收到你的消息:${message}`);
// 广播消息给所有连接的客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(`广播消息:${clientIp} 说:${message}`);
}
});
});
// 监听客户端断开连接事件
ws.on('close', () => {
console.log(`客户端断开连接,IP地址:${clientIp}`);
});
// 监听连接错误事件
ws.on('error', (err) => {
console.error(`客户端连接出错:${err.message}`);
});
});客户端连接测试
服务端启动后,我们可以编写简单的HTML客户端代码,测试WebSocket服务的连通性和消息收发功能,注意这里的HTML标签需要按照规则转义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>WebSocket客户端测试</title>
</head>
<body>
<div>
<input type="text" id="msgInput" placeholder="输入要发送的消息">
<button onclick="sendMessage()">发送消息</button>
</div>
<div id="msgList"></div>
<script>
// 创建WebSocket连接,地址为本地8080端口
const ws = new WebSocket('ws://127.0.0.1:8080');
// 监听连接成功事件
ws.onopen = () => {
console.log('WebSocket连接成功');
addMsg('系统提示:连接服务端成功');
};
// 监听收到消息事件
ws.onmessage = (event) => {
addMsg(`收到消息:${event.data}`);
};
// 监听连接关闭事件
ws.onclose = () => {
addMsg('系统提示:连接已关闭');
};
// 监听连接错误事件
ws.onerror = (err) => {
addMsg(`连接出错:${err.message}`);
};
// 发送消息的函数
function sendMessage() {
const input = document.getElementById('msgInput');
const msg = input.value.trim();
if (msg) {
ws.send(msg);
addMsg(`我发送:${msg}`);
input.value = '';
}
}
// 添加消息到页面的函数
function addMsg(text) {
const list = document.getElementById('msgList');
const p = document.createElement('p');
p.textContent = text;
list.appendChild(p);
}
</script>
</body>
</html>常见问题与优化建议
在实际使用中,我们还需要注意一些细节来提升服务的稳定性:
- 连接状态判断:发送消息前需要检查客户端的
readyState是否为WebSocket.OPEN,避免向已关闭的连接发送消息导致报错。 - 心跳检测:可以定时向客户端发送心跳包,检测连接是否存活,及时清理无效连接,减少资源占用。
- 消息格式规范:建议统一使用JSON格式传输消息,定义消息类型、发送者、内容等字段,方便后续扩展功能。
- 错误处理:除了连接错误,还要处理消息解析错误、发送失败等异常场景,避免服务崩溃。
消息格式优化示例
下面是使用JSON格式传输消息的优化示例,让消息结构更清晰:
// 服务端发送消息时封装为JSON格式
function sendJson(ws, type, data) {
if (ws.readyState === WebSocket.OPEN) {
const msg = JSON.stringify({
type: type,
data: data,
timestamp: Date.now()
});
ws.send(msg);
}
}
// 客户端发送消息时同样封装格式
function sendJsonMessage() {
const input = document.getElementById('msgInput');
const msg = input.value.trim();
if (msg) {
const wsMsg = JSON.stringify({
type: 'chat',
content: msg,
sender: 'web_client'
});
ws.send(wsMsg);
addMsg(`我发送:${msg}`);
input.value = '';
}
}通过以上步骤,我们就可以在Node.js环境下快速搭建一个功能完整的WebSocket服务,满足大部分实时通信场景的需求。如果需要更高的性能或者额外的功能,也可以根据项目需求对代码进行进一步扩展。