使用服务器发送事件 - Web API | MDN

是什么

SSE（Server-Sent Events） 是一种基于 HTTP 协议的 服务端到客户端的单向实时通信技术。它允许服务端主动向客户端推送数据（如通知、日志、实时更新等），客户端通过 EventSource API 监听服务端事件流。与 WebSocket 不同，SSE 是 单向通信（服务端 → 客户端），但实现简单、天然支持断线重连，适合轻量级实时场景。

场景

适用

• 实时数据推送：如股票行情、新闻更新、实时日志。
• 通知系统：如邮件提醒、订单状态变更。
• 长任务进度：如文件上传/处理进度反馈。

不适用

• 需要客户端频繁发送数据的场景（如聊天室）。
• 需要低延迟高频双向通信的场景（如在线游戏）。

优势

• 替代传统轮询：轮询（Polling）需要客户端频繁请求，浪费资源。SSE 通过长连接实现服务端主动推送，更高效。
• 简化双向通信外的场景：WebSocket 适合双向通信（如聊天室），但 SSE 在单向场景下更轻量且无需额外协议。

使用

安装依赖包

npm install event-source-polyfill --save

封装方法

SSEClient.js

import {EventSourcePolyfill} from "event-source-polyfill";
import { getToken } from "@/utils/auth";

const defaultOptions = {
  retry: 5,
  interval: 3 * 1000,
};

class SSEClient {
  constructor(url, options = defaultOptions) {
    this.url = url;
    this.es = null;
    this.options = options;
    this.retry = options.retry;
    this.timer = null;
  }

  _onOpen() {
    console.log("server sent event connect created");
  }

  _onMessage(handler) {
    return (event) => {
      this.retry = this.options.retry;
      let payload;

      try {
        payload = JSON.parse(event.data);
        console.log("receiving data...", payload);
      } catch (error) {
        console.error("failed to parse payload from server", error);
      }

      if (typeof handler === "function") {
        handler(payload);
      }
    };
  }

  _onError(type, handler) {
    return () => {
      console.error("EventSource connection failed for subscribe.Retry");
      if (this.es) {
        this._removeAllEvent(type, handler);
        this.unsunscribe();
      }

      if (this.retry > 0) {
        this.timer = setTimeout(() => {
          this.subscribe(type, handler);
        }, this.options.interval);
      } else {
        this.retry--;
      }
    };
  }

  _removeAllEvent(type, handler) {
    this.es.removeEventListener("open", this._onOpen);
    this.es.removeEventListener(type, this._onMessage(handler));
    this.es.removeEventListener("error", this._onError(type, handler));
  }

  subscribe(type, handler) {
    this.es = new EventSourcePolyfill(this.url,{
      // 设置重连时间
      heartbeatTimeout: 60 * 60 * 1000,
      // 添加token
      headers: {
        Authorization: "Bearer " + getToken(),
      }
    });
    // this.es = new EventSource(url);

    this.es.addEventListener("open", this._onOpen);
    this.es.addEventListener(type, this._onMessage(handler));
    this.es.addEventListener("error", this._onError(type, handler));
  }

  unsunscribe() {
    if (this.es) {
      this.es.close();
      this.es = null;
    }
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
}

export default SSEClient