JS 中怎么用 WebSocket 实现一个实时聊天室网页应用-js教程-PHP中文网

WebSocket实时聊天室核心是建立浏览器与服务器间的双向低延迟通信：服务端用Node.js+ws库管理连接与广播，客户端用原生API处理连接、收发与渲染，并需补充状态提示、回车发送、JSON消息格式及简易重连等体验优化。

js 中怎么用 websocket 实现一个实时聊天室网页应用

用 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