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

原创

已于 2024-02-25 16:23:06 修改 · 1.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #chatgpt

于 2024-02-25 16:17:57 首次发布

SSE

服务端发送事件（SSE）技术早在很久以前就已存在，但其在实际应用场景中并不十分常见。随着ChatGPT的出现，SSE技术得到了重新关注并被广泛应用于实现流式输出。本文将介绍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事件，处理对应的操作即可

<!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时设置对应的响应头：

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": "*",

最低0.47元/天解锁文章