javascript的WebSocket是什么_如何实现实时双向通信？-js教程-PHP中文网

javascript的WebSocket是什么_如何实现实时双向通信？

夢幻星辰

发布： 2025-12-17 22:57:34

原创

782人浏览过

WebSocket是浏览器与服务器间持久化全双工通信通道，通过一次Upgrade握手复用TCP连接，以帧轻量传输数据，解决轮询延迟高、开销大等问题，适用于聊天、实时通知等场景。

javascript的websocket是什么_如何实现实时双向通信？

WebSocket 是浏览器与服务器之间建立的持久化、全双工通信通道，能真正实现客户端和服务器实时双向收发数据。它不像 HTTP 那样每次请求都要重新握手、带大量头部，而是通过一次升级（Upgrade）握手后，复用同一个 TCP 连接长期保持连接，后续数据以帧（frame）形式轻量传输。

为什么需要 WebSocket？

传统轮询（Polling）或长轮询（Long Polling）有明显缺陷：频繁建连开销大、延迟高、服务器压力大、无法真正“即时”响应。而 WebSocket 解决了这些——连接建立后，双方随时可主动发消息，适合聊天、协作编辑、实时通知、行情推送等场景。

如何创建并使用 WebSocket？

前端只需一行代码即可发起连接（注意协议是 ws:// 或安全的 wss://）：

const ws = new WebSocket('wss://example.com/chat');

登录后复制

之后监听关键事件：

立即学习“Java免费学习笔记（深入）”；

onopen：连接成功，可立即发送初始化消息
onmessage：收到服务器推送的数据（event.data 可能是字符串或 Blob）
onerror：发生网络或协议错误（注意：这里不触发重连，需手动处理）
onclose：连接关闭（可检查 event.code 和 event.reason 判断原因）

发送消息也很简单：ws.send('hello')，支持字符串、ArrayBuffer、Blob。

腾讯AI 开放平台

腾讯AI开放平台

381

查看详情

服务端怎么配合？

主流语言都有成熟 WebSocket 库。以 Node.js 的 ws 库为例：

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

wss.on('connection', (ws, req) => {
  console.log('新客户端已连接');
  
  ws.on('message', (data) => {
    console.log('收到：', data.toString());
    // 广播给所有其他客户端（不含自己）
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`广播：${data}`);
      }
    });
  });

  ws.on('close', () => console.log('客户端断开'));
});

登录后复制

关键点：