基于JavaScript（Web）与C#后端构建可扩容群聊实时聊天系统方案咨询

一、SignalR后端核心配置（ASP.NET环境） #

首先在你的ASP.NET项目中创建SignalR Hub类，这是处理实时通信的核心：

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // 用户加入群组
    public async Task JoinGroup(string groupId, string username)
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, groupId);
        // 通知群组内其他成员有人加入
        await Clients.Group(groupId).SendAsync("UserJoined", username);
    }

    // 用户退出群组
    public async Task LeaveGroup(string groupId, string username)
    {
        await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupId);
        await Clients.Group(groupId).SendAsync("UserLeft", username);
    }

    // 发送群消息
    public async Task SendMessageToGroup(string groupId, string username, string message)
    {
        // 这里可以先把消息存入数据库（后续离线消息用）
        // await _messageRepository.SaveMessage(groupId, username, message);
        await Clients.Group(groupId).SendAsync("ReceiveMessage", username, message);
    }
}

然后在Program.cs中注册SignalR服务并配置路由：

var builder = WebApplication.CreateBuilder(args);

// 添加SignalR服务
builder.Services.AddSignalR();
// 如果后续要做离线消息，添加EF Core服务（示例用SQL Server）
// builder.Services.AddDbContext<ChatDbContext>(options =>
//     options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

var app = builder.Build();

// 配置SignalR路由
app.MapHub<ChatHub>("/chathub");

app.Run();

二、群聊功能实现 #

1. 用户群组管理

   • 前端在用户进入聊天页面/切换群组时，调用JoinGroup方法传入群组ID和用户名；离开页面时调用LeaveGroup。
   • 后端通过Groups类管理用户与群组的关联，确保消息只推送给对应群组的在线用户。

2. 消息广播逻辑
   前端调用SendMessageToGroup发送消息后，后端Hub会把消息广播给群组内所有在线用户，前端通过监听ReceiveMessage事件渲染消息到页面：

   // 前端监听消息接收事件
   connection.on("ReceiveMessage", (username, message) => {
       const messageElement = document.createElement("div");
       messageElement.textContent = `${username}: ${message}`;
       document.getElementById("messagesList").appendChild(messageElement);
   });
   
   // 前端发送消息
   document.getElementById("sendButton").addEventListener("click", async () => {
       const groupId = document.getElementById("groupIdInput").value;
       const username = document.getElementById("usernameInput").value;
       const message = document.getElementById("messageInput").value;
       await connection.invoke("SendMessageToGroup", groupId, username, message);
       document.getElementById("messageInput").value = "";
   });
   

三、消息通知处理 #

1. 实时在线通知 #

• 针对@特定用户的场景，可以在SendMessageToGroup方法中解析消息中的@用户名，单独推送给目标用户：

  public async Task SendMessageToGroup(string groupId, string username, string message)
  {
      // 解析@用户（示例简单处理，实际可正则匹配）
      var mentionedUsers = ExtractMentionedUsers(message);
      foreach(var user in mentionedUsers)
      {
          // 假设你有存储用户连接ID的逻辑，根据用户名获取连接ID
          var userConnectionId = GetUserConnectionId(user);
          if(!string.IsNullOrEmpty(userConnectionId))
          {
              await Clients.Client(userConnectionId).SendAsync("MentionNotification", username, message);
          }
      }
      await Clients.Group(groupId).SendAsync("ReceiveMessage", username, message);
  }
  

2. 离线消息存储 #

• 创建消息实体类和数据库上下文，存储所有发送的消息：

  public class ChatMessage
  {
      public int Id { get; set; }
      public string GroupId { get; set; }
      public string SenderUsername { get; set; }
      public string Content { get; set; }
      public DateTime SendTime { get; set; } = DateTime.UtcNow;
      public bool IsRead { get; set; } = false;
  }
  
  public class ChatDbContext : DbContext
  {
      public ChatDbContext(DbContextOptions<ChatDbContext> options) : base(options) { }
      public DbSet<ChatMessage> ChatMessages { get; set; }
  }
  

• 用户上线时，调用Hub方法拉取未读消息：

  public async Task<List<ChatMessage>> GetUnreadMessages(string groupId, string username)
  {
      var messages = await _dbContext.ChatMessages
          .Where(m => m.GroupId == groupId && !m.IsRead)
          .ToListAsync();
      // 标记为已读
      messages.ForEach(m => m.IsRead = true);
      await _dbContext.SaveChangesAsync();
      return messages;
  }
  

四、适配用户增长的优化点 #

1. 数据库层面

   • 给ChatMessage表的GroupId和SendTime字段添加索引，加快查询速度。
   • 当消息量过大时，按月份对消息表进行分表，比如ChatMessages_202409、ChatMessages_202410。
   • 用Redis缓存热门群组的最近100条消息，减少数据库查询压力。

2. SignalR水平扩展
   当用户量增加需要多服务器部署时，用Redis作为SignalR的背板，共享连接状态：

   // Program.cs中配置Redis背板
   builder.Services.AddSignalR()
       .AddStackExchangeRedis("localhost:6379", options =>
       {
           options.Configuration.ChannelPrefix = "signalr-chat";
       });
   

3. 连接管理

   • 在Hub中记录用户ID与连接ID的映射（存储到Redis或内存），方便针对特定用户推送消息。
   • 设置连接超时时间，在Program.cs中配置：

     builder.Services.AddSignalR(options =>
     {
         options.ClientTimeoutInterval = TimeSpan.FromMinutes(5);
         options.KeepAliveInterval = TimeSpan.FromMinutes(2);
     });
     

五、前端关键注意事项 #

• 连接重连：SignalR默认会自动重连，但可以手动监听连接状态，提示用户：

  connection.onclose(async () => {
      alert("连接断开，正在尝试重连...");
      await connection.start();
  });
  

• 历史消息加载：用户进入群组时，先调用后端GetUnreadMessages或GetGroupHistory方法，加载历史消息并渲染。
• 性能优化：限制页面渲染的消息数量（比如只显示最近200条），旧消息可以通过分页加载。

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