HTML5WebSocket怎么实现实时通信_连接发送接收消息步骤【教程】-html教程-PHP中文网

WebSocket需服务端支持，前端仅发起连接；必须监听open/message/error/close事件，发送前检查readyState，二进制数据需设置binaryType，调试须用网络面板验证帧。

html5websocket怎么实现实时通信_连接发送接收消息步骤【教程】

HTML5 的 WebSocket 不是“教程式配置”，而是客户端主动发起连接、服务端必须配套支持的双向通信机制。没有服务端（比如 Node.js 的 ws 库、Python 的 websockets、或 Nginx 反向代理配置），只写前端代码永远连不上。

WebSocket 连接前必须确认服务端已就绪

浏览器里直接 new WebSocket('ws://localhost:8080') 会立刻报错 WebSocket connection to 'ws://...' failed，这不是前端写错了，而是：服务端没运行、地址/端口不对、协议不匹配（ws:// vs wss://）、或被跨域/CORS 拦截（注意：WebSocket 不走 HTTP CORS，但服务端仍需显式允许来源）。

本地测试推荐用 npx wscat -l 8080（安装 wscat 后）快速起一个调试服务端
生产环境必须用 wss://，且证书有效；用 ws:// 在 HTTPS 页面中会被浏览器直接阻止
若服务端在内网或 Docker 中，确保端口已暴露、防火墙放行、客户端能 ping 通

创建实例后要监听 open/message/error/close 四个关键事件

WebSocket 是事件驱动的，不监听 open 就发消息，大概率触发 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state；不处理 error 或 close，连接异常时页面就静默断连了。

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

ws.addEventListener('open', () => {
  console.log('已连接');
  ws.send(JSON.stringify({ type: 'auth', token: 'xxx' }));
});

ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('收到:', data);
});

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

ws.addEventListener('close', (event) => {
  console.log('连接关闭', event.code, event.reason);
});

发送消息前务必检查 `ws.readyState`

即使监听了 open，在复杂交互中（比如重连逻辑、快速开关）仍可能因时序问题导致 send() 调用时状态不是 WebSocket.OPEN（值为 1）。硬编码发消息不加判断，就会报错。

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载