网站开发面试内容,交钱做网站对方拿了钱不做该怎么办,怎么提高网站访问量,网页设计与网站建设完全学习手册pdf文章目录 简介特点优缺点使用场景 用法封装断网重连心跳检测 注意 简介
WebSocket是一种用于在Web浏览器和服务器之间进行双向通信的协议。它提供了一种在单个TCP连接上进行持久化的全双工通信能力。WebSocket协议通过在HTTP握手阶段升级到WebSocket连接#xff0c;从而允许双… 文章目录 简介特点优缺点使用场景 用法封装断网重连心跳检测 注意 简介
WebSocket是一种用于在Web浏览器和服务器之间进行双向通信的协议。它提供了一种在单个TCP连接上进行持久化的全双工通信能力。WebSocket协议通过在HTTP握手阶段升级到WebSocket连接从而允许双方之间建立持久连接。一旦WebSocket连接建立服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。
Websocket 协议与 HTTP 协议没有关系它是一个建立在 TCP 协议上的全新协议为了兼容 HTTP 握手规范在握手阶段依然使用 HTTP 协议握手完成之后数据通过 TCP 通道进行传输。
Websoket 数据传输是通过 frame 形式一个消息可以分成几个片段传输。这样大数据可以分成一些小片段进行传输不用考虑由于数据量大导致标志位不够的情况。也可以边生成数据边传递消息提高传输效率。
特点 双向通信服务器和客户端可以通过发送消息进行实时双向通信。 持久连接WebSocket连接是持久的不需要在每次通信时重新建立连接。 低开销与传统的HTTP请求相比WebSocket通信的开销较低因为不需要频繁地建立和关闭连接。 低延迟由于协议是全双工的所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应延迟明显更少。 支持跨域WebSocket协议支持跨域通信可以在不同域名或端口之间进行通信。 减少数据传输由于WebSocket是基于消息的而不是基于请求/响应的因此可以减少不必要的数据传输从而提高传输效率。
优缺点
优点 双向通信。客户端和服务端双方 都可以主动发起通讯。 没有同源限制。客户端可以与任意服务端通信不存在跨域问题。 数据量轻。第一次连接时需要携带请求头后面数据通信都不需要带请求头减少了请求头的负荷。 传输效率高。因为只需要一次连接所以数据传输效率高。
缺点 长连接需要后端处理业务的代码更稳定推送消息相对复杂 兼容性WebSocket 只支持 IE10 及其以上版本。 服务器长期维护长连接需要一定的成本各个浏览器支持程度不一 【需要后端代码稳定受网络限制大兼容性差维护成本高生态圈小】
使用场景 协同编辑 场景描述WebSocket可用于实现多人协同编辑如在线文档协作、团队代码编辑等。实际应用多个用户可以同时编辑同一个文档或代码文件他们的编辑结果会实时地同步到其他用户的界面上。 . 实时监控 场景描述WebSocket适用于实时监控系统如监控设备的运行状态、实时监测交通流量等。实际应用服务器可以实时地将监控数据推送给客户端客户端可以及时地显示最新的监控信息。 . 实时聊天 场景描述WebSocket是即时通讯的理想选择如在线聊天室、多人游戏等。实际应用客户端和服务器可以实时地发送和接收消息无需频繁地发起HTTP请求。 . 实时数据更新 场景描述WebSocket能够实时推送数据更新如实时股票行情、实时天气预报等。实际应用服务器可以实时地将最新的数据推送给客户端客户端无需主动发起请求。 . 游戏开发 场景描述WebSocket在游戏开发中具有重要作用特别是在多人在线游戏中。实际应用 多人游戏协同允许多个客户端同时连接到服务器使多人协同游戏变得容易。实时聊天游戏内的实时聊天变得非常容易实现。服务器推送服务器可以主动推送消息给客户端降低了服务器和网络的负担。实时排行榜和统计游戏服务器可以实时更新排行榜和统计信息。游戏状态同步通过建立持久的WebSocket连接游戏服务器可以实时广播游戏状态的更新。 用法
在JavaScript中使用WebSocket相当直观。以下是一个基本的WebSocket客户端使用示例它演示了如何连接到WebSocket服务器、发送消息、接收消息以及处理连接关闭。
首先确保你的WebSocket服务器已经启动并在监听某个端口比如ws://localhost:8080。
// 创建一个新的WebSocket实例连接到指定的URL
var socket new WebSocket(ws://localhost:8080); // 连接打开事件
socket.onopen function(event) { console.log(WebSocket连接已打开); // 连接打开后可以发送消息 socket.send(Hello Server!);
}; // 接收消息事件
socket.onmessage function(event) { console.log(收到来自服务器的消息: event.data); // 处理接收到的消息 // 可以将event.data解析为JSON或其他格式 // let data JSON.parse(event.data);
}; // 错误事件
socket.onerror function(error) { console.error(WebSocket连接发生错误:, error); // 在这里处理错误情况
}; // 连接关闭事件
socket.onclose function(event) { if (event.wasClean) { console.log(WebSocket连接已正常关闭); } else { console.log(WebSocket连接发生异常关闭); } // 可以在这里尝试重新连接
}; // 发送消息的函数
function sendMessage(message) { if (socket.readyState WebSocket.OPEN) { socket.send(message); } else { console.log(WebSocket连接未打开消息未发送: message); }
} // 你可以在其他地方调用sendMessage函数来发送消息
// sendMessage(这是一条新的消息); // 当你不再需要WebSocket连接时可以手动关闭它
// socket.close();创建了一个新的WebSocket对象并指定了要连接的WebSocket服务器URL 为WebSocket对象添加了几个事件监听器以处理连接建立、接收到消息、发生错误和连接关闭等事件: onopen在连接建立时触发你可以在这个事件处理函数中发送初始消息 onmessage在接收到消息(来自服务器)时触发你可以在这个事件处理函数中处理接收到的消息 onerror在发生错误时触发 onclose在连接关闭时触发 sendMessage函数是一个简单的封装用于在WebSocket连接打开时发送消息。如果连接未打开它会打印一条消息到控制台。 最后调用 socket.close() 来手动关闭 WebSocket 连接。但通常当不再需要 WebSocket 连接时或者当服务器关闭连接时连接会自动关闭。 封装
封装一个支持断网重连、心跳检测功能并且兼容原生WebSocket写法的JavaScript WebSocket类
断网重连
WebSocket 断网重连Reconnect after Network Disconnection是指在 WebSocket 连接因为网络问题如网络不稳定、临时断网、服务器宕机等而断开后客户端能够自动检测到连接已断开并在网络恢复后尝试重新建立与服务器的 WebSocket 连接的过程。
在网络通信中由于各种不可控因素WebSocket 连接可能会意外断开。为了确保服务的连续性和可用性很多 WebSocket 客户端库或框架都会提供断网重连的功能。 连接状态监听客户端需要监听 WebSocket 的 onclose 事件该事件会在连接关闭时被触发。一旦接收到 onclose 事件客户端就知道连接已经断开。 重连策略在连接断开后客户端会根据预定义的重连策略来决定是否尝试重新连接。重连策略可以包括重连间隔、重连次数限制等。例如客户端可能会等待一段时间后再次尝试连接如果连接仍然失败它会继续等待更长的时间再次尝试直到达到最大重连次数或用户干预。 重连实现在决定重连后客户端会重新调用 WebSocket 的构造函数或相关方法以尝试与服务器建立新的 WebSocket 连接。如果连接成功客户端会恢复正常的通信。 心跳检测为了更准确地检测连接状态很多 WebSocket 客户端还会实现心跳检测机制。客户端定期向服务器发送心跳消息如果服务器在规定的时间内没有响应客户端就认为连接已经断开并开始执行重连逻辑。 日志和通知在重连过程中客户端可能会记录日志以便后续分析并在需要时向用户或开发者发送通知。
心跳检测
WebSocket 心跳Heartbeat是指为了在 WebSocket 连接中检测连接的活跃性和可用性而定期发送的简短消息。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议允许服务器主动向客户端推送信息客户端也可以主动向服务器发送信息。
由于网络环境的复杂性如网络不稳定、防火墙或代理服务器配置不当等原因WebSocket 连接有时可能会“假死”即连接仍然处于打开状态readyState 为 OPEN但实际上数据已经无法传输。在这种情况下如果没有任何数据在连接上传输双方都无法得知连接是否已经失效。
为了解决这个问题可以定期发送心跳消息来检测连接的活跃性。心跳消息通常是一个简短的数据包例如一个简单的字符串或数字。客户端和服务器都可以发送心跳消息但通常是由客户端发送因为服务器可以更容易地检测和管理多个连接。
当接收到心跳消息时接收方会重置其心跳定时器并知道连接仍然是活跃的。如果在指定的时间间隔内没有收到心跳消息接收方可以认为连接已经失效并采取相应的措施如关闭连接、尝试重新连接或通知用户。 发送频率心跳消息的发送频率应该根据具体的应用场景和网络环境来确定。过于频繁的心跳消息可能会增加网络负担而发送间隔过长则可能无法及时发现连接问题。 消息内容心跳消息的内容应该简短以减少网络带宽的占用。通常一个简单的字符串或数字就足够了。 处理接收到的消息当接收到心跳消息时接收方应该重置其心跳定时器并继续等待下一个心跳消息。如果接收到非心跳消息则应该根据应用的逻辑来处理。 重连机制如果心跳检测发现连接已经失效接收方应该尝试重新建立连接。重连的间隔和次数可以根据需要来配置。
// ReliableWebSocket 类封装了原生 WebSocket支持断网重连和自动心跳功能
class ReliableWebSocket { // 构造函数接收 WebSocket 服务器的 URL 和可选的配置选项 constructor(url, options {}) { this.url url; // WebSocket 服务器的 URL this.options options; // 可选配置选项 // 重连间隔时间默认为 5000 毫秒5 秒 this.reconnectInterval options.reconnectInterval || 5000; // 心跳间隔时间默认为 30000 毫秒30 秒 this.heartbeatInterval options.heartbeatInterval || 30000; // 心跳消息内容默认为 ping this.heartbeatMessage options.heartbeatMessage || ping; // WebSocket 实例 this.socket null; // 心跳定时器 this.heartbeatTimer null; // 初始化 WebSocket 连接 this.init(); } // 初始化 WebSocket 连接 init() { // 创建 WebSocket 实例 this.socket new WebSocket(this.url); // 当 WebSocket 连接打开时 this.socket.onopen (event) { // 开始发送心跳消息 this.startHeartbeat(); console.log(WebSocket 连接已打开); }; // 当接收到 WebSocket 消息时 this.socket.onmessage (event) { // 重置心跳定时器 this.resetHeartbeat(); console.log(收到消息:, event.data); }; // 当 WebSocket 连接关闭时 this.socket.onclose (event) { // 停止发送心跳消息 this.stopHeartbeat(); console.log(WebSocket 连接已关闭, event); // 尝试重新连接 this.reconnect(); }; // 当 WebSocket 连接发生错误时 this.socket.onerror (error) { console.error(WebSocket 连接发生错误:, error); }; } // 开始发送心跳消息 startHeartbeat() { // 设置定时器按照指定的间隔发送心跳消息 this.heartbeatTimer setInterval(() { if (this.socket.readyState WebSocket.OPEN) { this.socket.send(this.heartbeatMessage); } }, this.heartbeatInterval); } // 重置心跳定时器 resetHeartbeat() { // 清除旧的心跳定时器并重新开始 clearInterval(this.heartbeatTimer); this.startHeartbeat(); } // 停止发送心跳消息 stopHeartbeat() { // 清除心跳定时器 clearInterval(this.heartbeatTimer); } // 尝试重新连接 WebSocket reconnect() { // 设置定时器按照指定的间隔尝试重新连接 let intervalId setInterval(() { try { // 尝试重新初始化 WebSocket 连接 this.init(); // 如果连接成功则清除定时器 clearInterval(intervalId); } catch (e) { console.error(重连失败稍后重试..., e); } }, this.reconnectInterval); } // 发送消息到 WebSocket 服务器 send(data) { if (this.socket.readyState WebSocket.OPEN) { this.socket.send(data); } else { console.error(WebSocket 连接未打开无法发送消息); } } // 关闭 WebSocket 连接 close() { if (this.socket) { this.socket.close(); } } // ... 可以继续封装其他 WebSocket 原生方法如添加事件监听器等
} // 使用示例
const ws new ReliableWebSocket(ws://your-websocket-server-url);
ws.send(Hello, Server!); // 如果需要监听事件可以在 ReliableWebSocket 类中添加事件触发逻辑
// 例如使用 EventEmitter 或者发布订阅模式注意 WebSocket连接可以使用安全的WebSocket协议(wss://)进行保护它使用SSL/TLS添加了额外的加密层。这确保了在客户端和服务器之间传输的数据的机密性和完整性。 WebSocke t是一种基于TCP的协议支持长连接。在实际使用中需要注意及时维护长连接避免因连接长时间不活跃而被网络设备断开。为了确保长连接的稳定性可以定时发送心跳包以保持连接的活跃状态。 大多数现代Web浏览器都支持WebSocket协议包括Chrome、Firefox、Safari和Edge。然而需要考虑WebSocket在旧浏览器或支持有限的环境中的兼容性。在这种情况下可以使用回退机制。
