这么好看的客服组件，还是觉得接入ChatGPT，把它放在博客中那就完美了

❝

我们在使用ChatGPT时，它的返回方式是采用流式回复。感觉这个效果不错。之前做的全都是的等全部结果请求完成，再一次性返回给用户。今天就通过流式回复的效果重写之前的程序。

❞

前端

前端采用一个网页版的客服组件，整体的效果如下： 前端的样式的这里就不过多介绍，主要看看关键的JS代码。

writeMessage方法主要的作用是，把输入框的内容在发送出去时，把内容渲染到消息框中，关键代码如下：

autoReply方法主要的作用是，构造自动回复的消息内容，然后把回复的消息内容渲染到消息框中，关键代码如下:

后端

后端我们采用fastapi框架，通过调用OpenAI的接口返回请求的接口，而这次改用数据流的方式返回，关键代码如下：

上述方法是定义了请求OpenAI接口获取返回结果，stream=True是开启流式回复。

用fastapi构造请求接口，关键代码如下：

接口方式采用GET，并接收一个路径参数question。到此，后端的代码已经完成了。

那问题来了，如何把这个客服组件接入ChatGPT呢？

回到前端代码中autoReply方法进行修改即可。采用EventSource去请求接口，并把结果渲染。

什么是 EventSource？

❝

javascript EventSource 是一个内置在现代浏览器中的 API，它允许服务器向客户端发送实时事件。该 API 建立一个持久化的连接，通过该连接，服务器可以随时向客户端推送数据。该 API 建立的连接基于 HTTP 协议，而不是 WebSocket，因此不需要使用其他库或框架，即可在应用程序中使用它。

❞

好了，了解什么是 EventSource，我们看看它是如何用的，关键代码如下：

❝

代码的13-19行就是通过EventSource请求后端接口，当返回的结果为[DONE]就关闭流。否则就往消息框渲染数据。guid()方法是生成一个uuid，这样就可以通过uuid获取到页面上的dom元素进行消息的渲染。

❞

这样就完成了客服组件与chatGPT的整合了。来看看整体的效果吧。

今天的内容就分享到这里，如果觉得内容对你有所帮助，请点赞和关注吧。