uniapp+node+mysql接入deepseek实现流式输出

node

import express from 'express';
import mysql from 'mysql2';
import cors from 'cors';
import bodyParser from 'body-parser';
import axios from 'axios';
import { WebSocketServer } from 'ws'; // 正确导入 WebSocketServerconst app = express();// Middlewares
app.use(cors());
app.use(bodyParser.json());  // 解析JSON请求体
app.use(express.json());// MySQL数据库配置
const db = mysql.createConnection({host: '127.0.0.1',user: 'root',password: '123456',database: 'love_strategist',port: 3307,
});db.connect((err) => {if (err) throw err;console.log('✅ MySQL 连接成功');
});// 创建 WebSocket 服务器
const wss = new WebSocketServer({ port: 8080 }); // 使用 WebSocketServerwss.on('connection', (ws) => {console.log('客户端已连接');ws.on('message', async (message) => {const { message: userMessage } = JSON.parse(message);try {const response = await axios.post('https://api.deepseek.com/v1/chat/completions',{model: "deepseek-chat",messages: [{ role: "user", content: userMessage }],stream: true},{headers: {'Authorization': `Bearer 你的deepseekKey`,'Content-Type': 'application/json'},responseType: 'stream'});let buffer = ''; // 用于存储未完整的数据块response.data.on('data', (chunk) => {buffer += chunk.toString(); // 将数据块拼接到缓冲区// 按行分割数据const lines = buffer.split('\n');for (let i = 0; i < lines.length - 1; i++) {const line = lines[i].trim();if (line.startsWith('data: ')) {const jsonStr = line.replace('data: ', '');try {const data = JSON.parse(jsonStr);if (data.choices?.[0]?.delta?.content) {// 逐字发送内容const content = data.choices[0].delta.content;ws.send(JSON.stringify({ content }));}} catch (error) {console.error('解析JSON失败:', error);}}}// 保留未完整的数据行buffer = lines[lines.length - 1];});response.data.on('end', () => {ws.send(JSON.stringify({ content: '[DONE]' }));});} catch (error) {console.error('Error:', error);ws.send(JSON.stringify({ content: '系统错误，请稍后再试。' }));}});ws.on('close', () => {console.log('客户端已断开连接');});
});// 启动 HTTP 服务器
app.listen(3000, () => {console.log('✅ HTTP 服务器运行在 http://localhost:3000');
});console.log('WebSocket 服务器运行在 ws://localhost:8080');

uniapp

<template><view class="container"><!-- 顶部导航栏 --><view class="navbar">恋爱指导</view><!-- 聊天对话区域 --><scroll-view class="chat-box" scroll-y :style="{ height: (chatHeight - 70) + 'px' }" scroll-top="999999"><view v-for="(message, index) in messages" :key="index" class="chat-item"><view :class="message.from === 'user' ? 'user-message' : 'bot-message'"><text>{{ message.content }}</text></view></view></scroll-view><!-- 输入框区域 --><view class="input-area"><input v-model="userInput" class="input-box" placeholder="请输入你的问题..." /><button class="send-btn" @click="sendMessage">发送</button></view></view>
</template><script>export default {data() {return {userInput: '', // 用户输入的消息messages: [], // 存储消息记录chatHeight: 0, // 聊天框高度adviceList: [], // 存储恋爱建议socket: null // WebSocket 实例};},mounted() {this.adjustChatHeight(); // 调整聊天框高度},onShow() {setTimeout(() => {this.initWebSocket(); // 初始化 WebSocket}, 300)},// 页面隐藏时关闭 WebSocketonHide() {if (this.socket) {this.socket.close(); // 关闭 WebSocketconsole.log('WebSocket 连接已关闭');}},methods: {// 选中标签填充输入框并发送selectAdvice(content) {this.userInput = content;this.sendMessage();},// 动态计算聊天框高度adjustChatHeight() {const windowHeight = uni.getSystemInfoSync().windowHeight;this.chatHeight = windowHeight - 120; // 留出顶部和输入框的高度},// 初始化 WebSocket 连接initWebSocket() {this.socket = uni.connectSocket({url: 'ws://localhost:8080',success: () => {console.log('WebSocket 连接成功4');},fail: (err) => {console.error('WebSocket 连接失败:', err);}});// 监听 WebSocket 消息this.socket.onMessage((res) => {const data = JSON.parse(res.data);if (data.content === '[DONE]') {this.isStreaming = false; // 结束流式传输} else {// 逐字追加内容this.messages[this.messages.length - 1].content += data.content;this.$nextTick(() => {this.scrollToBottom();});}});// 监听 WebSocket 关闭this.socket.onClose(() => {console.log('WebSocket 连接已关闭');});},// 发送消息sendMessage() {if (this.userInput.trim() && !this.isStreaming) {this.addUserMessage(this.userInput); // 显示用户输入的消息this.isStreaming = true;// 通过 WebSocket 发送消息this.socket.send({data: JSON.stringify({message: this.userInput}),success: () => {console.log('消息发送成功');this.addBotMessage(''); // 初始化一个空消息用于逐步填充},fail: (err) => {console.error('消息发送失败:', err);}});this.userInput = ''; // 清空输入框}},// 添加用户消息addUserMessage(content) {this.messages.push({from: 'user',content: content});},// 添加机器人回复addBotMessage(content) {this.messages.push({from: 'bot',content: content});},// 滚动到底部scrollToBottom() {const query = uni.createSelectorQuery().in(this);query.select('.chat-box').boundingClientRect(res => {if (res) {uni.pageScrollTo({scrollTop: res.height,duration: 0});}}).exec();}}};
</script><style scoped>/* 页面容器 */.container {background-color: #fff;height: 100%;/* padding: 0 15px; *//* 加入左右边距 */}/* 顶部导航栏 */.navbar {background-color: #ff65a3;color: #fff;text-align: center;padding: 12px 0;font-size: 18px;font-weight: bold;}/* 聊天框 */.chat-box {padding: 10px;margin-bottom: 70px;/* 留出输入框的空间 */padding-left: 0;margin: 0 15px;width: auto;/* 去掉左边距，给消息更多空间 */padding-right: 0;/* 去掉右边距 */}/* 聊天消息 */.chat-item {margin: 10px 0;display: flex;}.user-message {text-align: right;background-color: #ff65a3;color: #fff;padding: 10px;border-radius: 10px;max-width: 80%;margin-left: auto;}.bot-message {text-align: left;background-color: #f2f2f2;color: #000;padding: 10px;border-radius: 10px;max-width: 80%;margin-right: auto;}/* 输入框 */.input-area {display: flex;position: fixed;bottom: 0;left: 0;width: 93%;padding: 10px;background-color: #fff;border-top: 1px solid #ddd;padding-left: 15px;/* 左边距 */padding-right: 15px;/* 右边距 */}.input-box {flex: 1;height: 40px;border-radius: 20px;border: 1px solid #ddd;padding: 0 15px;font-size: 16px;}.send-btn {background-color: #ff65a3;color: #fff;font-size: 16px;border: none;padding: 0 20px;border-radius: 20px;margin-left: 10px;}/* 恋爱指导标签 */.guidance-tags {display: flex;overflow-x: scroll;white-space: nowrap;padding: 10px;background-color: #ffe5f1;}.tag-item {display: inline-block;background-color: #ff65a3;color: white;padding: 8px 15px;margin-right: 10px;border-radius: 20px;font-size: 14px;cursor: pointer;}
</style>