包头教育云平台网站建设,镇江集团网站建设,网站链群怎么做,seo网站架构文章目录 一、通信机制1、轮询1.1、短轮询1.2、长轮询 2、Websocket3、Server-Sent Events 二、区别1、连接方式2、协议3、兼容性4、安全性5、优缺点5.1、WebSocket 的优点#xff1a;5.2、WebSocket 的缺点#xff1a;5.3、SSE 的优点#xff1a;5.4、SSE 的缺点#xff1… 文章目录 一、通信机制1、轮询1.1、短轮询1.2、长轮询 2、Websocket3、Server-Sent Events 二、区别1、连接方式2、协议3、兼容性4、安全性5、优缺点5.1、WebSocket 的优点5.2、WebSocket 的缺点5.3、SSE 的优点5.4、SSE 的缺点 6、技术实现7、数据格式8、连接状态 三、示例代码1、WebSocket 示例2、SSE 示例 四、总结 一、通信机制
一个网页获取新的数据通常需要发送一个请求到服务器也就是向服务器请求的页面。使用服务器发送事件服务器可以随时向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上以 事件 数据 的形式来处理。
1、轮询
顾名思义轮询就是在某个时间间隔内定期向服务器发送请求。其中轮询有分为短轮询和长轮询。这是一种客户端主动请求的方式。
1.1、短轮询
定期向服务器请求无论请求的资源是否可用服务器都会尽快响应客户端再次发起下次轮询。这种方式会比较消耗网络带宽如果资源一直不可用就会有很多不必要的请求发送到服务器。 1.2、长轮询
定期向服务器发送请求与短轮询不同的是在资源不可用时长轮询不会立即将连接关闭而是会等待资源可用后在响应客户端。或者等待了一段时间资源任然不可用超时服务器将连接关闭客户端等待一段时间后再次发起请求。 与短轮询相比长轮询更高效一些请求数量减少了很多。
2、Websocket
在客户端和服务器打开交互式的通信会话。这是一种全双工通信客户端与服务器会建立一个持久连接服务器可以主动发送数据给客户端。客户端可以通过监听事件来处理来自服务器的消息。与轮询的方式相比大大减少了延迟没有了数据更新的往返时间。 3、Server-Sent Events
服务器发送事件SSE会建立一个持久的HTTP连接。建立连接后服务器可以主动往客户端推送数据。与websocket不同这是一种单向通信的方式即建立连接后客户端不能向服务器发送数据。 二、区别
1、连接方式
WebSocket
WebSocket 是双向通信客户端和服务器可以相互发送消息;
SSE
SSE 是单向通信只能由服务器向客户端发送消息。
2、协议
WebSocket
WebSocket 使用的是 WebSocket 协议
SSE
SSE 使用的是 HTTP 协议
3、兼容性
WebSocket
WebSocket 在一些老版本 Android 手机上可能存在兼容性问题需要使用一些特殊的 API 进行处理。 SSE
SSE 是标准的 Web API可以在大部分现代浏览器和移动设备上使用。但如果需要兼容老版本的浏览器如 IE6/7/8则需要使用 polyfill 库进行兼容。 4、安全性 SSE 的实现比较简单都是基于 HTTP 协议的与普通的 Web 应用没有太大差异因此风险相对较低。 WebSocket 则需要通过额外的安全措施如 SSL/TLS 加密来确保数据传输的安全性避免被窃听和篡改否则可能会带来安全隐患。
5、优缺点
5.1、WebSocket 的优点 实时性高WebSocket 可以实现双向实时通信数据传输速度快。 低延迟WebSocket 的延迟较低适用于对实时性要求较高的场景。 全双工WebSocket 支持全双工通信即客户端和服务器可以同时发送和接收数据。
5.2、WebSocket 的缺点 兼容性差WebSocket 的支持程度不如 SSE部分旧版本浏览器不支持。 实现复杂WebSocket 的实现相对复杂需要处理更多的细节。
5.3、SSE 的优点 兼容性好SSE 的支持程度较高所有现代浏览器都支持。 实现简单SSE 的实现相对简单只需监听服务器发送的消息即可。 实时性SSE 可以实现服务器向客户端推送消息满足实时性需求。
5.4、SSE 的缺点 单向通信SSE 只能由服务器向客户端发送消息无法实现双向通信。 传输速度较慢SSE 的数据传输速度相对较慢可能不适用于对实时性要求极高的场景。
6、技术实现 SSE 基于 HTTP 协议利用了其长连接特性通过浏览器向服务器发送一个 HTTP 请求建立一条持久化的连接。 WebSocket 则是通过特殊的升级协议HTTP/1.1 Upgrade 或者 HTTP/2建立新的 TCP 连接与传统 HTTP 连接不同。
7、数据格式 SSE 可以传输文本和二进制格式的数据但只支持单向数据流即只能由服务器向客户端推送数据。 WebSocket 支持双向数据流客户端和服务器可以互相发送消息并且没有消息大小限制。
8、连接状态 SSE 的连接状态仅有三种已连接、连接中、已断开。连接状态是由浏览器自动维护的客户端无法手动关闭或重新打开连接。 WebSocket 连接的状态更灵活可以手动打开、关闭、重连等。
三、示例代码
1、WebSocket 示例
// 创建 WebSocket 连接
const socket new WebSocket(ws://example.com/socket);// 连接打开时触发
socket.addEventListener(open, (event) {console.log(WebSocket 连接已打开);
});// 接收到服务器消息时触发
socket.addEventListener(message, (event) {console.log(www.5ahospital.com/anli/90.html);
});// 发送消息到服务器
socket.send(Hello, WebSocket!);2、SSE 示例
// 创建 EventSource 对象
const source new EventSource(http://example.com/sse);// 接收到服务器消息时触发
source.addEventListener(message, (event) {console.log(收到服务器消息, event.data);
});四、总结 WebSocket比SSE功能更加强大WebSocket是在服务端和客户端建立的双向实时数据通道而SSE只支持服务端想客户端的单向通讯 浏览器对WebSocket的支持也更加广泛IE、Edge几乎不支持SSE WebSocket有一套独立的标准协议在使用过程中必须按照标准协议来而SSE使用的是Http协议只需要更改Context-Type为text/event-stream; charsetutf-8即可这里需要特殊注意的一点必须是utf-8 SSE 属于轻量级使用特别简单WebSocket协议相对复杂些 SSE 内置断线重连和消息追踪的功能WebSocket的也能实现但是不在协议范围内需要手动实现 SSE 只支持纯文本传送如果需要发送二进制文本的话需要先编码下然后再传送WebSocket不仅支持文本还支持二进制数据传送 SSE 支持自定义发送的消息类型(Type) SSE 适合服务器发送单向事件心跳之类的简单数据WebSocket试用于前后端通讯例如聊天服务等具体场景具体对待
