SSE

server sent events。是一种用于实现服务器主动向客户端单向推送数据的技术，也被称为事件流。它是基于 HTTP 协议的，实现在客户端和服务端之间建立一条持久化连接（长连接），并通过这条连接实现服务器向客户端的实时数据推送。单工通讯

客户端向服务端发起请求后，服务端就与客户端建立连接，服务端一有数据就向客户端发送，不需要客户端再发起请求。

HTTP 协议特性

是否有长连接。

协议对比-AJAX（HTTP）/ SSE / WebSocket

AJAX

客户端向服务端发送一个 HTTP 请求后，服务端响应一次。一来一回一来一回。

SSE

客户端向服务端发起请求，传递 SSE 数据，此时服务端可以不立即返回消息，隔一阵之后在返回消息，并且不用客户端再次发起请求，就可以一直给客户端返回消息，实现单工通讯。

WebSocket

客户端向服务端发起请求后，客户端和服务端都可以向对方发送消息，全双工通讯。

适用场景

chatGPT 返回的数据、实时数据大屏（后端实时向前端推送数据，不一定非要使用 WebSocket）。

使用

前端

需要使用 HTML5 提供的 EventSource API。

• 构造一个 EventSource 的实例，该构造函数需要传入一个用于建立连接的 url，还可以传入一个可选的配置对象。
  • 配置对象可以配置发送请求头信息，与服务器失去连接之后重新连接的时间间隔等。
• 然后可以使用实例对象的一些方法来监听或者操纵整个 SSE 连接：
  • close()：关闭与服务端的连接，停止接收服务端发送的数据；
  • onopen()：和服务器建立好连接之后触发的函数（第一次建立连接）；
  • onerror()：建立连接失败触发的函数；
  • onmessage()：接收到服务端数据时触发的函数，默认参数为后端返回的数据；

    注意：后端可以设置返回多个事件的名称（res.write(‘event: ‘)），默认为 message。前端需要监听这个事件名称，才能接收到对应数据。

后端

需要在返回响应里设置请求头信息 Content-Type 为 text/event-stream