HTTP中的event-stream，eventsource，SSE，chatgpt，stream request，golang

🕗 发布于 2024-09-21 08:51 http 网络协议网络

我们都知道chatgpt是生成式的，因此它返回给客户端的消息也是一段一段的，所以普通的HTTP协议无法满足，当然websocket是能满足的，但是这个是双向的通信，其实 SSE（Server-Sent Events）正好满足这个需求。

SSE相比websocket的优点：

SSE是使用http协议，而websocket是一种单独的协议。
SSE是单向传输，只能服务端向客户端推送，websocket是双向。
SSE支持断点续传，websocket需要自己实现。
SSE支持自动重连、轻量级。
SSE支持发送自定义类型消息。
SSE的响应头Content-Typ：text/event-stream

要实现SSE，服务端需要设置以下Headers

"Content-Type"："text/event-stream"
"Cache-Control"："no-cache"
"Connection"："keep-alive"
"Access-Control-Allow-Origin": "*" // 跨域问题

一、前端代码

我看网络上有两种实现方式：fetch 和 EventSource

fetch方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Event Stream Demo</title>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #event-stream-data {
            margin: 50px auto;
            max-width: 600px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="event-stream-data"></div>
</body>

<script>
    const eventStreamDataElement = document.getElementById('event-stream-data');
    function handleEventStreamMessage(event) {
        console.log(event)
        const eventText = event.data;
        displayEvent(eventText);
    }

    function displayEvent(eventText) {
        const eventElement = document.createElement('p');
        eventElement.textContent = eventText;
        eventStreamDataElement.appendChild(eventElement);
    }

    function connectToEventStream() {
        fetch('http://127.0.0.1:8080/stream', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: {
                data: 'example'
            }
        })
            .then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();

                return reader.read().then(function processResult(result) {
                    // console.log(result)
                    if (result.done) {
                        return;
                    }

                    const chunk = decoder.decode(result.value, {
                        stream: true
                    });
                    handleEventStreamMessage({
                        data: chunk
                    });

                    return reader.read().then(processResult);
                });
            })
            .catch(error => {
                console.error('Error occurred while fetching event stream:', error);
            });
    }
    connectToEventStream();
</script>

</html>

EventSource方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Event Stream Demo</title>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #event-stream-data {
            margin: 50px auto;
            max-width: 600px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="event-stream-data"></div>
</body>

<script type="text/javascript">
    const eventStreamDataElement = document.getElementById('event-stream-data');
    function handleEventStreamMessage(event) {
        console.log(event)
        const eventText = event.data;
        displayEvent(eventText);
    }

    function displayEvent(eventText) {
        const eventElement = document.createElement('p');
        eventElement.textContent = eventText;
        eventStreamDataElement.appendChild(eventElement);
    }

    // 向后端服务器发起sse请求
    const es = new EventSource("http://127.0.0.1:8080/stream");
    // Event 和 Message 分开处理，需要显示的监听事件，否则不会处理事件
    es.onmessage = function (e) {
        handleEventStreamMessage(e);
    }
    // 监听事件流
    es.addEventListener("start", (e) => {
        handleEventStreamMessage(e);
    });
    es.addEventListener("end", (e) => {
        handleEventStreamMessage(e);

        // 一定要关闭连接，否则会一直轮训
        es.close()
    });
    es.onerror = function (e) {
        // readyState说明
        // 0：浏览器与服务端尚未建立连接或连接已被关闭
        // 1：浏览器与服务端已成功连接，浏览器正在处理接收到的事件及数据
        // 2：浏览器与服务端建立连接失败，客户端不再继续建立与服务端之间的连接
        console.log("readyState = " + e.currentTarget.readyState);
    }
</script>

</html>

二、GIN 中自带的 SSE

package main

import (
"time"

"github.com/gin-contrib/sse"
"github.com/gin-gonic/gin"
)

func main() {
engin := gin.Default()

engin.Any("/stream", func(c *gin.Context) {
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Headers", "*")

// c.SSEvent("start", "start...")
sse.Event{
Id:    "1",
Event: "start",
Data:  "start...",
}.Render(c.Writer)

c.Writer.Flush()
time.Sleep(1 * time.Second)

for i := 0; i < 10; i++ {
sse.Event{
Id:   "1",
Data: "SSE data",
}.Render(c.Writer)

c.Writer.Flush() // 需要手动刷新输出缓冲区

time.Sleep(1 * time.Second)
}

// c.SSEvent("end", "end...")
sse.Event{
Id:    "1",
Event: "end",
Data:  "end...",
}.Render(c.Writer)
})

engin.Run(":8080")
}

说明

// sse.Event
type Event struct {
Event string
Id    string
Retry uint
Data  interface{}
}

sse.Event 结构在渲染的时候会自动加上前缀和后面的回车，比如id:xxx\nevent:xxx\nretry:xxx\ndata:xxx\n\n，因此在设置内容的时候不需要关心format。

并且会自动填充两个响应头
Content-Type: text/event-stream
Cache-Control: no-cache

如果服务器端提供了event参数，那么客户端就需要使用addEventListener 显式监听这个事件，才会正常获取消息，否则事件不会触发。如果服务器端没有提供event 参数，只有id、data等，可以使用onmessage回调监听消息。

id 的意思是 lastEventId，用途不明。

完整的数据结构是：id:xxx\nevent:xxx\nretry:xxx\ndata:xxx\n\n

一般只需要data字段即可，后面接一个json串。

前端使用EventSource对象发起请求

在这里插入图片描述

使用 fetch 的方式发起请求，需要先打开调试并打开接口的响应预览tab，否则是看不到响应结果的。

在这里插入图片描述

使用EventSource对象发起请求与使用fetch方式的请求两者的区别在于，在处理响应结果的时候，前者是按照SSE协议来处理消息中的\n和\n\n以及那几个字段；而后者则不会。下面是打印结果

EventSource示例

在这里插入图片描述

fetch示例

在这里插入图片描述

上面的实现仅仅是为了满足ChatGPT这种对话形式，或者说仅仅实现了一个长连接下的流式传输，即使不适用SSE也能实现。

如果想要实现真正的消息推送还需要对客户端连接进行管理，在这一块，SSE和websocket要做的事情差不多，这里就不展开了。

三、使用golang请求chatgpt

大部分的时候，在客户端和chatgpt之间还需要有一个代理层，即它代替用户向chatgpt发起请求，接收数据流，然后将数据流转发给用户。前面已经实现了SSE，所以，这里需要处理的是golang发起stream request。

package main

import (
"bufio"
"bytes"
"errors"
"fmt"
"io"
"log"
"net/http"
"strings"
"time"
)

func main() {
client := &http.Client{Timeout: time.Second * 20}
req, _ := http.NewRequest("POST", "http://127.0.0.1:8080/stream", strings.NewReader(""))

resp, err := client.Do(req)
if err != nil {
log.Fatal(err)
}

reader := bufio.NewReader(resp.Body)
defer resp.Body.Close()

for {
rawLine, err := reader.ReadBytes('\n')
if errors.Is(err, io.EOF) {
return
} else if err != nil {
fmt.Println(err)
return
}
fmt.Println(string(bytes.TrimRight(rawLine, "\n")))
}
}

id:1
event:start
data:start...

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
data:SSE data

id:1
event:end
data:end...

golang对接openai：https://github.com/sashabaranov/go-openai

原文地址：https://blog.csdn.net/raoxiaoya/article/details/142375363

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：四款负载均衡工具Nginx、HAProxy、MetalLB、gobetween 比较
下一篇：Apache Flink 流批融合技术介绍

PL/SQL执行.sql文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/iamlzyoco/article/det
阅读更多2024-11-14
PyAEDT：Ansys Electronics Desktop API 简介
在本文中，我将向您介绍 PyAEDT，这是一个 Python 库，旨在增强您对 Ansys Electronics Desktop 或 AEDT 的体验。通过利用 PyAADT 的强大功能，您可以将分
阅读更多2024-11-14
Python从0到100（七十二）：Python OpenCV-OpenCV实现手势音量控制（文末送书）
本次实验需要使用OpenCV和mediapipe库进行手势识别，并利用手势距离控制电脑音量。cv2：OpenCV库，用于读取摄像头视频流和图像处理。mediapipe：mediapipe库，用于手部关
阅读更多2024-11-14
YOLOv11多模态结合CFT模块融合可见光+红外光双输入
这期是在上期YOLOv10的基础上，使用YOLOv11结合Transformer复现了论文《Cross-Modality Fusion Transformer for Multispectral Ob
阅读更多2024-11-14
鸿蒙学习生态应用开发能力全景图-三方库（3）
鸿蒙生态三方库，是在鸿蒙系统上可重复使用的软件库，可帮助开发者重用技术资产，快速开发鸿蒙生态应用、元服务，提升开发效率。鸿蒙生态中心仓聚合了丰富的鸿蒙生态开发三方库，方便开发者一站式获取。 C/C+
阅读更多2024-11-14
android studio新建activity提示 require androidX support
在Android Studio中创建Activity时出现的“require androidX support”提示通常意味着你的项目配置需要使用AndroidX库来支持。AndroidX是原Andr
阅读更多2024-11-14
Brave127编译指南 Windows篇：部署depot_tools（三）
在下一篇文章《Brave127编译指南 Windows篇：配置Git（四）》中，我们将详细讲解如何在Windows系统上安装和配置Git，为您的开发工作提供全面的版本控制支持。在Brave浏览器的编译
阅读更多2024-11-14
去地面算法——depth_clustering算法调试（1）
depth_clustering算法调试
阅读更多2024-11-14
网络安全与零信任架构：构建新一代信息保护体系
作为一种全新的网络安全理念，零信任架构（Zero Trust Architecture, ZTA）重新定义了信息保护的方式，强调对所有访问请求的验证与监控，以实现更高的安全性。而零信任架构是当前网络安
阅读更多2024-11-14
【3D Slicer】的小白入门使用指南四
● 开放解剖（OA）浏览器是由神经影像分析中心开发的，基于网络浏览器技术构建的图谱查看器。● OA浏览器将解剖模型和分割图像与语义信息结合起来。本教程提供了对OA浏览器技术的介绍。本教程中的示例基于S
阅读更多2024-11-14

HTTP中的event-stream，eventsource，SSE，chatgpt，stream request，golang

一、前端代码

二、GIN 中自带的 SSE

三、使用golang请求chatgpt

相关文章