chore:H5和微信小程序都可以正常聊天

This commit is contained in:
2026-01-22 10:44:53 +08:00
parent 6f83bd8f4a
commit 8ac1ab06be
2 changed files with 133 additions and 71 deletions

View File

@@ -184,11 +184,8 @@ export default {
}) })
}); });
if (!response.ok) { if (!response.ok || !response.body) {
throw new Error(`HTTP ${response.status}`); throw new Error('无效响应');
}
if (!response.body) {
throw new Error('响应体不可用');
} }
const reader = response.body.getReader(); const reader = response.body.getReader();
@@ -197,50 +194,64 @@ export default {
let content = ''; let content = '';
let conversationId = ''; let conversationId = '';
function processBuffer(buf, callback) { while (true) {
const lines = buf.split('\n'); const { done, value } = await reader.read();
buf = lines.pop() || ''; if (done) break;
buffer += decoder.decode(value, { stream: true });
// 按行分割,保留不完整的最后一行
const lines = buffer.split('\n');
buffer = lines.pop() || ''; // 未完成的行留到下次
for (const line of lines) { for (const line of lines) {
const trimmed = line.trim(); const trimmed = line.trim();
if (trimmed.startsWith('data:')) { if (trimmed.startsWith('data:')) {
const jsonStr = trimmed.slice(5).trim(); try {
if (jsonStr) { const jsonStr = trimmed.slice(5).trim();
try { if (jsonStr && jsonStr !== '[DONE]') {
const data = JSON.parse(jsonStr); const data = JSON.parse(jsonStr);
if (data.event === 'message') { if (data.event === 'message') {
const text = data.answer || data.text || ''; const text = data.answer || data.text || '';
content += text; content += text;
callback(text); if (onChunk) onChunk(text);
} }
if (data.conversation_id) { if (data.conversation_id) {
conversationId = data.conversation_id; conversationId = data.conversation_id;
} }
if (data.event === 'message_end') { if (data.event === 'message_end') {
// 可选:提前完成 // 可提前结束
} }
} catch (e) {
console.warn('解析流数据失败:', e);
} }
} catch (e) {
console.warn('解析失败:', e, line);
} }
} }
} }
return buf;
} }
while (true) { // 处理最后残留的 buffer如果有
const { done, value } = await reader.read(); if (buffer.trim().startsWith('data:')) {
if (done) break; try {
buffer += decoder.decode(value, { stream: true }); const jsonStr = buffer.trim().slice(5);
buffer = processBuffer(buffer, (chunk) => { if (jsonStr) {
if (onChunk) onChunk(chunk); const data = JSON.parse(jsonStr);
}); if (data.event === 'message') {
const text = data.answer || '';
content += text;
if (onChunk) onChunk(text);
}
if (data.conversation_id) {
conversationId = data.conversation_id;
}
}
} catch (e) {
console.warn('最后 buffer 解析失败:', e);
}
} }
if (onComplete) { if (onComplete) {
onComplete({ onComplete({ content, conversation_id: conversationId });
content,
conversation_id: conversationId
});
} }
return { content, conversation_id: conversationId }; return { content, conversation_id: conversationId };
} catch (error) { } catch (error) {
@@ -248,11 +259,6 @@ export default {
throw error; throw error;
} }
// #endif // #endif
// #ifdef MP-WEIXIN
// 理论上不会执行到这里,但防止 fallback
return this.sendStreamMessage(message, onChunk, onComplete);
// #endif
}, },
/** /**

View File

@@ -810,44 +810,46 @@ export default {
}, },
// 发送流式消息 // 发送流式消息
async sendStreamMessage(userMessage) { // 发送流式消息(自动适配 H5 / 微信小程序)
// 创建流式消息对象 async sendStreamMessage(userMessage) {
const streamMessage = { // 创建流式消息对象
id: ++this.messageId, const streamMessage = {
role: 'ai', id: ++this.messageId,
type: 'text', role: 'ai',
content: '', type: 'text',
timestamp: Date.now(), content: '',
isStreaming: true timestamp: Date.now(),
} isStreaming: true
};
// 移除加载状态,添加流式消息 // 移除加载状态,添加流式消息
this.messages = this.messages.filter(msg => msg.type !== 'loading') this.messages = this.messages.filter(msg => msg.type !== 'loading');
this.shouldScrollToBottom = true this.shouldScrollToBottom = true;
this.messages.push(streamMessage) this.messages.push(streamMessage);
// 开始流式响应 try {
await aiService.sendStreamMessage( // #ifdef H5
// ===== H5: 使用 POST + 流式 (fetch readable stream) =====
await aiService.sendHttpStream(
userMessage, userMessage,
// 流式数据回调
(chunk) => { (chunk) => {
streamMessage.content += chunk // 实时更新内容
this.$forceUpdate() // 或 this.$nextTick() streamMessage.content += chunk;
this.$forceUpdate(); // 强制更新视图
}, },
// 完成回调:处理对象或字符串
(completeResult) => { (completeResult) => {
// 流结束回调
let finalContent = ''; let finalContent = '';
let convId = ''; let convId = '';
// 判断是对象还是字符串
if (typeof completeResult === 'string') { if (typeof completeResult === 'string') {
finalContent = completeResult; finalContent = completeResult;
} else { } else {
finalContent = completeResult.content || ''; finalContent = completeResult.content || '';
convId = completeResult.conversation_id || ''; // 👈 关键:提取 conversation_id convId = completeResult.conversation_id || '';
} }
// 更新消息状态 // 更新最终内容
streamMessage.isStreaming = false; streamMessage.isStreaming = false;
streamMessage.content = finalContent; streamMessage.content = finalContent;
@@ -857,18 +859,72 @@ export default {
{ id: 2, text: '没帮助', type: 'dislike' } { id: 2, text: '没帮助', type: 'dislike' }
]; ];
// 保存 conversation_id 到本地 // 保存会话 ID
if (convId) { if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId); aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
} }
// 触发事件 // 触发事件
this.$emit('ai-response', streamMessage); this.$emit('ai-response', streamMessage);
this.saveConversationIdToLocal(convId);
this.currentConversationId = convId;
} }
); );
}, // #endif
// #ifdef MP-WEIXIN
// ===== 微信小程序: 使用 WebSocket =====
await aiService.sendStreamMessage(
userMessage,
(chunk) => {
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate();
},
(completeResult) => {
// 流结束回调
let finalContent = completeResult?.content || '';
let convId = completeResult?.conversation_id || '';
// 更新最终内容
streamMessage.isStreaming = false;
streamMessage.content = finalContent;
// 添加操作按钮
streamMessage.actions = [
{ id: 1, text: '有帮助', type: 'like' },
{ id: 2, text: '没帮助', type: 'dislike' }
];
// 保存会话 ID
if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
}
// 触发事件
this.$emit('ai-response', streamMessage);
}
);
// #endif
} catch (error) {
console.error('流式请求失败:', error);
// 移除流式消息
this.messages = this.messages.filter(msg => msg.id !== streamMessage.id);
// 显示错误
const errorMsg = {
id: ++this.messageId,
role: 'ai',
type: 'text',
content: '抱歉,服务暂时不可用,请稍后重试。',
timestamp: Date.now(),
actions: [{ id: 1, text: '重试', type: 'retry' }]
};
this.messages.push(errorMsg);
this.$emit('ai-response', errorMsg);
}
},
generateAIResponse(userMessage) { generateAIResponse(userMessage) {
const responses = { const responses = {
'你好': '您好我是AI智能客服很高兴为您服务有什么可以帮助您的吗', '你好': '您好我是AI智能客服很高兴为您服务有什么可以帮助您的吗',