Golang 开发SSE流接口,实现ChatGpt逐字打印效果
一直来没时间优化一下我这个gpt,因为最开始弄这个设计成所有数据请求完之后一次性返给前端,这样就需要等gpt处理完所有数据,消耗的时间比较多。所以造成的结果就是请求一次对话需要等待5-15秒不等。实在是影响体验性。
这两天稍微有点时间,就琢磨把gpt接口改成一个字一个字或者一段话一段话输出,在网上查找了一些资料,发现有很多处理方式,比如Websocket,SSE之类的,最常见的还是SSE,因为它没有消耗太多资源,对于这样低配置服务器来说是最好的处理方式了。
好,接下里我直接上代码,查找资料过程略过。
后端:我这里拉Gin服务,其他也行。
SSE流接口处理:(流接口主要是三个地方调整)
Content-Type":"text/event-stream"
Cache-Control":"no-cache"
Connection":"keep-alive"
package main
import (
"time"
"github.com/gin-gonic/gin"
)
func main() {
// 创建路由
router := gin.Default()
router.Any("/stream", func(c *gin.Context) {
c.Header("Content-Type", "text/event-stream")
c.Header("Cache-Control", "no-cache")
c.Header("Connection", "keep-alive")
c.SSEvent("start", "start")
for i := 0; i < 10; i++ {
c.Writer.WriteString("data: SSE data\n\n")
if i == 9 {
c.SSEvent("end", "end")
}
c.Writer.Flush()
time.Sleep(10 * time.Millisecond)
}
})
// 启动服务
router.Run(":8080")
}
前端:(我是在nuxt3框架中处理的,你也可以直接在html页面处理一样的方法,直接copy)
<div>
<ul>
<li>
{{ messageStr }}
</li>
</ul>
<div @click="clickHandle">点我</div>
</div>
</template>
<script setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
let messageStr = ref("");
let getData = ()=>{
const sseSource = new window.EventSource('/ccc/stream');
sseSource.addEventListener('message', (event) => {
console.log(event.data);
messageStr.value = messageStr.value+event.data;
});
sseSource.addEventListener('end', (event) => {
sseSource.close();
});
}
let clickHandle = ()=>{
getData();
}
好了,前后端已完成,是不是很简单。现在我们来看下测试效果。
还没有评论,快来发表第一个评论吧