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 流批融合技术介绍

基于微型5G网关的酒店服务机器人应用
智能机器人在酒店中已经越来越常见，但仍然面临着一些通信、组网和在线管理方面的痛点。可以通过部署微型5G网关，提高通信能力和在线管控效率，实现更高效的服务和管理。
阅读更多2024-09-21
HTTP中的301、302实现重定向
‌HTTP状态码301和302用于实现重定向‌，其中301代表永久重定向，而302代表临时重定向。这两种重定向方式在网页开发、搜索引擎优化（SEO）以及用户体验方面扮演着重要的角色。
阅读更多2024-09-21
python中ocr图片文字识别样例（二）
本次解决图片相关出现中文乱码问题，属于上篇文章的优化，前提条件依赖上篇文章的包。
阅读更多2024-09-21
oracle 11g SYSAUX表空间清理
【代码】oracle 11g SYSAUX表空间清理。
阅读更多2024-09-21
flask搭建微服务器并训练CNN水果识别模型应用于网页
【代码】flask搭建微服务器并训练CNN水果识别模型应用于网页。
阅读更多2024-09-21
使用 Azure Functions 开发 Serverless 应用：详解与实战
Serverless并不意味着没有服务器，而是服务器的管理、扩展、维护都被云平台（如 Azure）自动化处理。开发者只需编写代码，其他由平台负责。按需付费：只为实际运行时间和资源消耗付费。自动扩展：无
阅读更多2024-09-21
HTTP 教程
HTTP 是一种应用层协议，专门用于从万维网传输超文本（如 HTML 页面）到客户端浏览器。
阅读更多2024-09-21
TCP并发服务器的实现
打开三个网络调试助手（NetAssist），在每个助手中配置远端主机地址为你的tcp服务器地址（在虚拟机用ifconfig查看），端口设置为 8888，点击连接。首先启动所写的tcp服务器，即确保tc
阅读更多2024-09-21
智能BI项目第五期
将同步->异步,提高用户的体验效率，优化系统架构。讲解了线程池的概率和使用
阅读更多2024-09-21
十大排序（一）：冒泡排序
介绍详细，简单易懂
阅读更多2024-09-21

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

一、前端代码

二、GIN 中自带的 SSE

三、使用golang请求chatgpt

相关文章