SSE

概念

Event Stream：是一种通过 HTTP 协议实现的服务器推送技术，也被称为 Server-Sent Events（SSE）。

EventSource：是 HTML5 中定义的用于接收服务器端推送事件的 API。

SSE 是指 Server-Sent Events（服务器发送事件），是一种用于在客户端和服务器之间单向实时通信的 Web 技术。通过 SSE，服务器可以向客户端推送数据，而无需客户端再次发起请求。

SSE的核心流程是在客户端发送一个的http请求，在服务端响应的header中设置传输类型(MIME)为text/event-stream，就会在客户端与服务器之前建立一个持久的单向连接，实现服务器向客户端推送实时数据的能力。

EventSource会发送一个get类型的http请求，也可以通过fetch实现post类型的请求

API 介绍

EventSource： SSE的接口，通过new EventSource(url)对象来向url发送http请求

主要事件

message：默认服务器发送的数据会在这里被监听到，也可以在服务器端通过定义"event: xxx"使用xxx监听
open：在成功建立连接后触发，断连后自动重连后也会触发
error：出现错误后触发

实例方法

close：用于关闭连接

step by step 实现chatGPT流式输出的效果

使用EventSource

web 中创建一个EventSource对象，指定服务器url，可以在url中拼接query参数。随后监听message事件，处理对应的操作即可

TypeScript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      function createSSE(url) {
        const eventSource = new EventSource(url);
        eventSource.onmessage = function (event) {
          const data = JSON.parse(event?.data || "{}");
          if (data.type === "close") {
            eventSource.close();
          } else {
            const root = document.getElementById("root");
            root.innerText += data.msg;
          }
        };

        return eventSource;
      }
      const sse = createSSE("http://localhost:3000/sse");
    </script>
  </body>
</html>

服务器处理，这里用了Nodejs中http模块，创建一个服务用来监听3000端口。

匹配一个url path，当请求url path是sse时设置对应的响应头：

TypeScript 复制代码

const http = require("http");

const server = http.createServer((req, res) => {
  if (req.url === "/sse") {
    res.writeHead(200, {
      "Content-Type": "text/event-stream", // 必须指定
      "Access-Control-Allow-Origin": "*", // demo中解决跨域
      Connection: "keep-alive", // 请求完成后依旧保持连接不关闭，不同http版本默认值不同
      "Cache-Control": "no-cache", // 不缓存
    });
    // 业务逻辑
    // ...
  }
});

server.listen(3000, "localhost", () => {
  console.log("Server is running at 3000");
});

必须指明 Content-Type为 text/event-stream，SSE规定了一种特定的事件流格式，包括事件标识符、事件类型、数据等，浏览器通过text/event-stream类型可以正确解析这些格式。

可以通过定义json类型的数据格式，来传输更丰富的数据，通常也会约定一个type来标记请求是否完成，需要关闭长连接

TypeScript 复制代码

const http = require("http");

const server = http.createServer((req, res) => {
  if (req.url === "/sse") {
    res.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Access-Control-Allow-Origin": "*", // 解决跨域
      Connection: "keep-alive", // 请求完成后依旧保持连接不关闭，不同http版本默认值不同
      "Cache-Control": "no-cache", // 不缓存
    });
    // 业务逻辑 模拟请求
    let count = 0;
    let str =
      "SSE 是指 Server-Sent Events（服务器发送事件），是一种用于在客户端和服务器之间单向实时通信的 Web 技术。通过 SSE，服务器可以向客户端推送数据，而无需客户端发起请求。";
    const timer = setInterval(() => {
      let info = {};
      if (count < str.length) {
        info = { type: "keep-alive", msg: str[count] };
      } else {
        info = { type: "close", msg: "" };
        clearInterval(timer);
      }
      count += 1;
      res.write(`data: ${JSON.stringify(info)}\n\n`);
      /** 测试代码: 会触发 http 自动重连 & 触发onerror */
      // if (count === 10) {
      //   res.end(); // 触发重连
      //   clearInterval(timer);
      // }
    }, 100);
  }
});

server.listen(3000, "localhost", () => {
  console.log("Server is running at 3000");
});

你可能不知道的

使用EventSource可以在devtool中看到字节流信息

服务器响应的数据必须以data:开头，浏览器会解析此标记符中的数据并触发message事件，并将数据放在 event.data中
服务器响应的数据必须用 \n\n 来结尾，标记本次结束，浏览器会解析 \n\n 标记符，做为一次数据传输完成记为一次完整数据
服务器响应可以通过event: xxx\n 来定义事件监听的名称，定义的事件名称只在本次 \n\n 结束标记的数据生效，比如下面一次请求中发送3条信息，分别需要用"foo"、"message"、"bar"事件监听

TypeScript 复制代码

res.write(`event: foo\n`); // 使用foo事件监听
res.write(`data: foo listener\n\n`);

res.write(`data: message listener\n\n`); // 未声明名称，默认使用message事件监听

res.write(`event: bar\n`); // 使用bar事件监听
res.write(`data: bar listener\n\n`);

断连后，浏览器会自动重连，但并不会记录断开前的最后一次数据。SSE的初衷是实时信息推送，想要记录就需要在客户端或者服务器中做缓存

使用fetch

EventSource是浏览器已经帮你封装好所需的meesage、open、error等事件，通过标准去使用即可，但只能是get请求。如果需要其他请求类型，比如POST，我们也可以自己封装fetch。

SSE本质是字节流的传输，fetch中处理对应的字节流信息，同样可以实现EventSource的功能

使用"text/event-stream"类型传输，在fetch的响应结果中，拿到的是一个ReadableStream类型，通过ReadableStream.getReader().read()读取字节流，再将字节流转换成string即可

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const createFetchSSE = (url) => {
        const decoder = new TextDecoder();
        fetch(url, {
          method: "POST",
          body: JSON.stringify({ query: "hello" }),
          signal: controller.signal,
        }).then((res) => {
          // 创建一个 ReadableStreamDefaultReader 去读取字节流数据
          const reader = res.body.getReader();
          const processHandle = ({ value }) => {
           // value 为 Uint8Array 二进制数组
            const decodeValue = decoder.decode(value);
            // 业务代码
            // ...
            
            // 读取下一个流数据
            return reader.read().then(processHandle);
          };

          reader.read().then(processHandle);
        });
      };
      const sse = createFetchSSE("http://localhost:3000/sse");
    </script>
  </body>
</html>

使用fetch实现SSE是需要自己实现close、open等事件和方法，举个例子，用AbortController实现EventSource.close()方法

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const createFetchSSE = (url) => {
        const decoder = new TextDecoder();
        const controller = new AbortController();
        const root = document.getElementById("root");
        fetch(url, {
          method: "POST",
          body: JSON.stringify({ query: "hello" }),
          signal: controller.signal,
        }).then((res) => {
          const reader = res.body.getReader();
          const processHandle = ({ value }) => {
            const decodeValue = decoder.decode(value);
            const data = JSON.parse(decodeValue || "{}");
            if (data.type === "close") {
              controller.abort();
              return;
            }
            root.innerText += data.msg;
            return reader.read().then(processHandle);
          };

          reader.read().then(processHandle);
        });
      };
      const sse = createFetchSSE("http://localhost:3000/sse");
    </script>
  </body>
</html>

对于server端的代码和使用EventSource相同，区别是，你不需要遵循 data: 开头、不需要使用 \n\n 划分数据，同样也无法使用 event: 定义事件名

JavaScript 复制代码

const http = require("http");

const server = http.createServer((req, res) => {
  if (req.url === "/sse") {
    res.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Access-Control-Allow-Origin": "*", // 解决跨域
      Connection: "keep-alive",
      "Cache-Control": "no-cache",
    });
    let count = 0;
    let str =
      "SSE 是指 Server-Sent Events（服务器发送事件），是一种用于在客户端和服务器之间单向实时通信的 Web 技术。通过 SSE，服务器可以向客户端推送数据，而无需客户端发起请求。";
    const timer = setInterval(() => {
      let info = {};
      if (count < str.length) {
        info = { type: "keep-alive", msg: str[count] };
      } else {
        info = { type: "close", msg: "" };
        clearInterval(timer);
      }
      count += 1;
      res.write(`${JSON.stringify(info)}`);
    }, 1000);
  }
});

server.listen(3000, "localhost", () => {
  console.log("Server is running at 3000");
});

你可能不知道的

使用fetch是无法在devtool中看到字节流的数据信息

chatGPT就是使用的fetch，因为你看不到信息

SSE与WebScoket区别

	SSE	WebScoket
协议	http	ws
通信方式	单工只允许服务器向客户端发送消息	全双工服务器和客户端可互相发送消息
优势	开发简单轻量，基于http协议，服务器均支持	数据传输无数据格式的限制
劣势	受http最大数限制。使用 HTTP/2 时，最大并发 HTTP 流的数量是由服务器和客户端协商的（默认为 100）。不使用 HTTP/2 时，最大并发数为6-8，不同浏览器的限制不同只能单向数据传输传输内容只能为简单文本	服务器端开发成本高

reference

developer.mozilla.org/zh-CN/docs/...

重新审视SSE服务器发送事件：ChatGPT流式输出效果

SSE

概念

API 介绍

step by step 实现chatGPT流式输出的效果

使用EventSource

你可能不知道的

使用fetch

你可能不知道的

SSE与WebScoket区别

reference