技术栈：vue3 + element-plus + axios + pinia + router + Django5 + websocket + 讯飞星火API
本文将实现一个 AI 聊天对话功能，将前端用户输入问题以及之前对话发送给后端，通过 api 访问大模型，返回前端实时对话数据。
调用 讯飞星火API 大家可以看这篇（文A）： 前端 vue3 +后端 Django5 连接可以看这篇（文B）： Django5 配置 websocket（文C):
Django连接vue3，接入ai
文A 已讲解如何在 Django 调用免费的讯飞星火API 。
文B 已讲解如何连接前端 vue3 、后端 Django5，配置 vite.config 文件代理，后端解决跨域等等。还有如何在前端获取 token ，并在前端发送 Post 请求时以携带该 token 以越过安全验证，使得后端 Django 能接收到数据，这里不过多赘述，结尾也有相关资源可以下载。
文C 以讲解如何在 Django 中配置 websocket 环境，以及如何实现聊天室功能。
没实现的可以先回去实现。
后端
Django 配置好 websocket ，定义 AI 消费者及其路径：
routings.py:
consumers.py:
消费者涉及到的内容比较多，下面我将一一解释：
首先注意！由于连的 websocket ，需要频繁地接收客户端发送的消息、向客户端发送消息并保持连接状态。这些操作本质上是 I/O 密集型任务，涉及到网络请求和响应。如果使用同步代码来处理这些任务，线程会阻塞，导致性能瓶颈。而异步代码可以高效地处理大量并发连接，避免线程阻塞。
text_data_json 获取到前端的对话数据，并添加空数据判断。
定义 call_spark_ai() 函数，传入参数是对话列表，通过调用讯飞星火 API ，得到流式数据，通过正则获取到 content 数据，通过 yield 并发式返回。
然后在消费者中异步使用该函数，将返回值返回给前端。
记得在 headers 中添加自己的密钥。
前端
新建一个 Ai_store 用于存储对话数据：
定义了一个 messages 用于存储对话，addMessage() 添加对话对话和内容，clearMessage() 使messages 清空，即新建对话。
导入、初始化 pinia ，并定义一些变量：
初始化 websocket 连接：
socket 路径 ws://localhost:8080/ws/chat/ 要和后端对应起来，保证连接顺利。
onmessage 接受后端返回的消息流，将 message.data 动态加入到 currentAiResponse ，currentAiResponse 动态更新消息。
发送消息：
如何 messages 中有对话数据，则添加至 pinia 中，当作历史对话数据，以在页面上展示之前对话数据，通过 join_messages 构造历史对话数据和当前对话数据，即当前对话中所有对话数据，然后传给后端，后端解析后，传给 讯飞星火，如此形成循环。
组件生命周期：
组件挂载则初始化，卸载则断开 socket 连接。
新建对话：
用户点击按钮调用此函数，所有数据清空，重新开始对话。
计算 html ：
合并所有对话数据，制造格式化消息，返回给页面，用于展示。
页面：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/217147.html