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();
}


好了,前后端已完成,是不是很简单。现在我们来看下测试效果。

点赞23
点击评论0
收藏4
浏览 1191
 

还没有评论,快来发表第一个评论吧

免责声明:凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,注册用户和一般页面游览者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任(包括侵权责任、合同责任和其它责任)
*尊重作者,转载请注明出处!

创作内容

开启你的爱凌峰创作之旅

发布首篇内容,开通创作中心
快来成为爱凌峰创作者吧~

写文章

板块热门【Golang】