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

websocket多人聊天室核心是建立双向低延迟长连接，服务端用node.js+ws库管理连接与广播，前端用原生websocket api收发消息并渲染，需注意跨域、连接状态和部署配置。

javascript 中怎么用 websocket 实现多人在线聊天室的实时通信

用 WebSocket 实现多人在线聊天室，核心是建立浏览器与服务器之间的双向、低延迟长连接，让消息能即时广播给所有在线用户。关键不在于写多少 JS 代码，而在于理清客户端和服务端的协作逻辑：谁发、谁收、谁转发、谁管理连接。

服务端用 Node.js + ws 库搭建 WebSocket 服务器

前端不能自己“启动服务器”，必须依赖后端提供 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();
    const broadcastMsg = JSON.stringify({
      type: 'chat',
      content: msg,
      timestamp: new Date().toISOString()
    });

    // 广播给所有在线用户
    clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(broadcastMsg);
      }
    });
  });

  // 用户断开时清理
  ws.on('close', () => {
    clients.delete(ws);
    console.log('用户离开');
  });
});

前端用原生 WebSocket 连接并收发消息

浏览器中直接使用 new WebSocket(url)，注意处理连接状态、错误和消息解析：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

连接地址格式为 ws://localhost:8080（开发）或 wss://yourdomain.com（生产）
发送消息前务必检查 ws.readyState === WebSocket.OPEN
收到消息需 JSON.parse() 解析，再渲染到聊天界面

const ws = new WebSocket('ws://localhost:8080');

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

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'chat') {
    const msgEl = document.createElement('div');
    msgEl.textContent = `[${new Date(data.timestamp).toLocaleTimeString()}] ${data.content}`;
    document.getElementById('chat-log').appendChild(msgEl);
    document.getElementById('chat-log').scrollTop = document.getElementById('chat-log').scrollHeight;
  }
};

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

// 发送消息示例（绑定到发送按钮）
document.getElementById('send-btn').onclick = () => {
  const input = document.getElementById('msg-input');
  if (ws.readyState === WebSocket.OPEN && input.value.trim()) {
    ws.send(input.value.trim());
    input.value = '';
  }
};

基础功能扩展建议（不依赖第三方框架）

仅靠原生 WebSocket 就能实现可靠聊天室，以下增强点可逐步添加：

用户昵称：连接时发送 {type:'identify', name:'小明'}，服务端记录并附带在广播消息中
在线人数显示：服务端每次增减连接时，向全员推送 {type:'online-count', count:clients.size}
私聊支持：消息加 to: '小红' 字段，服务端只转发给指定用户（需维护用户名→socket 映射）
心跳保活：客户端每 30 秒发 ws.send('ping')，服务端响应 'pong'，超时未响应则关闭连接

部署与跨域注意事项

开发时常见问题基本都出在这里：

前端页面若用 file:// 打开，WebSocket 会因跨域被浏览器阻止 → 必须通过 http://（如 Live Server 插件）访问
服务端无需额外配置 CORS（WebSocket 协议本身不受同源策略限制），但确保客户端 URL 的协议、域名、端口与服务端完全一致
上线部署时，Nginx 需添加 WebSocket 支持（升级协议头）：

location / {
  proxy_pass http://localhost:8080;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南