我们在使用
ChatGPT
时,它的返回方式是采用流式回复。感觉这个效果不错。之前做的全都是的等全部结果请求完成,再一次性返回给用户。今天就通过流式回复的效果重写之前的程序。
前端
前端采用一个网页版的客服组件,整体的效果如下:
前端的样式的这里就不过多介绍,主要看看关键的JS
代码。
writeMessage
方法主要的作用是,把输入框的内容在发送出去时,把内容渲染到消息框中,关键代码如下:
autoReply
方法主要的作用是,构造自动回复的消息内容,然后把回复的消息内容渲染到消息框中,关键代码如下:
后端
后端我们采用fastapi
框架,通过调用OpenAI
的接口返回请求的接口,而这次改用数据流的方式返回,关键代码如下:
上述方法是定义了请求OpenAI
接口获取返回结果,stream=True
是开启流式回复。
用fastapi
构造请求接口,关键代码如下:
接口方式采用GET
,并接收一个路径参数question
。到此,后端的代码已经完成了。
那问题来了,如何把这个客服组件接入ChatGPT
呢?
回到前端代码中autoReply
方法进行修改即可。采用EventSource
去请求接口,并把结果渲染。
::: block-1
什么是 EventSource?
javascript EventSource 是一个内置在现代浏览器中的 API,它允许服务器向客户端发送实时事件。该 API 建立一个持久化的连接,通过该连接,服务器可以随时向客户端推送数据。该 API 建立的连接基于 HTTP 协议,而不是 WebSocket,因此不需要使用其他库或框架,即可在应用程序中使用它。
:::
好了,了解什么是 EventSource,我们看看它是如何用的,关键代码如下:
代码的13-19行就是通过
EventSource
请求后端接口,当返回的结果为[DONE]
就关闭流。否则就往消息框渲染数据。guid()
方法是生成一个uuid
,这样就可以通过uuid
获取到页面上的dom
元素进行消息的渲染。
这样就完成了客服组件与chatGPT
的整合了。来看看整体的效果吧。
今天的内容就分享到这里,如果觉得内容对你有所帮助,请点赞和关注吧。