Vue 实现实时消息推送的三种方法介绍

482 阅读7分钟

在开发数据大屏或者消息推送等业务场景时,经常需要从服务器获取实时更新。在日常开发中,实现服务端向客户端推送数据的常规方法有以下三种:

  1. 轮询
  2. websocket
  3. SSE

轮询

轮询可以实现服务端向客户端进行消息的伪推送(因为本质上还是通过客户端向服务端发起一个单项传输的请求,服务端对这个请求做出响应)。它需要不断的请求来实现服务端向客户端推送数据的效果,并不是服务端主动推送。

缺点:

  1. 轮询需要不断的发起请求,每一个请求都需要经过http建立连接的流程,会造成不必要的消耗。
  2. 客户端从轮询开始就一直处理请求,即使每次消耗不大,但持续处理请求对于客户端来说不是很友好。
  3. 浏览器针对统一域名的请求并发数量是有限制的,超过这一限制的后续请求将会被阻塞。轮询意味着会有一个请求长时间的占用并发名额。
  4. 如果轮询时间较长,可能没有办法及时获取到实时数据。

websocket

websocket是一个双向通讯的协议,提供了一种双向通信的机制。

优点:

  1. 实时性高:WebSocket 可以实现双向实时通信,数据传输速度快。
  2. 低延迟:WebSocket 的延迟较低,适用于对实时性要求较高的场景。
  3. 全双工:WebSocket 支持全双工通信,即客户端和服务器可以同时发送和接收数据。
  4. 支持发送任意格式的数据(如二进制),使 Websocket 更加灵活。

缺点:

  1. 兼容性相对较差:WebSocket 的支持程度不如 SSE,部分旧版本浏览器不支持。websocket是一个新的协议(ws/wss),支持http协议的浏览器不一定支持ws协议。
  2. 实现复杂:WebSocket 的实现相对复杂,需要处理更多的细节。
  3. Websocket 是一种全双工的通信方式,长期存在会占用服务器资源,在高并发场景下,应该考虑使用 SSE。

SSE

SSE(Server-Sent Events)是一个单向通讯的协议,也是一个长连接,它只支持服务端主动向客户端推送数据,无法让客户端向服务端推送消息。

优点:

  1. 兼容性好:SSE 的支持程度较高,所有现代浏览器都支持。
  2. 实现简单:SSE 的实现相对简单,只需监听服务器发送的消息即可。
  3. 实时性:SSE 可以实现服务器向客户端推送消息,满足实时性需求。
  4. 简单易用:不需要引入特定的依赖,客户端可以使用 EventSource 接口与 SSE 服务器通信。Spring Web MVC模块已经内置了对SSE的支持。
  5. 对服务器压力小:SSE 客户端可以接收来自服务器的“流”数据,不用重复提交请求。

缺点:

  1. 只支持单向通信。SSE 只能从服务器推送到客户端,双向通信应用场景需使用 Websocket。
  2. 不支持发送二进制数据,SSE 只能发送纯文本格式。
  3. 不是所有浏览器都支持SSE。(IE不支持SSE)
  4. SSE连接是持久性的,长时间保持连接可能需要处理超时和重连问题。
  5. 考虑到资源消耗,对于大量的并发客户端,可能需要采用连接池或者其他优化策略。

IE(‌Internet Explorer)‌浏览器并不支持SSE。‌尽管有方法通过引入第三方JavaScript库如eventsource.js来在IE中实现SSE的类似功能,‌但原生的IE浏览器并不支持SSE协议。‌

长连接

  • 长连接是一种HTTP/1.1的持久连接技术。
  • 允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应,不必为每个请求/响应建立和断开一个新的连接。
  • 长连接有助于减少服务器的负载和提高性能。

总结:利用SSE实现实时数据推送既简单又实用,非常适合实时更新频率不高、实时性要求不严苛的场景。同时,在高并发场景下需要注意资源管理和优化策略的选择。

SSE 和 WebSocket的对比

WebSocket 和 SSE 都是用于实现客户端与服务器之间实时通信的技术,但它们之间有一些区别。

SSE 和 WebSocket 原理和实现方式的区别

SSE( Server-Sent Events)

SSE 是基于传统的 HTTP 协议实现的,采用了长轮询(long-polling)机制。客户端通过向服务器发送一个 HTTP 请求,服务器保持连接打开并周期性地向客户端发送数据。

SSE 通过 EventSource 对象来实现,在客户端可以通过监听 onmessage 事件来接收服务器端发送的数据。

WebSocket

WebSocket 是基于独立的 TCP 连接实现的,使用自定义的协议。客户端和服务器之间可以建立持久的全双工通信的连接,可以双向发送和接收数据。

WebSocket 协议是基于帧的,可以通过发送不同类型的帧进行通信。

SSE 和 WebSocket 特点的差异

SSE

SSE 适用于服务器向客户端单向发送实时更新的数据,适合实时事件推送场景。SSE 使用的是标准的 HTTP 协议,对于浏览器的兼容性较好,但只支持客户端接收数据。

WebSocket

WebSocket 适用于客户端和服务器之间的双向实时通信,适合聊天应用、实时游戏等场景。WebSocket 需要独立的 TCP 连接,因此相比 SSE,会增加一定的网络开销,但能够实现双向通信。

比较:

  1. WebSocket 是双向通信,客户端和服务器可以相互发送消息;而 SSE 是单向通信,只能由服务器向客户端发送消息。
  2. WebSocket是一个新的协议,兼容性较差,主要支持现代浏览器;SSE部署在HTTP协议之上,兼容性较好,现有的服务器软件都支持。
  3. WebSocket 可以发送任意格式的数据(文本、二进制等);SSE只能发送文本格式的数据。
  4. WebSocket实时性高、低延迟,适用于实时性要求高的场景;SSE适用于实时性需求较低的场景。
  5. SSE是一个轻量级协议,相对简单;WebSocket是一种较重的协议,相对复杂。
  6. SSE默认支持断线重连,WebSocket则需要额外部署。

WebSocket 在一些较老版本的浏览器中不被支持,例如 IE9 及以下版本。但在现代浏览器中,WebSocket 已经得到了广泛的支持。 EventSource 则在较早的浏览器版本中也能够正常工作,包括 IE10 及以上版本、Firefox 6.0 及以上版本、Chrome 13.0 及以上版本等等。但在一些较老的浏览器中,如 Safari 5.1.7 及以下版本,EventSource 可能会遇到一些问题。

适用场景的不同

SSE 适用于只需要服务器向客户端单向实时推送数据的场景,例如实时更新的新闻、数据大屏等。

  • 优点: 简单易用,对服务器压力小,浏览器兼容性好。
  • 缺点: 只支持单向通信,无法进行双向交互。

WebSocket 适用于需要客户端和服务器之间实时双向通信的场景,例如聊天室、实时协作应用等。

  • 优点: 支持双向通信,实时性更高,可以实现更丰富的交互效果。
  • 缺点: 需要独立的 TCP 连接,对服务器压力更大,浏览器兼容性相对较差。

总结:

  • SSE 是比较适合单向数据传递的场景,尤其是当不需要从客户端频繁地向服务器发送数据时。SSE 可以用标准 HTTP 服务实现,对于服务器的改造相对较小。
  • WebSocket 比 SSE 更为强大,适用于需要快速、双向通信的应用。WebSocket 更复杂,需要专门的服务器和客户端支持。与此同时,它们提供了更低的延迟和更灵活的通信能力。
  • SSE 是轻量的,而且对于服务端的支持度要更好。所以可以使用SSE完成的功能需求,就没有必要使用更重更复杂的websocket。

总的来说,‌无论是WebSocket还是SSE,‌它们都在不断地发展和改进中,‌以适应不同的设备和浏览器环境。‌在选择使用哪种技术时,‌需要考虑应用的具体需求、‌兼容性要求以及服务器的支持情况。

参考学习