近期开发私有数据知识库功能,想要实现和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();