OpenAI chatGPT 所使用的接口响应技巧 EventStream的实现

服务器代码(go)

package main

import (
    "fmt"
    "log"
    "net/http"
    "time"
)

func handleSSE(w http.ResponseWriter, r *http.Request) {

    appId := r.URL.Query()["appId"]
    page := r.URL.Query()["page"]
    pageSize := r.URL.Query()["pageSize"]

    w.Header().Set("Content-Type", "text/event-stream")
    w.Header().Set("Cache-Control", "no-cache")
    w.Header().Set("Connection", "keep-alive")
    w.Header().Set("Access-Control-Allow-Origin", "*")

    flusher, ok := w.(http.Flusher)
    if !ok {
        log.Panic("server not support")
    }
    for i := 0; i < 10; i++ {
        time.Sleep(5*time.Second)
        fmt.Fprintf(w, "data: %d%s%s%s\n\n", i, appId[0], page[0], pageSize[0])
        flusher.Flush()
    }
    fmt.Fprintf(w, "event: close\ndata: close\n\n") // 一定要带上data，否则无效
}

func main() {
    http.Handle("/event", http.HandlerFunc(handleSSE))
    http.ListenAndServe(":8000", nil)
}

服务器端必须设置 Content-Type 为 text/event-stream 表明这是个 event 流。no-cache 主要是避免客户端读缓存，keep-alive 保持长链接。

服务端代码(Node)

// 服务器端代码
// 设置响应的 MIME 类型为 text/event-stream
header("Content-Type: text/event-stream");
// 设置不要缓存响应
header("Cache-Control: no-cache");

// 定义一个发送事件的函数
function sendEvent($data) {
  // 输出数据，以 data: 开头，以两个换行符结束
  echo "data: {$data}\n\n";
  // 刷新输出缓冲区，发送数据到客户端
  flush();
}

// 循环发送事件
while (true) {
  // 生成一个随机数
  $number = rand(1, 100);
  // 调用发送事件的函数，传入随机数
  sendEvent($number);
  // 等待一秒
  sleep(1);
}

客户端代码(VUE)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Server-Send Event</title>
</head>
<body>
    <div id="app">
        <button @click="create">Server-Send Event</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                page: 1,
                pageSize: 30,
                appId: 10003,
            },
            methods: {
                create: function() {
                    let url = 'http://localhost:8000/event?page='+this.page+'&pageSize='+this.pageSize+'&appId='+this.appId
                    let es = new EventSource(url);
                    es.addEventListener('message', event => {
                        console.log(event.data);
                    });
                    es.addEventListener('error', event => {
                        if (event.readyState == EventSource.CLOSED) {
                            console.log('event was closed');
                        };
                    });
                    es.addEventListener('close', event => {
                        console.log(event.type);
                        es.close();
                    });
                }
            },
        })
    </script>
</body>
<script>

</script>
</html>

客户端可以在 url 加上一些参数，但是如果想传大量参数，那就没什么直接的方法了，像 post 那样。只能另想方法，例如先发个 post 请求把数据发到服务器，再 SSE ，并通过 session 或别的将这两者关联。

协议格式

在chrome 的网络标签中看 EventStream

SSE 通过 http(s) 链接创建一个单向流。服务器端可以源源不断的向客户端推送数据，客户端意外断开后还可以自动重连，甚至设置重连间隔。

SSE 是一种服务器推送技术，它可以让客户端通过 HTTP 连接从服务器接收自动更新，它有一些优点，比如简单，轻量，易于实现，但是也有一些缺点，比如：

SSE 只支持单向通信，从服务器到客户端，如果客户端要向服务器发送数据，就需要另外一个通道，比如 AJAX
SSE 的浏览器支持比较有限，一些浏览器，比如 IE，不支持原生的 SSE，需要使用一些 polyfill
SSE 依赖于客户端来验证来源，可能比 WebSockets 更容易受到 XSS 攻击
SSE 不是一个可扩展的解决方案，如果你的 web 应用的需求发生变化，你可能最终需要使用 WebSockets 来重构你的代码