JavaScript 中 WebSocket 怎么实现多人在线聊天室-js教程-PHP中文网

websocket多人聊天室核心是服务端广播消息与客户端实时收发，使用node.js+ws库维护连接列表并转发消息，前端用原生api实现收发与渲染，支持在线人数统计、昵称校验、多房间隔离及心跳保活。

javascript 中 websocket 怎么实现多人在线聊天室

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 + JavaScript，用原生 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 = `<b>[${data.user}]</b> ${data.content} <small>(${data.time})</small>`;
    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 示例片段：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

<input type="text" id="user-name" placeholder="昵称" value="小明"><input type="text" id="msg-input" placeholder="输入消息"><button onclick="sendMessage()">发送</button>
<div id="chat-log" style="height:300px; overflow-y:auto; border:1px solid #ccc;"></div>
<button onclick="connect()">重连</button>