WebSocket是基于TCP的全双工通信协议,支持浏览器与服务器持续连接、双向实时收发数据;通过new WebSocket()创建实例,监听onopen/onmessage/onerror/onclose事件,调用send()发送消息,需手动实现重连与错误处理。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它让浏览器和服务器之间可以**持续保持连接、双向实时收发数据**,彻底摆脱了传统 HTTP 请求-响应模式的延迟和开销。在 JavaScript 中实现 WebSocket 实时通信,核心就是使用原生 WebSocket 构造函数建立连接,并通过事件监听与方法调用来收发消息。
WebSocket 的基本连接与生命周期
创建一个 WebSocket 实例非常简单,只需传入服务端提供的 ws:// 或 wss:// 地址:
const socket = new WebSocket('wss://example.com/chat');
连接过程有明确的状态变化,关键事件包括:
立即学习“Java免费学习笔记(深入)”;
- onopen:连接成功建立,此时可开始发送数据
-
onmessage:收到服务器推送的消息,
event.data即为内容(可能是字符串或 Blob) - onerror:发生网络或协议错误(注意:它不表示连接断开)
-
onclose:连接被关闭(正常或异常),可检查
event.code和event.reason判断原因
发送与接收消息的实用写法
发送数据用 socket.send(),只接受字符串、ArrayBuffer、Blob 或 ArrayBufferView:
socket.send(JSON.stringify({ type: 'chat', text: 'Hello!' }));
思乐微信商城微分销系统是以.net+access/mssql进行开发的微信分销系统。基于微信朋友圈的传播,是打造以分销商为中心的全新微信分销体验。让粉丝实时有效的获取朋友圈流量并快速分享购买分佣。因为是基于微信,所以要在微信上体验才更好。关注我们的微信核心功能:1、自动提示用户关注微信,解决一般程序无关注微信公众号的过程2、只要通过链接进一次,不过好久注册,什么方面注册,只要是用微信注册的,都会算
接收时建议统一解析 JSON(如果后端发的是 JSON 字符串):
socket.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
console.log('收到:', data);
} catch (e) {
console.warn('非JSON消息:', event.data);
}
};
连接管理与自动重连策略
WebSocket 不会自动重连,断线后需手动处理。常见做法是封装一个带重试机制的连接器:
- 监听
onclose,延迟几秒后尝试重建连接(避免密集重连) - 记录重连次数,超过阈值后暂停或提示用户
- 连接成功后清空重试计数,并可发送身份认证消息(如 token)
- 页面卸载前调用
socket.close(),减少无效连接
注意事项与常见问题
WebSocket 虽强大,但使用中要注意:
- 服务端必须支持 WebSocket 协议(如 Node.js 可用
ws库,Java 可用 Spring WebSocket) - 浏览器兼容性良好(Chrome 16+、Firefox 11+、Safari 7+ 等均支持)
- 不能直接用 HTTP 地址(
http://),必须是ws://(开发)或wss://(生产) - 跨域由服务端控制(通过
Origin头校验),不是前端能绕过的 - 大量小消息可考虑合并或启用压缩(需服务端配合)
基本上就这些。WebSocket 在聊天、协同编辑、实时通知等场景中表现优异,只要前后端约定好数据格式和心跳机制,就能稳定支撑高实时性需求。










