J*ascript中的WebSocket如何工作？

WebSocket通过HTTP升级握手建立持久全双工连接：客户端发含Upgrade、Sec-WebSocket-Key的请求，服务器返回101状态及Sec-WebSocket-Accept校验；连接后通过onopen/onmessage/onclose/onerror事件收发数据，以帧而非HTTP报文传输，支持文本、二进制、Ping/Pong；需用wss://加密，服务器需校验Origin，原生无自动重连。

WebSocket 在 J*aScript 中通过一次 HTTP 握手建立持久、全双工的 TCP 连接，之后客户端和服务器可随时互发数据，无需重复请求。

握手阶段：用 HTTP 升级协议

浏览器发起一个带特殊头的 HTTP 请求：

• Upgrade: websocket 和 Connection: Upgrade 表明想切换协议
• Sec-WebSocket-Key 是客户端生成的随机 Base64 字符串，用于防伪造
• 服务器验证后，返回 HTTP 101 Switching Protocols 状态码
• 响应头含 Sec-WebSocket-Accept —— 由客户端密钥经固定算法计算得出，供客户端校验

握手成功，连接就脱离 HTTP，进入 WebSocket 帧通信模式。

连接建立后：监听事件收发消息

JS 使用 WebSocket 构造函数创建实例，并绑定关键事件：

名品购物网店系统

适合品牌专卖店专用，从前台的美工设计就开始强调视觉形象，有助于提升商品的档次，打造网店品牌!后台及程序核心比较简洁，着重在线购物，去掉了繁琐的代码及垃圾程式，在结构上更适合一些中高档的时尚品牌商品展示. 率先引入语言包机制，可在1小时内制作出任何语言版本，程序所有应用文字皆引自LANG目录下的语言包文件，独特的套图更换功能，三级物品分类，购物车帖心设计，在国内率先将购物车与商品显示页面完美结合，完

0 查看详情

• onopen：连接就绪，可立即调用 socket.send() 发送首条消息
• onmessage：收到数据时触发，event.data 是字符串或 ArrayBuffer
• onclose：连接关闭（可能是主动断开或网络中断），event.code 和 event.reason 可辅助诊断
• onerror：发生不可恢复错误（如 URL 无效、跨域被拒、TLS 握手失败）时触发

数据传输：帧结构与双向自由通信

所有数据都封装成 WebSocket 帧传输，不是 HTTP 报文：

• 文本消息自动按 UTF-8 编码，二进制数据需用 ArrayBuffer 或 Blob
• 支持 Ping/Pong 控制帧 维持连接活跃，防止中间代理超时断连
• 客户端和服务器地位对等，都能主动发消息，不依赖“请求-响应”流程
• 连接期间无请求开销，延迟低、带宽省，适合高频小数据（如聊天、行情、协作编辑）

连接管理：安全、跨域与稳定性

实际使用中需注意几个关键点：

• wss:// 对应 HTTPS，强制加密；ws:// 仅限开发或内网环境
• WebSocket 不受浏览器同源策略限制，但服务器必须显式允许来源（如检查 Origin 头）
• 原生 API 不自带重连，需手动实现：监听 onclose 后延时重建 new WebSocket(url)
• 发送前建议检查 socket.readyState === WebSocket.OPEN，避免报错

基本上就这些。

以上就是J*ascript中的WebSocket如何工作？的详细内容，更多请关注其它相关文章！