AI-Agent

10.3 WebSocket 客户端

连接管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
connect(url: string): void {
  this.ws = new WebSocket(url);
  
  this.ws.onopen = () => {
    this.updateStatus('connected');
  };
  
  this.ws.onmessage = (e) => {
    const message = JSON.parse(e.data);
    this.handleMessage(message);
  };
  
  this.ws.onclose = () => {
    this.updateStatus('disconnected');
    // 尝试重连
    setTimeout(() => this.connect(url), 2000);
  };
}

消息处理

1
2
3
4
5
6
7
8
9
10
11
12
13
handleMessage(message: ServerMessage): void {
  switch (message.type) {
    case 'chat.streaming.chunk':
      this.appendMessage(message.chunk);
      break;
    case 'chat.tool.call':
      this.showToolCall(message);
      break;
    case 'session.created':
      this.sessionCreated(message);
      break;
  }
}

导航

上一篇： 10.2 前端架构设计

下一篇： 10.4 UI/UX 设计