一、背景

需求中时常会有需要等待后端响应的异步操作,如支付完成查询支付状态、聊天、扫码登录等等,很多时候扫码登录、支付状态都会使用轮询,只是短时间的查询。客服聊天可能需要WebSocket。

思考

※ 轮询的缺点

网络带宽

频繁的请求可能导致不必要的网络流量,增加带宽消耗。

服务器负载

每次请求都需要服务器处理,即使是空返回,也会增加服务器的CPU和内存负载。

用户体验

频繁的请求和更新可能会造成用户界面的卡顿,影响用户体验。

※ websocket的缺点

实现复杂性

WebSocket 是一种全双工通信协议,需要在客户端和服务器之间建立一个持久的连接,这涉及到更多的编程复杂性。

服务器资源消耗

WebSocket 连接需要更多的服务器资源来维护,因为它们是全双工的,服务器需要监听来自客户端的消息。

二、 详细对比

以下是 WebSocket、轮询和 SSE 的对比表格:

特性

WebSocket

轮询Polling

Server-Sent Events (SSE)

定义

全双工通信协议,支持服务器和客户端之间的双向通信。

客户端定期向服务器发送请求以检查更新。

服务器向客户端推送数据的单向通信协议。

实时性

高,服务器可以主动推送数据。

低,依赖客户端定时请求。

高,服务器可以主动推送数据。

开销

相对较高,需要建立和维护持久连接。

较低,但频繁请求可能导致高网络和服务器开销。

相对较低,只需要一个HTTP连接,服务器推送数据。

浏览器支持

现代浏览器支持,需要额外的库来支持旧浏览器。

所有浏览器支持。

现代浏览器支持良好,旧浏览器可能需要polyfill。

实现复杂性

高,需要处理连接的建立、维护和关闭。

低,只需定期发送请求。

中等,只需要处理服务器推送的数据。

数据格式

支持二进制和文本数据。

通常为JSON或XML。

仅支持文本数据,通常为JSON。

控制流

客户端和服务器都可以控制消息发送。

客户端控制请求发送频率。

服务器完全控制数据推送。

安全性

需要wss://(WebSocket Secure)来保证安全。

需要https://来保证请求的安全。

需要SSE通过HTTPS提供,以保证数据传输的安全。

适用场景

需要双向交互的应用,如聊天室、实时游戏。

适用于更新频率不高的场景,如轮询邮箱。

适用于服务器到客户端的单向数据流,如股票价格更新。

跨域限制

默认不支持跨域,需要服务器配置CORS。

默认不支持跨域,需要服务器配置CORS。

默认不支持跨域,需要服务器配置CORS。

重连机制

客户端可以实现自动重连逻辑。

需要客户端实现重连逻辑。

客户端可以监听连接关闭并尝试重连。

服务器资源

较高,因为需要维护持久连接。

较低,但频繁的请求可能增加服务器负担。

较低,只需要维护一个HTTP连接。

三、 SSE(Server-Sent Events)介绍

Server-Sent Events (SSE) 是一种允许服务器主动向客户端浏览器推送数据的技术。它基于 HTTP 协议,但与传统的 HTTP 请求-响应模式不同,SSE 允许服务器在建立连接后,通过一个持久的连接不断地向客户端发送消息。

工作原理

  1. 建立连接

    • 客户端通过一个普通的 HTTP 请求订阅一个 SSE 端点。

    • 服务器响应这个请求,并保持连接打开,而不是像传统的 HTTP 响应那样关闭连接。

  2. 服务器推送消息

    • 一旦服务器端有新数据可以发送,它就会通过这个持久的连接向客户端发送一个事件。

    • 每个事件通常包含一个简单的文本数据流,遵循特定的格式。

  3. 客户端接收消息

    • 客户端监听服务器发送的事件,并在收到新数据时触发相应的处理程序。

  4. 连接管理

    • 如果连接由于任何原因中断,客户端可以自动尝试重新连接。

四、使用场景

倒计时同步时间

实时天气

库存实时更新

AI对话

秒杀状态