近期开发私有数据知识库功能,想要实现和ChatGPT聊天效果类似的逐字流式输出展示效果。
GPT3.5本身就有流式聊天补全接口,后端Golang对接后,也需要能流式输出。下面就介绍下前端JS后端Golang来实现这种输出效果
大部分介绍是使用EventStream来实现,我现在不使用EventStream也来实现同样的效果
在服务器端需要关闭输出缓冲,使得每次写入的数据能够立即发送给客户端。可以通过调用http.ResponseWriter对象的Flush方法实现。
在客户端需要使用XHR对象或WebSocket对象实现长连接,从而能够接收来自服务器的多次响应。
- router := gin.Default()
- router.GET("/", func(c *gin.Context) {
- c.Header("Content-Type", "text/html;charset=utf-8")
- // 关闭输出缓冲,使得每次写入的数据能够立即发送给客户端
- f, ok := c.Writer.(http.Flusher)
- if !ok {
- c.AbortWithStatus(http.StatusInternalServerError)
- return
- }
- // 向客户端输出数据
- html := []rune(`Go-Knowledge AI,自建私有数据知识库 · 与知识库AI聊天`)
- for _, str := range html {
- fmt.Fprintf(c.Writer, string(str))
- f.Flush()
- time.Sleep(100 * time.Millisecond)
- }
- })
复制代码 这样我们直接访问 / ,就可以看到文字是逐字流式输出响应的
前端JS需要使用下面这种读取方式- var xhr = new XMLHttpRequest();
- xhr.open("GET", "/");
- xhr.setRequestHeader("Content-Type", "text/plain");
- xhr.onprogress = function(event) {
- console.log(event.currentTarget.responseText);
- };
- xhr.send();
复制代码
开源地址:唯一客服(开源学习版) 官网地址:唯一客服官网
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |