AI-Agent

10.2 前端架构设计

页面结构

1
2
3
4
5
<div class="app">
  <aside class="sidebar">会话列表</aside>
  <main class="chat-area">聊天区域</main>
  <aside class="tools-panel">工具面板</aside>
</div>

客户端类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class WebAgentClient {
  private ws: WebSocket;
  private currentSession: string;
  
  connect(url: string): void {
    this.ws = new WebSocket(url);
    this.ws.onmessage = (e) => this.handleMessage(e.data);
  }
  
  sendMessage(content: string): void {
    this.ws.send(JSON.stringify({
      type: 'chat.send',
      sessionId: this.currentSession,
      content
    }));
  }
}

导航

上一篇： 10.1 HTTP 静态服务

下一篇： 10.3 WebSocket 客户端