AI群演请就位—个人博客（七）

2301_82171651

226人浏览 · 2026-06-03 22:06:00

2301_82171651 · 2026-06-03 22:06:00 发布

本项目是一个基于多智能体系统的AI驱动互动叙事游戏，后端使用Flask + SocketIO实现多Agent协作，前端需要对接后端API实现实时对话、游戏状态管理和角色互动功能。我负责前端Vue项目的完整开发，包括Vuex状态管理、WebSocket实时通信、API接口对接、UI组件开发等。这周我的主要工作内容是在我之前完善的前端框架的基础上，实现与我队友完成的后端部分进行对接。

一、核心功能实现

API接口封装

HTTP接口处理：我封装了统一的axios实例，配置了请求拦截器和响应拦截器。请求拦截器中自动添加sessionId到请求头，这样后续的所有请求都能识别当前游戏会话。响应拦截器统一处理错误码和异常情况，让业务代码更加简洁。

跨域问题解决：在对接过程中遇到了CORS跨域问题，这是因为前端的请求头中包含了自定义字段X-Session-Id，而后端的CORS配置中没有允许这个头。我协调后端同学在Flask的CORS配置中添加了该请求头的白名单，同时前端也做好了兼容处理。

难点：后端存在CORS跨域问题，需要配置请求头白名单。

// src/api/index.js
import axios from 'axios'

const API_BASE_URL = process.env.VUE_APP_API_URL || 'http://localhost:5000'

const request = axios.create({
  baseURL: API_BASE_URL,
  timeout: 30000,
  headers: { 'Content-Type': 'application/json' }
})

// 请求拦截器 - 添加sessionId
request.interceptors.request.use(config => {
  const sessionId = localStorage.getItem('sessionId')
  if (sessionId) {
    config.headers['X-Session-Id'] = sessionId
  }
  return config
})

// 游戏初始化API
export const initGameSession = (data) => {
  return request.post('/api/chat/init', data)
}

// 发送消息API（HTTP备用）
export const sendMessage = (data) => {
  return request.post('/api/chat/send', data)
}

WebSocket实时通信管理器

连接管理：当用户进入游戏页面后，前端首先调用初始化接口获取sessionId，然后用这个sessionId建立WebSocket连接。连接成功后，后端会返回确认消息，前端更新连接状态指示器。

消息收发：用户输入消息后，前端通过WebSocket发送user_message事件，携带sessionId和消息内容。后端处理后会通过message事件返回AI的回复，前端监听该事件并将消息添加到对话列表中。

断线重连机制：网络不稳定可能导致WebSocket断开。我实现了自动重连机制，当连接断开时，前端会尝试重新连接，并保留原有的sessionId，确保游戏进度不会丢失。同时界面上显示连接状态指示器，让用户了解当前网络状况。

难点：WebSocket连接超时、断线重连、事件管理。

// src/api/websocket.js
import { io } from 'socket.io-client'

class WebSocketManager {
  constructor() {
    this.socket = null
    this.sessionId = null
    this.listeners = new Map()
    this.connectionStatus = 'disconnected'
  }

  connect(sessionId) {
    this.socket = io(WS_BASE_URL, {
      transports: ['polling', 'websocket'],
      reconnection: true,
      reconnectionAttempts: 5,
      timeout: 20000
    })
    
    this.socket.on('connect', () => {
      console.log('WebSocket connected')
      this.connectionStatus = 'connected'
    })
    
    this.socket.on('message', (data) => {
      this._emit('message', data)
    })
  }

  sendMessage(content) {
    this.socket.emit('user_message', {
      sessionId: this.sessionId,
      content
    })
  }
}

export const wsManager = new WebSocketManager()

Vuex状态管理设计

游戏的状态非常复杂，我将其划分为以下几个维度：

会话状态：包括sessionId、连接状态等，用于标识当前游戏会话。

玩家状态：包括玩家名称、选择的角色、属性值（生命值、心厄值）、背包物品、已知线索等。

世界状态：包括当前场景、场景描述、游戏回合数、任务标记等。

NPC状态：包括所有NPC的信任值、怀疑值、情绪状态等。

对话历史：存储所有用户和AI的消息记录。

难点：游戏状态复杂，需要合理划分模块。

// src/store/index.js
export default new Vuex.Store({
  state: {
    sessionId: null,           // 游戏会话ID
    player: {                  // 玩家信息
      name: '',
      avatar: '👑',
      selectedCharacter: 'hua_jianke'
    },
    gameState: {               // 游戏状态
      world: { location: '渡厄峰', scene: '', tick: 0 },
      player: { inventory: [], known_clues: [], stats: {} },
      npcs: {}
    },
    messages: [],              // 对话历史
    quests: [],                // 任务列表
    storyProgress: 0,          // 剧情进度
    isLoading: false,
    isTyping: false
  },
  
  mutations: {
    SET_GAME_STATE(state, gameState) {
      state.gameState = { ...state.gameState, ...gameState }
    },
    ADD_MESSAGE(state, message) {
      state.messages.push({ id: Date.now(), ...message })
    }
  },
  
  actions: {
    async initGame({ commit }, { selectedCharacter }) {
      const data = await initGameSession({ selected_character: selectedCharacter })
      commit('SET_SESSION_ID', data.sessionId)
      commit('SET_GAME_STATE', data.initial_state)
    },
    
    async sendMessage({ commit, state }, content) {
      const data = await sendMessage({ sessionId: state.sessionId, message: content })
      // 处理响应...
    }
  }
})

二、遇到的问题与解决方案

无限递归调用问题

问题现象：页面加载后控制台报错“Maximum call stack size exceeded”，导致页面白屏。

问题分析：经过调试发现，mounted钩子中调用了initGame方法，而initGame方法内部又触发了某些操作导致自身被重复调用。这是因为我将组件方法命名为initGame，同时Vuex的action也叫initGame，两者发生了冲突。

解决方案：我将组件中的方法重命名为initGameSession，避免与Vuex action同名。同时添加了isInitialized标志，防止重复初始化。这个问题的教训是：在Vue组件中使用mapActions时，要注意避免方法名冲突。

WebSocket连接超时

问题现象：WebSocket频繁连接超时，控制台不断输出timeout错误。

问题分析：经过排查，原因是后端的SocketIO配置不够完善，且前端超时设置过短。此外，在某些网络环境下，WebSocket连接可能被防火墙阻挡。

解决方案：我采取了多层次的处理。首先协调后端同学安装eventlet库并调整async_mode配置。其次增加前端的超时时间到20秒，并调整传输协议顺序（先使用polling再升级到websocket）。最后实现了HTTP备用模式，当WebSocket连接失败时自动降级使用HTTP API，确保游戏可以正常运行。