WebSocket协议实现全双工通信，适用于实时场景；通过new WebSocket()建立连接，监听onopen、onmessage、onerror、onclose事件处理交互；支持发送JSON或二进制数据；需设置binaryType处理ArrayBuffer等格式；网络不稳定时应实现重连机制与心跳检测，确保连接可靠性。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端与服务器之间实时交换数据。相比传统的 HTTP 请求-响应模式，WebSocket 更适合需要低延迟、高频率交互的应用场景，比如聊天室、实时行情推送、在线协作工具等。在 JavaScript 中，使用 WebSocket API 非常直观和高效。
创建 WebSocket 连接
要建立一个 WebSocket 连接，只需实例化 WebSocket 对象，并传入服务器的 URL（以 ws:// 或加密的 wss:// 开头）：
const socket = new WebSocket('wss://example.com/socket');
连接建立后，会触发一系列事件，开发者通过监听这些事件来处理通信过程中的不同状态：
onopen：连接成功建立时触发 onmessage：收到服务器消息时触发 onerror：发生错误时触发 onclose：连接关闭时触发
示例代码：
立即学习“Java免费学习笔记（深入）”；
socket.onopen = function(event) { console.log('连接已建立'); socket.send('你好，服务器！');};socket.onmessage = function(event) { console.log('收到消息:', event.data);};socket.onerror = function(error) { console.error('连接出错:', error);};socket.onclose = function(event) { console.log('连接已关闭', event.code, event.reason);};
发送与接收数据
WebSocket 支持发送文本字符串和二进制数据（如 ArrayBuffer 或 Blob）。最常用的是发送 JSON 格式的数据：
// 发送 JSON 数据const message = { type: 'chat', content: 'Hello' };socket.send(JSON.stringify(message));// 接收并解析 JSONsocket.onmessage = function(event) { const data = JSON.parse(event.data); console.log(data.type + ': ' + data.content);};
如果服务器返回的是二进制数据（比如图像流或音频），可以设置 binaryType 属性来指定接收格式：
socket.binaryType = 'arraybuffer';socket.onmessage = function(event) { if (event.data instanceof ArrayBuffer) { const bytes = new Uint8Array(event.data); console.log('收到二进制数据:', bytes); }};
连接管理与重连机制
由于网络不稳定或服务端重启，WebSocket 可能意外断开。为了提升用户体验，建议实现自动重连逻辑：
let socket;let retryInterval = 1000;let maxRetries = 10;let retries = 0;function connect() { socket = new WebSocket('wss://example.com/socket'); socket.onopen = function() { console.log('连接成功'); retries = 0; // 重置重试次数 }; socket.onmessage = function(event) { console.log('消息:', event.data); }; socket.onclose = function() { if (retries < maxRetries) { retries++; console.log(`连接断开，${retryInterval}ms 后重试... (${retries}/${maxRetries})`); setTimeout(connect, retryInterval); retryInterval *= 2; // 指数退避 } else { console.error('重连失败次数过多，停止尝试'); } }; socket.onerror = function(error) { console.error('传输错误:', error); };}connect();
安全与最佳实践
使用 WebSocket 时需要注意以下几点：
生产环境应使用 wss://（WebSocket Secure），避免数据被窃听或篡改 对发送和接收的数据进行校验，防止注入攻击或非法格式 合理设置心跳机制（ping/pong），检测连接是否存活 避免频繁发送小数据包，可考虑合并或节流 在页面卸载前调用 socket.close() 主动关闭连接
例如，实现简单的心跳检测：
const pingInterval = setInterval(() => { if (socket.readyState === WebSocket.OPEN) { socket.send('ping'); }}, 30000); // 每30秒发一次// 页面关闭时清理window.addEventListener('beforeunload', () => { clearInterval(pingInterval); socket.close();});
基本上就这些。掌握 WebSocket 的基本用法和异常处理，就能构建出响应迅速、交互流畅的实时 Web 应用。不复杂但容易忽略的是连接状态管理和错误恢复策略，这些细节决定了系统的稳定性。
以上就是JavaScript WebSocket网络编程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530417.html
微信扫一扫 
支付宝扫一扫 
