WebSocket 可实现浏览器与服务器全双工通信，通过 new WebSocket(‘ws://…’) 建立连接，onopen 触发后可用 send() 发送数据、onmessage 接收消息，支持 JSON 格式，close() 关闭连接并由 onclose 处理关闭事件，readyState 表示连接状态，生产环境推荐使用 wss、添加重连机制、控制消息频率、验证数据并及时清理连接。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，相比传统的 HTTP 轮询，它能实现真正的实时数据交互。在 JavaScript 中使用 WebSocket 可以轻松构建聊天应用、实时通知、在线协作工具等需要即时通信的功能。
创建 WebSocket 连接
要建立 WebSocket 连接，只需实例化一个 WebSocket 对象，并传入服务器的 ws 或 wss（加密）地址：
const socket = new WebSocket('ws://localhost:8080');socket.onopen = function(event) { console.log('连接已建立');};socket.onerror = function(error) { console.error('连接出错:', error);};
连接成功后会触发 onopen 事件，之后就可以收发数据了。
发送与接收消息
通过 send() 方法向服务器发送数据，通常为字符串或 JSON 格式：
立即学习“Java免费学习笔记（深入）”；
socket.send(JSON.stringify({ type: 'message', content: '你好，服务器！'}));
使用 onmessage 监听来自服务器的消息：
socket.onmessage = function(event) { const data = JSON.parse(event.data); console.log('收到消息:', data);};
event.data 是服务器发送的内容，可以是字符串、Blob 或 ArrayBuffer，常见的是字符串形式的 JSON 数据。
关闭连接与状态管理
可调用 close() 主动关闭连接：
socket.close();
通过 onclose 处理连接关闭事件：
socket.onclose = function(event) { if (event.wasClean) { console.log(`连接关闭，代码=${event.code} 原因=${event.reason}`); } else { console.warn('连接意外断开'); }};
可通过 socket.readyState 检查当前连接状态：
0: CONNECTING（连接中） 1: OPEN（已打开） 2: CLOSING（关闭中） 3: CLOSED（已关闭）
实际使用建议
在生产环境中使用 WebSocket 时需要注意几点：
使用 wss:// 提供加密传输，保障数据安全 添加重连机制，网络中断后自动尝试恢复连接 控制消息频率，避免频繁 send 导致性能问题 合理解析和验证收到的数据结构，防止异常 在组件卸载时关闭连接，防止内存泄漏（如 React 中的 useEffect cleanup）基本上就这些。WebSocket 让前端能与后端保持长连接，实现低延迟通信，掌握它的基本用法对开发实时功能非常有帮助。
以上就是JavaScript WebSocket实时通信的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535645.html
微信扫一扫 
支付宝扫一扫 
