Skip to content
文章摘要

后端通知前端,你可能并不需要WebSocket

背景

通常情况下,我们平常开发中遇到一些场景,有些返回不能及时响应,需要用户等待时间比较久,这种情况下,我们一般都是前端定时轮询去请求后端接口,又或者使用一些双向通信的方式,比如WebSocket。不过WebSocket相当于是新的协议,是前端可以通知后端,后端也可以通知前端,有时候其实我们的场景可能久只是需要服务端有变化的时候就告诉客户端就好了,那其实可以使用SSE,Server-Sent Events,服务端给客户端推送就好了,这样就更简单快速,又不用引入新技术带来新的消耗,主要还是看需求场景,选择合适满足的才是最好的。

什么是Server-Sent Events

HTTP 服务器推送(Server-Sent Events)是一种基于 HTTP 协议的服务器推送技术,它允许服务器向客户端发送异步事件,并在客户端自动接收和处理这些事件。

使用 Server-Sent Events,服务器可以通过一个长时间保持的 HTTP 连接向客户端发送事件流。客户端通过监听这个事件流,实时接收来自服务器的事件数据。这种技术通常用于实现实时更新、通知、聊天室等应用场景。

SSE 的基本工作原理:

  1. 服务器使用特定的 HTTP 头(Content-Type: text/event-stream)来发送 SSE 数据。

  2. 客户端使用JavaScript 中的 EventSource 对象建立 SSE 连接,并通过 onmessage 事件处理程序处理接收到的事件数据。

  3. SSE 提供了一种简单而有效的方式,使服务器能够向客户端实时地推送数据。它适用于需要实时更新和通知的应用程序,如股票报价、实时监控等。

  4. Server-Sent Events(SSE)是基于一个长期保持的 HTTP 连接的。它使用了一种称为 "HTTP Keep-Alive" 的机制,通过保持单个持久的 HTTP 连接来实现服务器和客户端之间的通信。

  5. 与传统的 HTTP 请求-响应模式不同,SSE 建立一条长时间打开的连接,允许服务器在任何时间向客户端发送数据,而无需客户端明确地发起请求。

WebSocket和SSE的比较

WebSocket(Web套接字)和SSE(Server-Sent Events,服务器推送事件)是两种不同的技术,用于在Web应用程序中实现实时通信。它们有以下区别:

  1. 双向通信:WebSocket支持双向通信,客户端和服务器可以在同一个连接上进行双向数据传输。而SSE是单向通信,仅允许服务器向客户端发送数据,客户端无法向服务器发送数据。

  2. 连接性:WebSocket在客户端和服务器之间建立持久的连接,可以长时间保持连接状态,并支持实时通信。相比之下,SSE是基于HTTP协议的长连接

  3. 协议:WebSocket使用自定义的协议,其数据帧可以直接嵌入应用层数据。而SSE使用标准的HTTP协议,基于HTTP的长连接,数据以文本格式发送,通常使用EventStream格式。

  4. 兼容性:WebSocket在现代浏览器中得到广泛支持,包括Chrome、Firefox、Safari等。而SSE在较新的浏览器中支持较好,但在旧版本的浏览器中可能不被完全支持。

  5. 应用场景:WebSocket常用于实时聊天、多人协作、股票行情等需要实时双向通信的应用。SSE通常用于服务器推送事件,例如实时更新新闻、股票价格、天气信息等。

总体而言,WebSocket适用于需要实时双向通信的场景,而SSE适用于仅需要服务器向客户端推送数据的场景。选择使用哪种技术取决于具体的应用需求和目标浏览器支持情况。

需要将 The Connection 首部的值设置为 "keep-alive" 这个首部才有意义。同时需要注意的是,在 HTTP/2 协议中, Connection 和 Keep-Alive 是被忽略的;在其中采用其他机制来进行连接管理。

https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

js
header("X-Accel-Buffering: no");
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");