我们在使用
ChatGPT时，它的返回方式是采用流式回复。感觉这个效果不错。之前做的全都是的等全部结果请求完成，再一次性返回给用户。今天就通过流式回复的效果重写之前的程序。
前端
前端采用一个网页版的客服组件，整体的效果如下：
前端的样式的这里就不过多介绍，主要看看关键的
JS代码。
writeMessage方法主要的作用是，把输入框的内容在发送出去时，把内容渲染到消息框中，关键代码如下：
writeMessage方法
autoReply方法主要的作用是，构造自动回复的消息内容，然后把回复的消息内容渲染到消息框中，关键代码如下:
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的整合了。来看看整体的效果吧。
今天的内容就分享到这里，如果觉得内容对你有所帮助，请点赞和关注吧。
本文由mdnice多平台发布
网友评论