HTML5如何实现实时通信？

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《HTML4不支持WebSocket，HTML5如何实现实时通信？》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

HTML4不支持WebSocket，因其是HTML5特性；需现代浏览器（IE10+等）、WebSocket服务端及wss://协议；须手动实现心跳重连、降级方案，并注意二进制数据处理与资源清理。

HTML4 确实不支持 WebSocket

WebSocket 是 HTML5 规范的一部分，WebSocket 构造函数、onmessage、send() 等接口在 HTML4 时代根本不存在。HTML4 对应的浏览器（如 IE6–IE8）既没有实现该 API，也没有对应的底层 TCP 连接复用机制。强行在 HTML4 页面中写 new WebSocket("ws://...")，会在控制台直接报 ReferenceError: WebSocket is not defined。

HTML5 中 WebSocket 的基础用法

必须确保页面运行在支持 WebSocket 的现代浏览器中（Chrome 4+、Firefox 4+、Safari 5+、Edge 全版本、IE10+）。服务端需部署 WebSocket 服务器（如 Node.js 的 ws 库、Python 的 websockets），不能只靠传统 HTTP 服务器。

• ws:// 用于开发环境（非加密），wss:// 是生产必需（类比 http:// 和 https://）
• 连接建立前需监听 onopen，发送前确保 readyState === WebSocket.OPEN
• 服务端关闭连接时触发 onclose，此时不可再调用 send()，否则抛 InvalidStateError
• 二进制数据可传 Blob 或 ArrayBuffer，但默认接收为 DOMString；如需二进制，设 websocket.binaryType = "arraybuffer"

const ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = () => ws.send("hello");
ws.onmessage = (e) => console.log("收到:", e.data);
ws.onerror = (e) => console.error("连接异常", e);

WebSocket 不可用时的降级方案

不是所有环境都能用 WebSocket：老旧内网系统、某些企业防火墙会拦截 ws:// 升级请求、部分代理服务器不透传 Upgrade: websocket 头。这时候不能硬等，得有 fallback。

• 优先检测 "WebSocket" in window，再检查 window.WebSocket.CLOSING 是否存在（防 IE9 假阳性）
• 短轮询（setInterval + fetch）延迟高、浪费连接，仅适合低频状态同步
• 长轮询（XMLHttpRequest 保持 pending）更省资源，但服务端需支持挂起响应
• SSE（EventSource）是单向（服务端→客户端），且 IE 完全不支持，不能替代双向通信场景

真实项目里最容易被忽略的点

WebSocket 连接不是“连上就一劳永逸”。网络抖动、休眠唤醒、NAT 超时都会导致静默断连。浏览器不会自动重连，onclose 也不保证一定能触发（比如拔网线）。

• 必须手动实现心跳：定时 ws.send("ping")，服务端回 "pong"，超时未响应则 ws.close() 后重建
• 重连逻辑要加退避（如 1s → 2s → 4s），避免雪崩式请求打垮服务端
• message 事件回调里别写耗时同步逻辑，否则阻塞后续消息处理；复杂解析建议 postMessage 到 Web Worker
• 页面卸载前调用 ws.close()，否则可能残留连接句柄，尤其在 SPA 路由切换时

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~