前端接入 AI 大模型流式接口实践

三、核心逻辑实现

3.1 状态管理

使用 Vue 3 的 Composition API (setup) 来管理状态。我们需要维护消息列表、当前输入、加载状态以及用于取消请求的控制信号。

<script setup>
import { ref, reactive, onUnmounted } from 'vue';
import { historyList } from '@/api/system/chat';
import { fetchEventSource } from '@microsoft/fetch-event-source';
import { getToken } from '@/utils/auth';
import { md } from '@/utils/markdownSetup';

const baseURL = import.meta.env.VITE_APP_BASE_API;
const question = ref('');
const messages = ref([]);
const isSending = ref(false);
const controller = new AbortController();
const toolCallId = ref(''); // 用于维持会话上下文

// 获取历史对话记录
async function getHistoryList() {
  try {
    const response = await historyList({ pageNum: 1, pageSize: 10 });
    if (response.code === 200) {
      response.rows.forEach(item => {
        messages.value.push(
          { type: 'user-message', content: item.question, isHistory: true },
          { type: 'system-message', content: item.answer, isHistory: true }
        );
      });
    }
  } catch (error) {
    console.error('Failed to load history:', error);
  }
}

3.2 流式请求处理

这是整个功能的核心。利用 fetchEventSource 监听服务端推送的数据块。每次收到数据时，动态更新最后一条系统消息的内容，实现打字机效果。

function sendChatMessage() {
  if (!question.value.trim()) return;
  
  // 重置控制信号以支持新请求
  controller.abort();
  const signal = controller.signal;
  isSending.value = true;

  // 添加用户消息到列表
  messages.value.push({
    type: 'user-message',
    content: question.value,
    timestamp: new Date().toLocaleTimeString()
  });

  let systemReply = '';

  fetchEventSource(`${baseURL}/system/chat/getChat`, {
    method: 'POST',
    body: JSON.stringify({ 
      question: question.value, 
      sessionId: toolCallId.value 
    }),
    headers: {
      'Authorization': 'Bearer ' + getToken(),
      'Content-Type': 'application/json'
    },
    signal,
    onopen(response) {
      if (response.ok && response.headers.get('content-type')?.includes('text/event-stream')) {
        // 连接建立成功
      } else if (response.status >= 400) {
        throw new Error(`Request failed with status ${response.status}`);
      }
    },
    onmessage(event) {
      try {
        const data = JSON.parse(event.data);
        // 假设后端返回结构为 { output: { choices: [{ message: { content: "...", toolCallId: "..." }] } } }
        const content = data.output?.choices?.[0]?.message?.content || '';
        const callId = data.output?.choices?.[0]?.message?.toolCallId;

        systemReply += content;
        
        // 查找当前正在生成的系统消息并更新
        const lastSystemIndex = messages.value.lastIndexOf(
          m => m.type === 'system-message' && !m.complete && !m.isHistory
        );
        
        if (lastSystemIndex !== -1) {
          messages.value[lastSystemIndex].content = systemReply;
        } else {
          messages.value.push({
            type: 'system-message',
            content: systemReply,
            complete: false,
            timestamp: new Date().toLocaleTimeString()
          });
        }

        if (callId) toolCallId.value = callId;
        scrollToBottom();
      } catch (e) {
        console.warn('Parse error:', e);
      }
    },
    onclose() {
      // 标记消息完成
      const lastSystemIndex = messages.value.lastIndexOf(
        m => m.type === 'system-message' && !m.complete && !m.isHistory
      );
      if (lastSystemIndex !== -1) {
        messages.value[lastSystemIndex].complete = true;
      }
      isSending.value = false;
      question.value = '';
    },
    onerror(err) {
      console.error('Stream error:', err);
      isSending.value = false;
      // 这里可以添加重试逻辑或提示用户
    }
  });
}

3.3 辅助功能

自动滚动

为了保证用户始终看到最新内容，需要在消息更新后滚动到底部。

function scrollToBottom() {
  const container = document.querySelector('.conversation-container');
  if (container) {
    // 使用 requestAnimationFrame 确保 DOM 更新后再滚动
    requestAnimationFrame(() => {
      container.scrollTop = container.scrollHeight;
    });
  }
}

Markdown 渲染安全

直接渲染用户输入或后端返回的 HTML 存在 XSS 风险。务必使用经过白名单过滤的解析器。

const renderMarkdown = (content) => {
  // 确保 md 实例已配置安全选项，如禁用 script 标签
  return md.render(content);
};

四、样式与交互优化

良好的视觉体验对于聊天应用至关重要。以下是 CSS 样式的核心要点。

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
  background-color: #f5f7fa;
}

.conversation-container {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.message-wrapper {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.system-message {
  justify-content: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}

.user-message .message-content {
  background-color: #409eff;
  color: white;
}

.system-message .message-content {
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.avatar-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.input-area {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

/* 代码块样式 */
.hljs {
  background: #2d2d2d;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>

五、常见问题与最佳实践

5.1 请求中断处理

在网络不稳定或用户主动切换问题时，必须清理旧请求。AbortController 是关键。在组件卸载或发起新请求前调用 controller.abort()，防止内存泄漏和数据错乱。

5.2 长文本截断

如果大模型返回内容极长，前端应避免一次性渲染所有节点导致页面卡顿。可以考虑虚拟滚动（Virtual Scroll）技术，但这会增加复杂度。对于一般场景，分批渲染或按需加载是可行的折衷方案。

5.3 鉴权 Token 刷新

流式连接可能持续较长时间，期间 Access Token 可能过期。建议在 onopen 阶段检查 Token 有效性，若过期则先刷新 Token 再重试连接，或在 onerror 中捕获 401 状态码触发重登录流程。

5.4 防抖输入

在用户快速输入时，建议对发送按钮进行防抖处理，或者仅在用户停止输入一定时间后才允许发送，减少无效请求。

六、总结

通过上述步骤，我们成功实现了基于 Vue 的前端 AI 流式对话功能。关键点在于正确使用 fetchEventSource 处理 POST 流式数据，配合 AbortController 管理生命周期，并利用 Markdown 渲染增强可读性。这套方案不仅适用于 AI 助手，也可扩展至实时日志监控、在线协作编辑等场景。

后续可进一步优化之处包括：

1. 增加语音合成（TTS）支持，让机器朗读回复。
2. 实现多轮对话上下文记忆，提升回答连贯性。
3. 引入 WebSocket 替代 HTTP Stream，降低延迟。

开发者在实际落地时，应重点关注安全性与性能平衡，确保服务稳定可靠。