基于.NET Core 6与Angular的SignalR客服-管理员聊天消息分离方案咨询

核心问题 #

当前所有消息未绑定到具体的会话（群组）标识，导致管理员端无法区分消息归属，最终出现不同会话消息混杂的情况。以下是分前后端的具体改造方案：

一、.NET Core SignalR后端改造 #

1. 给消息模型增加会话标识 #

定义包含群组ID的消息模型，让每条消息都能关联到对应的会话：

public class ChatMessage
{
    public string User { get; set; }
    public string Message { get; set; }
    public string GroupId { get; set; } // 关键字段：绑定消息所属的群组ID
}

2. 发送消息时指定目标群组并携带标识 #

在Hub的消息发送方法中，明确指定目标群组，并将群组ID嵌入消息内容：

public async Task SendMessageToGroup(string groupId, string user, string message)
{
    var chatMessage = new ChatMessage
    {
        User = user,
        Message = message,
        GroupId = groupId
    };
    // 仅向目标群组发送消息
    await Clients.Group(groupId).SendAsync("ReceiveMessage", chatMessage);
}

3. 确保群组ID的唯一性 #

创建客户会话时，用唯一标识（比如客户ID、客户ID+时间戳）作为群组ID，避免不同客户的群组冲突。例如：

// 客户发起聊天时创建群组
public async Task CreateCustomerGroup(string customerId)
{
    string groupId = $"Customer_{customerId}";
    await Groups.AddToGroupAsync(Context.ConnectionId, groupId);
    // 通知管理员有新会话
    await Clients.Others.SendAsync("NewCustomerSession", new { CustomerId = customerId, GroupId = groupId });
}

二、Angular前端改造 #

1. 按会话存储消息 #

维护一个以群组ID为键的消息映射对象，实现不同会话消息的隔离存储：

// 组件内定义
private messagesMap: { [groupId: string]: ChatMessage[] } = {};
public currentMessages: ChatMessage[] = [];
public currentGroupId: string | null = null;

2. 接收消息时分类存储 #

监听SignalR的消息接收事件，根据消息中的GroupId将消息存入对应会话的数组：

this.hubConnection.on('ReceiveMessage', (message: ChatMessage) => {
    // 如果该会话还没有消息数组，先初始化
    if (!this.messagesMap[message.groupId]) {
        this.messagesMap[message.groupId] = [];
    }
    // 将消息加入对应会话的数组
    this.messagesMap[message.groupId].push(message);
    // 如果当前正查看该会话，实时更新展示
    if (this.currentGroupId === message.groupId) {
        this.currentMessages = [...this.messagesMap[message.groupId]];
    }
});

3. 切换会话时加载对应消息 #

管理员点击会话列表中的客户时，传入对应的群组ID，加载该会话的所有消息：

loadCustomerConversation(groupId: string) {
    this.currentGroupId = groupId;
    // 取出对应会话的消息，无消息则显示空数组
    this.currentMessages = this.messagesMap[groupId] || [];
}

4. 发送消息时指定目标群组 #

发送消息时，传入当前选中的currentGroupId，确保消息发送到正确的会话：

sendMessage() {
    if (!this.currentGroupId || !this.messageInput.trim()) return;
    
    this.hubConnection.invoke(
        'SendMessageToGroup', 
        this.currentGroupId, 
        'Admin', 
        this.messageInput.trim()
    );
    this.messageInput = '';
}

三、额外优化建议 #

• 若需要持久化聊天记录，可在后端将消息存入数据库，切换会话时从数据库拉取历史消息，避免前端刷新后丢失记录。
• 管理员加入群组时，将群组ID与客户信息绑定存储在前端会话列表中，方便切换时快速获取群组ID。
• 处理管理员重连场景：重连后重新加入所有已参与的群组，并拉取各会话的最新消息。

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