WebSocket实时聊天室核心是建立浏览器与服务器间的双向低延迟通信：服务端用Node.js+ws库管理连接与广播，客户端用原生API处理连接、收发与渲染，并需补充状态提示、回车发送、JSON消息格式及简易重连等体验优化。
用 WebSocket 实现一个实时聊天室，核心是建立浏览器与服务器之间的双向、低延迟通信通道。关键不在于写多少代码，而在于理清客户端和服务器两端的职责分工：客户端负责连接、发消息、收消息、渲染；服务端负责接受连接、广播消息、管理用户（可选）。下面分步说明实际开发中必须处理的要点。
一、服务端：用 Node.js + ws 库快速搭建 WebSocket 服务器
推荐轻量库 ws（比 Socket.IO 更贴近原生协议，适合学习和可控场景）：
- 安装：
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) => {
const msg = data.toString();
clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(msg);
}
});
});
// 断开连接时清理
ws.on('close', () => {
clients.delete(ws);
console.log('用户断开');
});
});
二、客户端：用原生 WebSocket API 连接并交互
HTML 页面只需基础结构（输入框、发送按钮、消息列表），JS 负责逻辑：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 使用
new WebSocket('ws://localhost:8080')建立连接 - 监听
open事件确认连接成功，再允许发送 - 监听
message事件接收服务器广播的消息，动态插入 DOM - 点击发送时，调用
ws.send()，并确保连接处于OPEN状态
示例关键 JS 片段：
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('已连接到聊天室');
};
ws.onmessage = (event) => {
const msg = event.data;
const li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
};
document.getElementById('sendBtn').onclick = () => {
const input = document.getElementById('msgInput');
if (ws.readyState === WebSocket.OPEN && input.value.trim()) {
ws.send(input.value.trim());
input.value = '';
}
};
三、增强体验：简单但必要的改进点
纯“发-播-收”只是骨架，加几处小改动就能明显提升可用性：
-
显示连接状态：在页面顶部加提示文字，根据
ws.readyState（0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED）实时更新 -
支持回车发送：监听输入框的
keypress，keyCode === 13 时触发发送 -
基础消息格式：不要只传纯文本。建议用 JSON，例如
{"user":"张三","text":"你好","time":"2024-05-20T10:30:00"}，方便后续扩展用户名、时间戳、头像等 -
自动重连（简易版）：监听
onclose或onerror，延时后尝试新建 WebSocket 实例重连（生产环境建议用指数退避）
四、注意事项与常见坑
WebSocket 不是 HTTP，很多习惯要调整：
- 跨域不是问题：WebSocket 协议本身不受同源策略限制（但服务端可校验 Origin 头做简单防护）
-
不能直接用 localhost 域名访问 HTTPS 页面：若网页是 https://xxx.com，WebSocket 地址必须是
wss://（需配 SSL 证书），否则浏览器会拒绝连接 -
消息是字符串或 ArrayBuffer：
ws.send()只接受字符串或二进制数据，传对象要先JSON.stringify() - 服务端不保存历史：WebSocket 连接断开即丢失上下文，如需消息持久化，必须额外接入数据库或 Redis
