chore:ai客服解析流式数据成功

This commit is contained in:
2025-12-12 10:48:26 +08:00
parent af23505a74
commit aa03abf651

View File

@@ -11,19 +11,12 @@ export default {
*/ */
async sendMessage(message, options = {}) { async sendMessage(message, options = {}) {
try { try {
// 获取AI配置
const aiConfig = store.getters.globalAIKefuConfig const aiConfig = store.getters.globalAIKefuConfig
// const new_conversationId = await this.generateConversationId()
// 构建Dify API请求参数
const params = { const params = {
url: '/api/kefu/chat', // 后端代理接口 url: '/api/kefu/chat',
data: { data: {
// conversation_id: options.conversationId ?? new_conversationId,
user_id: store.state.memberInfo?.id || 'anonymous', user_id: store.state.memberInfo?.id || 'anonymous',
stream: false, stream: false,
// Dify API参数
inputs: {}, inputs: {},
query: message, query: message,
response_mode: options.stream ? 'streaming' : 'blocking', response_mode: options.stream ? 'streaming' : 'blocking',
@@ -33,18 +26,14 @@ export default {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
} }
// ✅ 发送请求前打印日志,用于调试 console.log('Sending request to:', params.url);
console.log('Sending request to:', params.url); console.log('Request data:', params.data);
console.log('Request data:', params.data);
// 发送请求
const response = await http.sendRequest({ const response = await http.sendRequest({
...params, ...params,
async: false // 使用Promise方式 async: false
}) })
return this.handleResponse(response, options) return this.handleResponse(response, options)
} catch (error) { } catch (error) {
console.error('Dify API请求失败:', error) console.error('Dify API请求失败:', error)
throw new Error('AI服务暂时不可用请稍后重试') throw new Error('AI服务暂时不可用请稍后重试')
@@ -53,15 +42,10 @@ export default {
/** /**
* 流式消息处理 * 流式消息处理
* @param {string} message 用户消息
* @param {Function} onChunk 流式数据回调
* @param {Function} onComplete 完成回调
*/ */
async sendStreamMessage(message, onChunk, onComplete) { async sendStreamMessage(message, onChunk, onComplete) {
try { try {
// 使用HTTP流式请求 return this.sendHttpStream(message, onChunk, onComplete)
return this.sendHttpStream(message, onChunk, onComplete)
} catch (error) { } catch (error) {
console.error('流式消息发送失败:', error) console.error('流式消息发送失败:', error)
throw error throw error
@@ -70,20 +54,11 @@ export default {
/** /**
* EventSource 流式聊天 * EventSource 流式聊天
* @param {string} message 用户消息
* @param {string} conversationId 会话ID可选
* @param {Function} onMessage 消息回调
* @param {Function} onComplete 完成回调
* @param {Function} onError 错误回调
* @returns {EventSource|null} EventSource实例
*/ */
chatWithEventSource(message, conversationId = '', onMessage, onComplete, onError) { chatWithEventSource(message, conversationId = '', onMessage, onComplete, onError) {
// 关闭之前的连接
if (window.currentEventSource) { if (window.currentEventSource) {
window.currentEventSource.close(); window.currentEventSource.close();
} }
// 构建请求参数
const params = new URLSearchParams({ const params = new URLSearchParams({
uniacid: store.state.uniacid || '1', uniacid: store.state.uniacid || '1',
user_id: store.state.memberInfo?.id || '123456', user_id: store.state.memberInfo?.id || '123456',
@@ -91,34 +66,24 @@ export default {
conversation_id: conversationId || '', conversation_id: conversationId || '',
stream: 'true' stream: 'true'
}); });
const url = `/api/kefu/chat?${params.toString()}`; const url = `/api/kefu/chat?${params.toString()}`;
try { try {
const eventSource = new EventSource(url); const eventSource = new EventSource(url);
window.currentEventSource = eventSource; window.currentEventSource = eventSource;
let aiMessage = ''; let aiMessage = '';
// 监听消息事件
eventSource.addEventListener('message', (event) => { eventSource.addEventListener('message', (event) => {
try { try {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.event === 'message') { if (data.event === 'message') {
// 更新 AI 消息
aiMessage += data.answer || ''; aiMessage += data.answer || '';
if (onMessage) onMessage(data.answer || ''); if (onMessage) onMessage(data.answer || '');
} }
if (data.event === 'message_end') { if (data.event === 'message_end') {
// 对话完成
if (onComplete) onComplete({ if (onComplete) onComplete({
conversation_id: data.conversation_id, conversation_id: data.conversation_id,
message: aiMessage message: aiMessage
}); });
} }
if (data.conversation_id) { if (data.conversation_id) {
conversationId = data.conversation_id; conversationId = data.conversation_id;
} }
@@ -126,8 +91,6 @@ export default {
console.error('解析消息失败:', error); console.error('解析消息失败:', error);
} }
}); });
// 监听完成事件
eventSource.addEventListener('done', (event) => { eventSource.addEventListener('done', (event) => {
try { try {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
@@ -136,8 +99,6 @@ export default {
console.error('解析完成事件失败:', error); console.error('解析完成事件失败:', error);
} }
}); });
// 监听关闭事件
eventSource.addEventListener('close', (event) => { eventSource.addEventListener('close', (event) => {
try { try {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
@@ -147,16 +108,12 @@ export default {
} }
window.currentEventSource = null; window.currentEventSource = null;
}); });
// 监听错误事件
eventSource.addEventListener('error', (error) => { eventSource.addEventListener('error', (error) => {
console.error('EventSource错误:', error); console.error('EventSource错误:', error);
if (onError) onError({ error: 'EventSource连接错误' }); if (onError) onError({ error: 'EventSource连接错误' });
window.currentEventSource = null; window.currentEventSource = null;
}); });
return eventSource; return eventSource;
} catch (error) { } catch (error) {
console.error('创建EventSource失败:', error); console.error('创建EventSource失败:', error);
if (onError) onError({ error: error.message }); if (onError) onError({ error: error.message });
@@ -166,21 +123,13 @@ export default {
/** /**
* Fetch API 流式聊天 * Fetch API 流式聊天
* @param {string} message 用户消息
* @param {string} conversationId 会话ID可选
* @param {Function} onMessage 消息回调
* @param {Function} onComplete 完成回调
* @param {Function} onError 错误回调
*/ */
async chatWithFetchStream(message, conversationId = '', onMessage, onComplete, onError) { async chatWithFetchStream(message, conversationId = '', onMessage, onComplete, onError) {
try { try {
// 构建请求体 - 支持JSON和FormData两种格式
let requestData; let requestData;
let headers = { let headers = {
'Accept': 'text/event-stream' 'Accept': 'text/event-stream'
}; };
// 优先使用JSON格式
requestData = { requestData = {
uniacid: store.state.uniacid || '1', uniacid: store.state.uniacid || '1',
user_id: store.state.memberInfo?.id || '123456', user_id: store.state.memberInfo?.id || '123456',
@@ -191,45 +140,33 @@ export default {
response_mode: 'streaming', response_mode: 'streaming',
user: store.state.memberInfo?.id || '123456' user: store.state.memberInfo?.id || '123456'
}; };
headers['Content-Type'] = 'application/json'; headers['Content-Type'] = 'application/json';
const response = await fetch('/api/kefu/chat', { const response = await fetch('/api/kefu/chat', {
method: 'POST', method: 'POST',
headers: headers, headers: headers,
body: JSON.stringify(requestData) body: JSON.stringify(requestData)
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
if (!response.body) { if (!response.body) {
throw new Error('响应体不可用'); throw new Error('响应体不可用');
} }
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8'); const decoder = new TextDecoder('utf-8');
let buffer = ''; let buffer = '';
let aiMessage = ''; let aiMessage = '';
while (true) { while (true) {
const { done, value } = await reader.read(); const { done, value } = await reader.read();
if (done) break; if (done) break;
// 解码新接收的数据
buffer += decoder.decode(value, { stream: true }); buffer += decoder.decode(value, { stream: true });
// 处理缓冲的数据,按行分割
let lineEnd; let lineEnd;
while ((lineEnd = buffer.indexOf('\n')) !== -1) { while ((lineEnd = buffer.indexOf('\n')) !== -1) {
const line = buffer.substring(0, lineEnd); const line = buffer.substring(0, lineEnd);
buffer = buffer.substring(lineEnd + 1); buffer = buffer.substring(lineEnd + 1);
if (line.startsWith('data: ')) { if (line.startsWith('data: ')) {
try { try {
const data = JSON.parse(line.substring(6)); const data = JSON.parse(line.substring(6));
if (data.event === 'message' || data.event === 'text_message') { if (data.event === 'message' || data.event === 'text_message') {
const textContent = data.answer || data.text || ''; const textContent = data.answer || data.text || '';
aiMessage += textContent; aiMessage += textContent;
@@ -243,7 +180,6 @@ export default {
} else if (data.event === 'error' && onError) { } else if (data.event === 'error' && onError) {
onError(data); onError(data);
} }
if (data.conversation_id) { if (data.conversation_id) {
conversationId = data.conversation_id; conversationId = data.conversation_id;
} }
@@ -253,8 +189,6 @@ export default {
} }
} }
} }
// 处理剩余的缓冲数据
if (buffer.startsWith('data: ')) { if (buffer.startsWith('data: ')) {
try { try {
const data = JSON.parse(buffer.substring(6)); const data = JSON.parse(buffer.substring(6));
@@ -272,7 +206,6 @@ export default {
console.warn('解析剩余数据失败:', e); console.warn('解析剩余数据失败:', e);
} }
} }
} catch (error) { } catch (error) {
console.error('Fetch流式聊天请求失败:', error); console.error('Fetch流式聊天请求失败:', error);
if (onError) onError({ error: error.message }); if (onError) onError({ error: error.message });
@@ -280,17 +213,17 @@ export default {
}, },
/** /**
* HTTP流式请求现有方法保持不变 * HTTP流式请求修复conversationId未定义
*/ */
async sendHttpStream(message, onChunk, onComplete) { async sendHttpStream(message, onChunk, onComplete) {
const params = { const params = {
url: '/api/kefu/chat', url: '/api/kefu/chat',
data: { data: {
query: message, query: message,
conversation_id: '', // 可以在外部传入或保持为空让服务器生成 conversation_id: '',
user_id: store.state.memberInfo?.id || 'anonymous', user_id: store.state.memberInfo?.id || 'anonymous',
stream: true, stream: true,
uniacid: store.state.uniacid, // 保留必填参数 uniacid: store.state.uniacid,
inputs: {}, inputs: {},
response_mode: 'streaming', response_mode: 'streaming',
user: store.state.memberInfo?.id || 'anonymous' user: store.state.memberInfo?.id || 'anonymous'
@@ -299,107 +232,86 @@ export default {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
} }
// 使用fetch API进行流式请求H5环境
// #ifdef H5 // #ifdef H5
try { try {
const url = Config.baseUrl + `/api/kefu/chat`; const url = Config.baseUrl + `/api/kefu/chat`;
const response = await fetch(url, { const response = await fetch(url, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'text/event-stream', 'Accept': 'text/event-stream',
}, },
body: JSON.stringify({ body: JSON.stringify({
uniacid: store.state.uniacid || '1', uniacid: store.state.uniacid || '1',
inputs: {}, inputs: {},
query: message, query: message,
response_mode: 'streaming', response_mode: 'streaming',
user_id: store.state.memberInfo?.id || 'anonymous' user_id: store.state.memberInfo?.id || 'anonymous'
}) })
}) })
const reader = response.body.getReader() const reader = response.body.getReader()
const decoder = new TextDecoder() const decoder = new TextDecoder()
let content = '' let content = ''
let buffer = '' let buffer = ''
// 修复声明conversationId变量
let conversationId = '';
// 处理流式数据 function processStreamData(buffer, callback) {
function processStreamData(buffer, callback) { const lines = buffer.split('\n');
const lines = buffer.split('\n'); buffer = lines.pop() || '';
buffer = lines.pop() || ''; // 最后一行可能不完整 lines.forEach(line => {
line = line.trim();
lines.forEach(line => { if (!line) return;
line = line.trim(); if (line.startsWith('data:')) {
if (!line) return; const dataPart = line.slice(5).trim();
if (dataPart) {
// 解析 SSE 格式 try {
if (line.startsWith('data:')) { const data = JSON.parse(dataPart);
const dataPart = line.slice(5).trim(); if (data.event === 'message') {
if (dataPart) { callback(data.answer || '');
try { }
const data = JSON.parse(dataPart); if (data.conversation_id) {
conversationId = data.conversation_id;
if (data.event === 'message') { }
callback(data.answer || ''); if (data.event === 'message_end') {
} console.log('对话完成');
}
if (data.conversation_id) { } catch (error) {
conversationId = data.conversation_id; console.error('解析流式数据失败:', error);
} }
}
if (data.event === 'message_end') { }
// 对话完成 });
console.log('对话完成'); return buffer;
} }
} catch (error) {
console.error('解析流式数据失败:', error);
}
}
}
});
return buffer;
}
while (true) { while (true) {
const { done, value } = await reader.read() const { done, value } = await reader.read()
if (done) break if (done) break
buffer += decoder.decode(value, { stream: true });
buffer += decoder.decode(value, { stream: true }); buffer = processStreamData(buffer, (newData) => {
if (newData) {
// 处理接收到的数据 content += newData;
buffer = processStreamData(buffer, (newData) => { if (onChunk) onChunk(newData);
if (newData) { }
// 更新 AI 消息 });
content += newData;
if (onChunk) onChunk(newData);
}
});
} }
if (onComplete) onComplete(content) if (onComplete) onComplete(content)
return content return content
} catch (error) { } catch (error) {
console.error('HTTP流式请求失败:', error) console.error('HTTP流式请求失败:', error)
throw error throw error
} }
// #endif // #endif
// 非H5环境使用普通请求模拟流式效果
// #ifndef H5 // #ifndef H5
const response = await http.sendRequest({ const response = await http.sendRequest({
...params, ...params,
async: false async: false
}) })
// 模拟流式效果
if (response.success && response.data) { if (response.success && response.data) {
const content = response.data const content = response.data
const chunkSize = 3 const chunkSize = 3
let index = 0 let index = 0
const streamInterval = setInterval(() => { const streamInterval = setInterval(() => {
if (index < content.length) { if (index < content.length) {
const chunk = content.substring(index, index + chunkSize) const chunk = content.substring(index, index + chunkSize)
@@ -434,26 +346,22 @@ export default {
* 生成会话ID * 生成会话ID
*/ */
async generateConversationId() { async generateConversationId() {
// 构建Dify API请求参数 const params = {
const params = { url: '/api/kefu/createConversation',
url: '/api/kefu/createConversation', // 后端代理接口 data: {
data: { uniacid: store.state.uniacid,
uniacid: store.state.uniacid, user_id: store.state.memberInfo?.id || 'anonymous',
user_id: store.state.memberInfo?.id || 'anonymous', member_id: store.state.memberInfo?.id || '',
member_id: store.state.memberInfo?.id || '', },
}, header: {
header: { 'Content-Type': 'application/json'
'Content-Type': 'application/json'
}
} }
}
// 发送请求 const response = await http.sendRequest({
const response = await http.sendRequest({ ...params,
...params, async: false
async: false // 使用Promise方式 })
}) return this.handleResponse(response)
return this.handleResponse(response, options)
}, },
/** /**
@@ -461,20 +369,16 @@ export default {
*/ */
async getServiceStatus() { async getServiceStatus() {
try { try {
// 简单的健康检查
const response = await http.sendRequest({ const response = await http.sendRequest({
url: '/api/kefu/health', url: '/api/kefu/health',
async: false, async: false,
data: {} data: {}
}) })
const available = [response?.data?.status, response?.data?.components?.ai_service_config?.status].filter(item => item === 'healthy').length > 0; const available = [response?.data?.status, response?.data?.components?.ai_service_config?.status].filter(item => item === 'healthy').length > 0;
return { return {
available, available,
reason: available ? '服务正常' : '服务异常' reason: available ? '服务正常' : '服务异常'
} }
} catch (error) { } catch (error) {
return { return {
available: false, available: false,
@@ -493,12 +397,51 @@ export default {
data: { conversation_id: conversationId }, data: { conversation_id: conversationId },
async: false async: false
}) })
return response.success return response.success
} catch (error) { } catch (error) {
console.error('清除会话失败:', error) console.error('清除会话失败:', error)
return false return false
} }
},
/**
* 获取会话历史
*/
async getConversationHistory(params = {}) {
try {
if (!params.conversation_id) {
throw new Error('会话IDconversation_id是必填参数');
}
const requestData = {
uniacid: params.uniacid || store.state.uniacid || '1',
conversation_id: params.conversation_id,
user_id: params.user_id || store.state.memberInfo?.id || 'anonymous',
limit: params.limit || 20,
offset: params.offset || 0,
member_id: params.member_id || store.state.memberInfo?.id || '',
token: params.token || ''
};
const response = await http.sendRequest({
url: '/api/kefu/getHistory',
data: requestData,
header: {
'Content-Type': 'application/json'
},
async: false
});
if (response.code === 0 || response.success) {
return {
success: true,
data: response.data,
messages: response.data?.messages || [],
total: response.data?.total || 0,
page_info: response.data?.page_info || { limit: 20, offset: 0 }
};
} else {
throw new Error(response.message || '获取会话历史失败');
}
} catch (error) {
console.error('获取会话历史失败:', error);
throw new Error(error.message || '获取会话历史时发生错误,请稍后重试');
}
} }
} }