咨询：为Microsoft Bot Framework从零构建自定义Web Chat的指南

Blazor 构建指南 #

1. 基础架构与核心模型 #

• 根据场景选择Blazor Server（实时性高、后端集成便捷）或Blazor WebAssembly（纯前端部署），创建空项目。
• 定义核心数据模型，比如ChatMessage类，包含消息基本属性：

  public class ChatMessage
  {
      public string Id { get; set; } = Guid.NewGuid().ToString();
      public string Sender { get; set; } = string.Empty;
      public string Content { get; set; } = string.Empty;
      public DateTime Timestamp { get; set; } = DateTime.Now;
  }
  

2. 实时通信实现（基于SignalR） #

• 后端创建SignalR Hub处理消息收发：

  public class ChatHub : Hub
  {
      public async Task SendMessage(string user, string message)
      {
          // 可在此处添加消息持久化逻辑（如写入数据库）
          await Clients.All.SendAsync("ReceiveMessage", user, message);
      }
  }
  

• 前端Blazor组件中建立连接并实现消息交互：

  @inject NavigationManager NavManager
  @implements IAsyncDisposable
  
  <div class="chat-box">
      <div class="input-area">
          <input @bind="userName" placeholder="你的昵称" />
          <input @bind="inputMsg" placeholder="输入消息" @onkeyup="(e) => { if (e.Key == 'Enter') SendMsg(); }" />
          <button @onclick="SendMsg">发送</button>
      </div>
      <div class="message-list">
          @foreach (var msg in messageList)
          {
              <div class="message-item">
                  <span class="sender">@msg.Sender</span>
                  <span class="content">@msg.Content</span>
                  <span class="time">@msg.Timestamp.ToString("HH:mm")</span>
              </div>
          }
      </div>
  </div>
  
  @code {
      private HubConnection? hubConn;
      private List<ChatMessage> messageList = new();
      private string userName = "";
      private string inputMsg = "";
  
      protected override async Task OnInitializedAsync()
      {
          hubConn = new HubConnectionBuilder()
              .WithUrl(NavManager.ToAbsoluteUri("/chathub"))
              .Build();
  
          hubConn.On<string, string>("ReceiveMessage", (user, msg) =>
          {
              messageList.Add(new ChatMessage { Sender = user, Content = msg });
              StateHasChanged();
          });
  
          await hubConn.StartAsync();
      }
  
      private async Task SendMsg()
      {
          if (!string.IsNullOrWhiteSpace(userName) && !string.IsNullOrWhiteSpace(inputMsg) && hubConn != null)
          {
              await hubConn.SendAsync("SendMessage", userName, inputMsg);
              inputMsg = "";
          }
      }
  
      public async ValueTask DisposeAsync()
      {
          if (hubConn != null) await hubConn.DisposeAsync();
      }
  }
  

3. 功能扩展与UI定制 #

• 添加消息历史：后端编写API从数据库读取历史消息，前端初始化时调用API加载。
• 自定义样式：用CSS区分己方和对方消息气泡，添加表情、文件上传功能时扩展ChatMessage模型增加MessageType字段。

Angular 构建指南 #

1. 基础项目与模型定义 #

• 新建Angular项目，生成chat组件和chat-message子组件。
• 定义ChatMessage接口：

  export interface ChatMessage {
    id: string;
    sender: string;
    content: string;
    timestamp: Date;
  }
  

2. 实时通信集成（基于SignalR） #

• 安装SignalR依赖：npm install @microsoft/signalr
• 在chat.component.ts中实现连接与消息交互：

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
  import { ChatMessage } from './chat-message.model';
  
  @Component({
    selector: 'app-chat',
    templateUrl: './chat.component.html',
    styleUrls: ['./chat.component.css']
  })
  export class ChatComponent implements OnInit, OnDestroy {
    private hubConn!: HubConnection;
    messages: ChatMessage[] = [];
    userName = '';
    inputMsg = '';
  
    ngOnInit(): void {
      this.hubConn = new HubConnectionBuilder()
        .withUrl('/chathub')
        .build();
  
      this.hubConn.on('ReceiveMessage', (user: string, msg: string) => {
        this.messages.push({
          id: Date.now().toString(),
          sender: user,
          content: msg,
          timestamp: new Date()
        });
      });
  
      this.hubConn.start().catch(err => console.error(err));
    }
  
    sendMessage(): void {
      if (this.userName && this.inputMsg) {
        this.hubConn.invoke('SendMessage', this.userName, this.inputMsg)
          .catch(err => console.error(err));
        this.inputMsg = '';
      }
    }
  
    ngOnDestroy(): void {
      this.hubConn.stop().catch(err => console.error(err));
    }
  }
  

• 模板文件chat.component.html：

  <div class="chat-container">
    <div class="input-group">
      <input [(ngModel)]="userName" placeholder="你的昵称" />
      <input [(ngModel)]="inputMsg" placeholder="输入消息" (keyup.enter)="sendMessage()" />
      <button (click)="sendMessage()">发送</button>
    </div>
    <div class="message-list">
      <div *ngFor="let msg of messages" class="message-item">
        <strong>{{ msg.sender }}:</strong>
        <span>{{ msg.content }}</span>
        <small>{{ msg.timestamp | date:'HH:mm' }}</small>
      </div>
    </div>
  </div>
  

3. 功能优化与扩展 #

• 消息状态管理：后端维护消息已读/未读状态，前端接收状态更新并展示。
• 滚动到最新消息：使用ViewChild获取消息列表DOM元素，发送或接收消息后自动滚动到底部。
• 样式定制：用Flex布局实现聊天窗口，通过CSS类区分发送方和接收方消息气泡。

内容的提问来源于stack exchange，提问作者Shak Ham