WebSocket 是一种基于单个 TCP 连接的全双工通信协议,支持浏览器与服务器实时双向交互;其特点包括一次握手、低延迟、帧传输、原生心跳与重连机制,前端通过 new WebSocket() 创建并监听 onopen/onmessage/onclose/onerror 事件实现通信。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它让浏览器和服务器之间可以持续保持连接,实现真正的实时双向数据交换。相比传统 HTTP 的“请求-响应”模式,WebSocket 只需一次握手建立连接,之后双方可随时主动发送消息,延迟低、开销小,特别适合聊天、实时通知、协同编辑、行情推送等场景。
WebSocket 的核心特点
• 连接建立后,客户端和服务端都能主动发消息(全双工)
• 复用一个长连接,避免频繁 HTTP 请求的握手开销
• 数据以帧(frame)为单位传输,支持文本(UTF-8)和二进制格式
• 原生支持心跳、错误重连、关闭流程等机制
• 浏览器中通过 new WebSocket(url) 即可创建,无需额外库
JavaScript 中创建和使用 WebSocket
基本用法非常简洁,关键在于监听几个核心事件:
• onopen:连接成功建立时触发,可在此发送首次消息
• onmessage:收到服务器消息时触发,event.data 是内容(字符串或 Blob)
• onerror:发生网络或协议错误时触发(不表示断连)
• onclose:连接关闭时触发,可通过 event.code 和 event.reason 查看原因
发送消息只需调用 ws.send(data),data 可以是字符串、ArrayBuffer 或 Blob。
一个最小可用示例
注意:需确保后端已运行 WebSocket 服务(如 ws://localhost:8080)
思乐微信商城微分销系统是以.net+access/mssql进行开发的微信分销系统。基于微信朋友圈的传播,是打造以分销商为中心的全新微信分销体验。让粉丝实时有效的获取朋友圈流量并快速分享购买分佣。因为是基于微信,所以要在微信上体验才更好。关注我们的微信核心功能:1、自动提示用户关注微信,解决一般程序无关注微信公众号的过程2、只要通过链接进一次,不过好久注册,什么方面注册,只要是用微信注册的,都会算
立即学习“Java免费学习笔记(深入)”;
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('已连接');
ws.send('Hello Server');
};
ws.onmessage = (event) => {
console.log('收到:', event.data); // 可能是字符串或 ArrayBuffer
};
ws.onclose = (event) => {
console.log('连接关闭,代码:', event.code, '原因:', event.reason);
};
ws.onerror = (error) => {
console.error('WebSocket 错误:', error);
};
实用建议与常见注意事项
• 连接地址必须是 ws://(开发)或 wss://(生产,类比 https),不能用 http://
• 页面卸载前建议手动调用 ws.close(),避免资源泄漏
• 网络不稳定时连接可能意外断开,应实现自动重连逻辑(如指数退避)
• 接收二进制数据时,设置 ws.binaryType = 'arraybuffer' 更易处理
• 不要直接在 onmessage 中执行耗时操作,必要时用 requestIdleCallback 或 Web Worker 分流
基本上就这些。WebSocket API 本身很轻量,难点通常在服务端实现、连接状态管理、消息协议设计和异常容错上。前端只要理解好生命周期和事件流,就能稳稳撑起实时交互。










