详解 HTML5 服务器发送事件(Server-Sent Events)-阿里云开发者社区

详解 HTML5 服务器发送事件(Server-Sent Events)

2024-06-03 85

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 详解 HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

EventSource 是单向通信的（是服务器向客户端的单向通信，客户端接收来自服务器的事件流）、基于 HTTP 协议（EventSource 是基于标准的 HTTP/HTTPS 协议），使用长轮询或类似的机制，但并不是完全双向的通信、文本数据传输（通常用于传输文本数据，如服务器推送的消息或事件）、自动重连（当连接中断，EventSource 会自动尝试重新连接，不需要手动处理重连）。

使用场景

适合需要从服务器获取实时信息的应用，例如股票行情或新闻推送。

使用方式

1、直接使用浏览器自带 EventSource。

缺点：不可以自定义参数且只能 get 方式请求，无法向服务端传递请求参数，比如请求头中携带 token。

 if (window.hasOwnProperty("EventSource")) {
    // url 接口
    let source = new EventSource(
      "https://api.baichuan-ai.com/v1/chat/completions"
    );
    // 当发生错误
    source.onerror = function () {
      console.log("error");
    };
    // 当通往服务器的连接被打开
    source.onopen = function () {
      console.log("连接成功");
    };
    // 当接收到消息
    source.onmessage = function (event) {
      console.log("服务器推送数据", event.data);
    };
  }

2、使用 EventSourcePolyfill，解决使用 EventSource 无法在 header 中传参。

缺点：只能 get 请求且无法向服务端传递请求参数。

  import { EventSourcePolyfill } from "event-source-polyfill";
  // url 接口
  let source = new EventSourcePolyfill(
    "https://api.baichuan-ai.com/v1/chat/completions",
    {
      headers: {
        Authorization: "token",
      },
    }
  );
  // 当发生错误
  source.onerror = function () {
    console.log("error");
  };
  // 当通往服务器的连接被打开
  source.onopen = function () {
    console.log("连接成功");
  };
  // 当接收到消息
  source.onmessage = function (event) {
    console.log("服务器推送数据", event.data);
  };

3、使用 fetchEventSource，实现 post 请求方式

import { fetchEventSource } from "@microsoft/fetch-event-source";
 let es = new fetchEventSource(
    "https://api.baichuan-ai.com/v1/chat/completions",
    {
      headers: {
        Authorization: "token 值",
        withCredentials: true,
        "Content-Type": "application/json",
      },
      method: "post",
      // 参数
      body: JSON.stringify({
        username: "LIIIIII",
        password: "123456",
      }),
      onmessage(event) {
        console.log(event.data);
      },
      onerror() {
        console.log("erroe");
      },
    }
  );