南平企业网站建设,建网站做外贸,如何做网站安全扫描,wordpress文章调用文章目录 短轮询#xff08;Short Polling#xff09;长轮询#xff08;Long Polling#xff09;Comet “服务器推” #xff08;这玩意现在用的很少了#xff0c;了解一下即可#xff09;WebSocket原理#xff1a;方法#xff1a;事件#xff1a; SSE原理事件 总结 … 文章目录 短轮询Short Polling长轮询Long PollingComet “服务器推” 这玩意现在用的很少了了解一下即可WebSocket原理方法事件 SSE原理事件 总结 在日常的开发中我们经常能碰见服务端需要主动推送给客户端数据的业务场景比如数据大屏的实时数据、新闻数据、消息中心的未读消息聊天功能、股票走势、天气情况等等。 我们的方案大概就是轮询、WebSocket、SSE 短轮询Short Polling 客户端定期例如每几秒发送AJAX请求到服务器。服务器立即响应请求返回当前的数据状态。客户端处理响应然后再次发送请求。 1、可能会有大量的无效请求因为大多数请求可能返回相同的数据。 2、延迟与轮询间隔相关间隔越长延迟越大。 长轮询Long Polling 客户端发送AJAX请求到服务器。服务器挂起请求直到有新数据可发送或超时。服务器响应请求客户端处理数据然后立即发送新的请求。 1、服务器需要管理挂起的请求这可能会增加服务器的负载。 2、如果服务器延迟响应客户端可能会遇到超时问题。 Comet “服务器推” 这玩意现在用的很少了了解一下即可 基于 HTTP长连接的“服务器推”技术Comet是轮询的一种旨在实现更接近实时的服务器到客户端的数据推送 “服务器推”是一种很早就存在的技术以前在实现上主要是通过客户端的套接口或是服务器端的远程调用。在Comet出现之前大多数Web应用程序都依赖于客户端定期轮询服务器以获取更新例如通过AJAX。Comet技术允许服务器在有新数据时主动推送给客户端从而减少了不必要的轮询和延迟。 随着WebSocket等更先进的实时通信技术的出现Comet的使用已经逐渐减少。WebSocket提供了全双工通信且在现代浏览器中得到广泛支持因此成为了实现实时Web应用的更佳选择。然而在某些特定场景下Comet仍然有其应用价值尤其是在需要兼容旧版浏览器或特定网络环境的情况下。 Comet 应用的实现模型
长轮询Long PollingHTTP流HTTP Streamingiframe流iFrame StreamingFlash XMLSocketXHR multipart streaming
Comet应用的一般实现步骤
客户端初始化请求 客户端通过AJAX或其他技术发送请求到服务器。服务器挂起请求 服务器接收到请求后如果有新数据立即响应如果没有新数据服务器挂起请求。数据推送 当新数据到达时服务器将数据推送到客户端。客户端处理数据 客户端接收到数据后进行处理然后根据需要重新发起请求。服务器关闭连接 服务器在发送完数据后关闭连接等待下一个请求。
轮询缺点
资源消耗 服务器负载轮询要求服务器频繁地处理来自客户端的请求即使这些请求可能不包含任何实际的数据更新从而增加了服务器的负载。带宽浪费每个轮询请求都需要消耗网络带宽而大多数请求可能返回的是无用的数据即没有更新。 延迟 响应时间轮询间隔决定了客户端感知到服务器数据更新的最大延迟。如果轮询间隔设置得太长用户体验会受到影响如果设置得太短则会增加服务器和网络负担。 效率低下 无效请求轮询通常会导致大量的无效请求因为这些请求在大多数情况下不会携带新的数据。 用户体验 延迟和不流畅由于轮询间隔的存在用户可能会经历数据更新的延迟这在需要实时反馈的应用中尤其明显。资源占用频繁的轮询可能会导致客户端尤其是移动设备的CPU和电池资源消耗增加。 可扩展性 并发问题随着用户数量的增加轮询机制可能导致大量的并发请求这对服务器来说是一个扩展性问题。 实现复杂性 客户端逻辑客户端需要实现定时轮询的逻辑这增加了客户端代码的复杂性。错误处理轮询机制需要考虑网络错误、服务器错误等情况并实现相应的重试逻辑。 网络限制 防火墙和代理问题某些网络配置可能限制频繁的轮询请求这可能导致轮询机制在某些环境下不可用。 WebSocket WebSocket是一种在单个连接上进行全双工通信的协议。它允许服务器和客户端之间进行实时、双向的数据交换而无需重新建立连接。使用ws/wss。 原理
握手 WebSocket连接始于一个标准的HTTP请求这个请求通过特殊的HTTP头如Upgrade和Connection请求将连接升级到WebSocket协议。持久连接 一旦握手成功客户端和服务器之间的连接就会保持开放直到任意一方显式地关闭连接。数据帧 WebSocket使用帧来传输数据。每个帧代表一个消息的一部分可以是文本或二进制数据。多路复用 WebSocket连接可以同时发送和接收多个消息不需要为每个消息单独建立连接。
方法
WebSocket.close([code[, reason]])关闭当前链接。 该方法用于关闭 WebSocket 连接如果连接已经关闭则此方法不执行任何操作 WebSocket.send(data)对要传输的数据进行排队。 该方法将需要通过 WebSocket 链接传输至服务器的数据排入队列并根据所需要传输的数据的大小来增加 bufferedAmount 的值 。若数据无法传输比如数据需要缓存而缓冲区已满时套接字会自行关闭。
事件 使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性来监听下面的事件也可以直接使用onopen、onmessage、onerror、onclose close 当一个 WebSocket 连接被关闭时触发。 也可以通过 onclose 属性来设置。error 当一个 WebSocket 连接因错误而关闭时触发例如无法发送数据时。 也可以通过 onerror 属性来设置。message 当通过 WebSocket 收到数据时触发。 也可以通过 onmessage 属性来设置。open 当一个 WebSocket 连接成功时触发。 也可以通过 onopen 属性来设置。 addEventListener写法
// 创建WebSocket连接
const socket new WebSocket(ws://localhost:8080);// 打开连接时触发
socket.addEventListener(open, function (event) {console.log(Connection established);// 发送消息到服务器socket.send(Hello, Server!);
});// 接收服务器消息时触发
socket.addEventListener(message, function (event) {console.log(Message from server:, event.data);
});// 关闭连接时触发
socket.addEventListener(close, function (event) {console.log(Connection closed);if (event.wasClean) {console.log(Connection closed cleanly);} else {console.log(Connection died);}
});// 错误处理
socket.addEventListener(error, function (event) {console.error(WebSocket Error:, error);
});
或者使用
// 创建WebSocket连接
var socket new WebSocket(ws://example.com/socket);// 打开连接时触发
socket.onopen function(event) {console.log(Connection established);// 发送消息到服务器socket.send(Hello, Server!);
};// 接收服务器消息时触发
socket.onmessage function(event) {console.log(Message from server:, event.data);
};// 关闭连接时触发
socket.onclose function(event) {console.log(Connection closed);if (event.wasClean) {console.log(Connection closed cleanly);} else {console.log(Connection died);}
};// 错误处理
socket.onerror function(error) {console.error(WebSocket Error:, error);
};
WebSocket缺点
不支持跨域通信 默认情况下WebSocket遵循同源策略这意味着它不允许跨域通信。虽然可以通过CORS跨源资源共享或其他技术手段来实现跨域WebSocket连接但这增加了实现的复杂性。依赖于浏览器支持 虽然现代浏览器普遍支持WebSocket但在一些旧版浏览器中可能不支持。对于这些浏览器需要实现回退方案如长轮询或COMET。服务器负载 WebSocket连接是持久的这可能导致服务器需要管理大量的并发连接尤其是在高流量应用中这可能会增加服务器的负载。网络中间件问题 代理服务器、防火墙和其他网络中间件可能不支持WebSocket协议或者需要特殊配置才能正确处理WebSocket连接。资源消耗 持久的WebSocket连接可能会消耗更多的服务器资源如内存和带宽尤其是在客户端数量庞大时。错误处理和重连策略 WebSocket连接可能会由于网络问题、服务器故障等原因而断开。客户端需要实现错误处理和自动重连策略这增加了客户端代码的复杂性。安全性 WebSocket使用标准的HTTP握手但仍然需要考虑安全措施如使用wss://WebSocket Secure来确保数据传输的安全性。不当的配置可能会引入安全漏洞。消息可靠性 WebSocket协议本身不保证消息的可靠性。如果需要确保消息的可靠传输需要在应用层实现额外的机制如确认和重传机制。调试和监控 WebSocket的调试和监控通常比HTTP请求更复杂因为它们是持久的连接并且数据交换不是基于请求-响应模式的。部署和维护 相比于简单的HTTP服务WebSocket服务的部署和维护可能更为复杂尤其是在需要处理大量并发连接和高可用性要求的情况下。 SSE Server-Sent EventsSSE是一种服务器向客户端推送实时数据的机制它是HTML5的一部分用于实现服务器到客户端的单向通信。与WebSocket不同SSE仅支持服务器向客户端推送数据而不支持客户端向服务器推送数据。 原理
单向通信 SSE允许服务器向客户端推送数据但不支持客户端向服务器推送数据。持久连接 一旦建立连接服务器可以持续发送数据直到连接被关闭。基于HTTP SSE使用标准的HTTP协议这使得它能够更容易地通过现有的Web基础设施工作。自动重连 如果连接中断浏览器会尝试自动重新连接。
事件
onmessage事件处理器 当服务器发送消息时触发。event.data属性包含服务器发送的数据。onerror事件处理器 当与服务器的连接出现错误时触发。event.target.readyState属性可以用来判断连接的状态。onopen事件处理器 当与服务器的连接成功打开时触发。close()方法 关闭与服务器的连接。 // 创建EventSource实例连接到服务器的/events端点var eventSource new EventSource(/events);// 监听message事件eventSource.onmessage function(event) {var eventDiv document.getElementById(event);eventDiv.innerHTML event.data br;};// 监听error事件eventSource.onerror function(error) {console.error(EventSource failed:, error);};// 监听open事件eventSource.onopen function(event) {console.log(Connection established);};也可以使用addEventListener方式跟websocket的使用方法差不多。
缺点
单向通信SSE只支持服务器到客户端的单向通信。延迟SSE的延迟取决于服务器发送数据的频率。服务器资源消耗服务器需要持续运行以处理客户端的连接和数据推送。
总结
不管哪种方案都是有优点也有缺点但是实际开发中还是根据项目选择适合的方案。
短轮询适合一些简单的数据更新不需要实时交互的应用。例如新闻网站的实时更新。长轮询需要实时数据更新但不要求全双工通信的应用。例如在线聊天室、股票市场更新等。Comet “服务器推“ 使用场景很多现在逐渐被WebSocket替代但是在一些老版本的浏览器的兼容性还可以。WebSocket需要实时、全双工通信的应用。例如在线游戏、实时聊天、股票交易系统等。Server-Sent Events (SSE) 服务器需要主动向客户端推送数据的场景。例如实时通知、日志更新等。
