调研-SSE

2025-07-29 41 阅读2分钟

引入

SSE。基于HTTP协议，由服务端向客户端单向实时推送数据的技术。
特点
- 单向通信。
- 实时推送。
- 轻量级。
- 支持跨域、使用简单、支持自动重连。
- 基于HTTP协议，现有服务器软件都支持。

内容

客户端API
- 建立基本SSE连接，使用EventSource。
  - EventSource接口。Web内容与服务器发送事件通信的接口。
    - 一个EventSource实例向HTTP服务器开启一个持久化连接，以text/event-stream格式发送事件，连接会一直保持开启直到通过调用EventSource.close关闭。
    - 创建实例时，指定服务器地址。可以和当前网址同域，也可以跨域，可以指定第二个参数，打开withCredentials属性。

const initSSE = ()=>{
  eventSource = new EventSource({服务器地址});
  eventSource.onmessage = (event)=>{
    console.log("收到消息内容是:", event.data)
  };
  eventSource.onerror = (error) => {
    console.error("SSE 连接出错：", error);
    eventSource.close();
  };
};

    * EventSource事件。
        + open。在与事件源的连接打开时触发。
        + message。在客户端从事件源接收到数据时触发。
        + error。在事件源连接未能打开时触发。
        + 具名事件。当从服务器端接收到指定event字段的事件时触发，会创建一个以该键值为值的特定事件。
- SSE连接携带token。
    * event-source-polyfill。封装好的方法，可以直接配置请求头。

服务端API
- 数据格式
  - 服务器向浏览器发送的SSE数据，要是UTF-8编码的文本。
    - http头信息

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

    * 每次发送的信息是由若干个message组成，每个message之间用`\n\n`分隔。message内部由若干行组成，每一行格式是`[field]:value\n`。
- data字段
    * 数据内容存放处。
- id字段
    * 数据编号。
- event字段
    * 自定义的事件类型，默认message事件。

参考资料