WebSocket 多人聊天室的关键，其实就在两件事上：服务端负责把消息广播出去，客户端负责实时接收并展示。

实现上，通常用 Node.js 配合 ws 库来维护连接列表并完成消息转发；前端则直接基于原生 API 处理消息的收发和界面渲染。

同时，还会补齐几项常用能力，比如在线人数统计、昵称校验、多房间隔离，以及通过心跳机制维持连接存活。

要把 WebSocket 用在多人在线聊天室里，真正的关键就两件事：服务端负责广播消息，客户端负责实时收发。

重点并不在于每个用户各自“单独玩一套”，而是所有客户端都通过 WebSocket 接入同一个服务端，由服务端统一维护连接列表。

一旦收到某个用户发来的消息，再把这条消息转发给其他在线用户，或者直接广播给全体。

服务端实现思路

用 Node.js + ws 库快速搭建

推荐轻量库 ws。它比 Socket.IO 更底层、更贴近原生 WebSocket 协议，适合学习和可控场景。

• 安装：npm install ws
• 创建 server.js，监听连接、存储客户端、广播消息

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

const clients = new Set(); // 存储所有活跃连接

wss.on('connection', (ws, req) => {
console.log('新用户加入');
clients.add(ws);

// 收到消息时，解析并广播（除自己外）
ws.on('message', (data) => {
try {
const msg = JSON.parse(data);
const broadcastMsg = {
type: 'chat',
user: msg.user || '匿名',
content: msg.content || '',
time: new Date().toLocaleTimeString()
};

// 广播给所有其他用户
clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(broadcastMsg));
}
});
} catch (e) {
console.error('消息解析失败', e);
}
});

// 断开连接时清理
ws.on('close', () => {
console.log('用户离开');
clients.delete(ws);
});
});
console.log('聊天室服务运行在 ws://localhost:8080');


这段逻辑的核心很明确：


服务端维护所有活跃连接
收到消息后解析数据
将消息广播给其他在线用户
连接关闭时及时清理


客户端实现方式

建立连接 + 发送/接收消息

前端 HTML + Ja vaScript，用原生 WebSocket API 即可，无需额外库。


连接成功后，监听 message 事件渲染消息
发送前校验内容，用 JSON.stringify 格式化数据
处理连接关闭、错误等异常状态，提升体验



let socket;

function connect() {
socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
console.log('已连接到聊天室');
};

socket.onmessage = (event) => {
const data = JSON.parse(event.data);
const msgEl = document.createElement('div');
msgEl.innerHTML = `[${data.user}] ${data.content} (${data.time})`;
document.getElementById('chat-log').appendChild(msgEl);
document.getElementById('chat-log').scrollTop = 1e9; // 滚到底部
};

socket.onclose = () => {
console.log('连接已断开');
};

socket.onerror = (err) => {
console.error('WebSocket 错误:', err);
};
}

function sendMessage() {
const input = document.getElementById('msg-input');
const user = document.getElementById('user-name').value || '游客';
const content = input.value.trim();
if (!content) return;

socket.send(JSON.stringify({ user, content }));
input.value = '';
}


HTML 示例片段：




发送

重连


进阶能力扩展

支持在线人数、昵称唯一性、房间隔离

真实聊天室常需这些能力，可在服务端扩展：


在线人数：每次增删 clients 后，广播 { type: 'online', count: clients.size } 给所有人
昵称检查：连接时让客户端先发昵称，服务端查重；冲突则返回错误并关闭连接
多房间支持：给每个连接分配 room 属性（如 ws.room = '前端'），广播时只推给同房间的 client
心跳保活：客户端定时 socket.ping()（需服务端配合 ws.isAlive = true），断连自动重连


注意事项与避坑提示

WebSocket 聊天室看似简单，但这些细节很容易被忽略：


服务端必须检查 client.readyState === WebSocket.OPEN，否则调用 send() 会报错
客户端要防重复连接。比如用户频繁点击“连接”按钮，建议加连接状态锁
消息内容需转义或过滤 XSS（如 DOMPurify.sanitize()），避免恶意脚本执行
生产环境务必加 HTTPS + WSS，浏览器禁止非安全上下文使用 ws://
单机服务扛不住高并发，后续可接入 Redis + 多进程集群做消息中转


从 ws 库起步，先跑通连接、发消息、广播的闭环，再逐步补充功能，就能做出可用的多人聊天室。

      
        

          

            
《夸克》非常好用的免费AI浏览器
          
          

            下载APP查看