ASP.NET MVC+SignalR WhatsApp聊天：向同一浏览器所有活跃标签推送消息

核心思路是给同一浏览器的所有连接绑定一个唯一浏览器标识，服务器端维护该标识与所有对应ConnectionID的映射，发送消息时通过这个标识找到所有关联的连接，实现同一浏览器多标签页同步接收消息。

步骤1：客户端生成并存储浏览器唯一ID #

利用localStorage存储一个全局唯一ID，确保同一浏览器的所有标签页共用这个ID：

// 获取或生成浏览器唯一标识
let browserId = localStorage.getItem('browserId');
if (!browserId) {
    // 生成UUID作为浏览器ID
    browserId = self.crypto.randomUUID();
    localStorage.setItem('browserId', browserId);
}

// 初始化SignalR连接，携带浏览器ID
const connection = new signalR.HubConnectionBuilder()
    .withUrl('/chatHub', {
        queryParams: { browserId: browserId }
    })
    .build();

// 连接成功后主动注册浏览器ID（增强可靠性）
connection.start().then(() => {
    connection.invoke('RegisterBrowserId', browserId);
}).catch(err => console.error(err.toString()));

// 消息接收逻辑保持不变
connection.on('ReceiveMessage', (sender, message) => {
    // 页面展示消息的逻辑
    console.log(`${sender}: ${message}`);
});

步骤2：服务器端维护浏览器ID与ConnectionID的映射 #

使用并发安全的字典存储浏览器ID到ConnectionID集合的关联，同时处理连接的建立与断开清理：

using Microsoft.AspNetCore.SignalR;
using System.Collections.Concurrent;

public class ChatHub : Hub
{
    // 并发安全字典：浏览器ID -> 该浏览器下所有活跃连接ID集合
    private static readonly ConcurrentDictionary<string, HashSet<string>> _browserConnectionMap = new();

    public override async Task OnConnectedAsync()
    {
        // 从请求参数中获取浏览器ID
        if (Context.GetHttpContext().Request.Query.TryGetValue("browserId", out var browserId))
        {
            var browserIdStr = browserId.ToString();
            // 将当前连接ID添加到对应浏览器的连接集合
            _browserConnectionMap.AddOrUpdate(
                browserIdStr,
                new HashSet<string> { Context.ConnectionId },
                (key, existingSet) => {
                    existingSet.Add(Context.ConnectionId);
                    return existingSet;
                });
        }
        await base.OnConnectedAsync();
    }

    public override async Task OnDisconnectedAsync(Exception exception)
    {
        // 移除断开的连接ID，并清理空集合
        foreach (var kvp in _browserConnectionMap)
        {
            if (kvp.Value.Remove(Context.ConnectionId))
            {
                if (kvp.Value.Count == 0)
                {
                    _browserConnectionMap.TryRemove(kvp.Key, out _);
                }
                break;
            }
        }
        await base.OnDisconnectedAsync(exception);
    }

    // 客户端主动注册浏览器ID的方法
    public void RegisterBrowserId(string browserId)
    {
        _browserConnectionMap.AddOrUpdate(
            browserId,
            new HashSet<string> { Context.ConnectionId },
            (key, existingSet) => {
                existingSet.Add(Context.ConnectionId);
                return existingSet;
            });
    }

    // 向指定浏览器的所有标签页发送消息
    public async Task SendToBrowser(string browserId, string sender, string message)
    {
        if (_browserConnectionMap.TryGetValue(browserId, out var connectionIds))
        {
            foreach (var connectionId in connectionIds)
            {
                await Clients.Client(connectionId).SendAsync("ReceiveMessage", sender, message);
            }
        }
    }
}

步骤3：业务逻辑中发送消息到指定浏览器 #

处理WhatsApp回复时，通过用户关联的浏览器ID（需在用户登录/绑定阶段存储该关联关系），调用SignalR服务发送消息：

// 假设已从业务逻辑中获取到目标用户对应的browserId
string targetBrowserId = "用户关联的浏览器ID";
string replyMessage = textMessage[0].Text.Body;

// 获取Hub上下文并发送消息
if (_browserConnectionMap.TryGetValue(targetBrowserId, out var connectionIds))
{
    foreach (var connectionId in connectionIds)
    {
        await _hubContext.Clients.Client(connectionId).SendAsync("ReceiveMessage", "Message:", replyMessage);
    }
}

注意事项 #

• 浏览器隐私模式下localStorage是隔离的，每个隐私窗口会生成独立的浏览器ID，符合隐私设计预期。
• 确保服务器端字典的并发安全性，避免多线程操作导致的异常。
• 若需跨浏览器同步消息，可将浏览器ID与用户ID关联存储到数据库，扩展为按用户维度广播。

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