HTML5新特性怎么使用WebSocket实现实时双向通信-H5教程-PHP中文网

websocket通过http升级握手建立tcp上的持久双向通信，客户端用new websocket()连接并监听onopen/onmessage，服务端用ws库广播消息，需处理重连、心跳、鉴权等优化。

html5新特性怎么使用websocket实现实时双向通信

WebSocket 是 HTML5 提供的原生通信机制，核心价值在于打破 HTTP 的单向请求限制，实现客户端与服务器之间的实时、双向、长连接通信。它不是替代 HTTP，而是在首次握手时借助 HTTP 协议建立连接，之后切换为独立的 WebSocket 协议进行高效数据交换。

WebSocket 实现双向通信的关键步骤

客户端用 new WebSocket('ws://...') 发起连接，浏览器自动发送带 Upgrade: websocket 头的 HTTP 请求
服务端响应 HTTP 101 Switching Protocols，完成协议升级，连接保持打开状态
连接建立后，双方均可随时调用 .send() 主动发消息，也通过 onmessage 事件监听对方来信
不需要轮询、不依赖定时请求，消息到达即处理，延迟通常在毫秒级

前端如何写一个可工作的 WebSocket 客户端

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

  ws.onopen = () => {
    console.log('已连接到服务器');
    ws.send('Hello Server'); // 连接成功后可立即发送欢迎消息
  };

  ws.onmessage = (event) => {
    const msg = event.data;
    console.log('收到消息：', msg);
    // 比如追加到聊天区域
    document.getElementById('chat').innerHTML += `<div>${msg}`;
  };

  ws.onerror = (error) => {
    console.error('WebSocket 错误：', error);
  };

  ws.onclose = () => {
    console.log('连接已关闭');
  };

  // 页面卸载前主动关闭（可选）
  window.addEventListener('beforeunload', () => ws.close());
</script>

注意点：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

ws:// 用于开发环境，生产环境务必用 wss://（需 HTTPS + TLS）
浏览器原生支持，无需额外库；但建议封装重连逻辑（网络抖动时自动恢复）
event.data 可能是字符串、Blob 或 ArrayBuffer，通常服务端返回字符串，直接使用即可

后端怎么配合实现真正的双向推送

以 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) => {
    const message = data.toString();
    // 向所有其他在线用户广播（不含自己）
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`[用户${Date.now().toString(36)}]: ${message}`);
      }
    });
  });

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

这样就能做到：
✅ A 发消息 → 服务器接收 → 推送给 B、C、D
✅ B 离线 → 服务端触发 close → 可通知其他人“B 已离开”
✅ 任意时刻服务器都能主动向任一在线客户端发消息（比如系统通知、状态变更）