Agent人机交互系统前后端架构设计指南：从零搭建到生产环境部署

1次阅读

没有评论

共计 2712 个字符，预计需要花费 7 分钟才能阅读完成。

在传统的 Agent 人机交互系统中，通常会采用 HTTP 轮询的方式来实现前后端通信。这种方式虽然实现简单，但在实时性要求高的场景下存在明显的延迟问题：

高延迟 ：客户端需要不断向服务器发送请求，无法实时获取服务端状态变化，导致交互体验差
资源浪费 ：大量的空轮询请求会消耗服务器资源，增加不必要的网络开销
状态同步困难 ：在多设备场景下，难以保持会话状态的同步和一致性

针对实时通信需求，我们评估了几种主流方案：

优点：全双工通信、低延迟、节省带宽
缺点：需要额外处理连接保持和重连逻辑
适用场景：实时交互、高频数据更新

优点：高性能、支持多语言
缺点：浏览器支持有限、调试复杂
适用场景：内部服务通信

优点：简单易用、自动重连
缺点：仅支持服务端到客户端的单向通信
适用场景：实时通知、日志推送

最终我们选择 WebSocket+GraphQL 的混合架构，原因如下：

WebSocket 提供实时通信基础
GraphQL 解决接口灵活性问题
组合方案可以发挥各自优势

// 初始化 Apollo Client
const wsLink = new GraphQLWsLink(createClient({
  url: 'wss://your-domain.com/graphql',
  connectionParams: {authToken: localStorage.getItem('token')
  }
}));

const client = new ApolloClient({link: ApolloLink.from([authLink, wsLink]),
  cache: new InMemoryCache()});

// 订阅消息示例
const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageReceived {
    messageReceived {
      id
      content
      timestamp
    }
  }
`;

function ChatComponent() {const { data} = useSubscription(MESSAGE_SUBSCRIPTION);
  // 渲染逻辑...
}

import {WebSocketServer} from 'ws';
import {createServer} from 'http';
import {useServer} from 'graphql-ws/lib/use/ws';

const server = createServer();
const wsServer = new WebSocketServer({
  server,
  path: '/graphql'
});

useServer(
  {
    schema,
    onConnect: (ctx) => {
      // JWT 验证逻辑
      const token = ctx.connectionParams?.authToken;
      if (!verifyToken(token)) {throw new Error('Unauthorized');
      }
    }
  },
  wsServer
);

// JWT 验证中间件
function verifyToken(token: string): boolean {
  try {const decoded = jwt.verify(token, process.env.JWT_SECRET);
    return !!decoded.userId;
  } catch (err) {return false;}
}

// 生成 Token 示例
function generateToken(userId: string): string {
  return jwt.sign({ userId, exp: Math.floor(Date.now() / 1000) + 3600 },
    process.env.JWT_SECRET
  );
}

限制最大连接数 ：防止单个服务器过载
连接复用 ：对相同用户复用已有连接
优雅降级 ：在连接数接近上限时，自动切换为 HTTP 轮询

// 心跳检测实现
const HEARTBEAT_INTERVAL = 30000; // 30 秒
const HEARTBEAT_TIMEOUT = 10000; // 10 秒超时

function setupHeartbeat(ws: WebSocket) {const interval = setInterval(() => {if (ws.readyState === ws.OPEN) {ws.ping();
    }
  }, HEARTBEAT_INTERVAL);

  ws.on('pong', () => {// 更新最后活跃时间});
}

import {createClient} from 'redis';

const redisClient = createClient({url: 'redis://cluster-address'});

async function saveSession(sessionId: string, data: any) {
  await redisClient.set(`session:${sessionId}`,
    JSON.stringify(data),
    {EX: 3600} // 1 小时过期
  );
}

指数退避 ：初始 1 秒，最大 32 秒
最大重试次数 ：建议 5 -10 次
网络状态检测 ：在重试前检查网络状态

const MAX_RETRIES = 5;
const BASE_DELAY = 1000;

async function connectWithRetry(retries = 0) {
  try {await establishConnection();
  } catch (err) {if (retries >= MAX_RETRIES) throw err;
    const delay = Math.min(BASE_DELAY * 2 ** retries, 32000);
    await new Promise(resolve => setTimeout(resolve, delay));
    return connectWithRetry(retries + 1);
  }
}