基于ASP.NET Core SignalR实现实时消息提醒与聊天功能

基于ASP.NET Core SignalR实现实时消息提醒与聊天功能，包含服务端架构、客户端交互及关键优化点：

---

一、服务端实现（ASP.NET Core 7+）

1. 消息模型定义

public class ChatMessage
{
    public string SenderId { get; set; }
    public string ReceiverId { get; set; }
    public string Content { get; set; }
    public DateTime Timestamp { get; set; } = DateTime.UtcNow;
    public MessageStatus Status { get; set; } = MessageStatus.Sent;
}

public enum MessageStatus
{
    Sent,
    Delivered,
    Read
}

2. SignalR Hub核心实现

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

public class ChatHub : Hub
{
    private static readonly ConcurrentDictionary<string, List<string>> _connections = 
        new ConcurrentDictionary<string, List<string>>();

    // 用户连接管理
    public override async Task OnConnectedAsync()
    {
        var userId = Context.UserIdentifier;
        if (!_connections.TryGetValue(userId, out var connections))
        {
            connections = new List<string>();
            _connections[userId] = connections;
        }
        connections.Add(Context.ConnectionId);
        
        // 通知好友在线状态
        await UpdateUserStatus(userId, true);
        await base.OnConnectedAsync();
    }

    public override async Task OnDisconnectedAsync(Exception? exception)
    {
        if (_connections.TryRemove(Context.UserIdentifier, out var connections))
        {
            await UpdateUserStatus(Context.UserIdentifier, false);
            connections.Remove(Context.ConnectionId);
        }
        await base.OnDisconnectedAsync(exception);
    }

    // 发送消息
    public async Task SendMessage(string receiverId, string content)
    {
        var senderId = Context.UserIdentifier;
        var message = new ChatMessage
        {
            SenderId = senderId,
            ReceiverId = receiverId,
            Content = content
        };

        // 存储消息（可选）
        await SaveMessageToDb(message);

        // 推送消息
        await Clients.Group($"user_{receiverId}").SendAsync(
            "ReceiveMessage", 
            senderId, 
            content, 
            message.Timestamp
        );

        // 标记已送达
        await Clients.Caller.SendAsync("MessageDelivered", message.Id);
    }

    // 标记已读
    public async Task MarkAsRead(int messageId)
    {
        // 更新数据库状态
        var message = await GetMessageById(messageId);
        if (message?.ReceiverId == Context.UserIdentifier)
        {
            message.Status = MessageStatus.Read;
            await SaveMessageToDb(message);

            // 通知发送者
            await Clients.Group($"user_{message.SenderId}").SendAsync("MessageRead", messageId);
        }
    }

    private static void UpdateUserStatus(string userId, bool isOnline)
    {
        // 更新全局状态缓存
        // 触发好友状态变更通知
        Clients.All.SendAsync("UserStatusChanged", userId, isOnline);
    }
}

---

二、客户端实现（Web前端）

1. HTML结构

<div id="chat-container">
    <div id="online-users"></div>
    <div id="message-list"></div>
    <input type="text" id="receiverId" placeholder="接收者ID">
    <input type="text" id="message-input">
    <button id="send-btn">发送</button>
</div>

2. JavaScript连接与事件处理

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .withAutomaticReconnect()
    .build();

// 接收消息
connection.on("ReceiveMessage", (senderId, content, timestamp) => {
    const msgElement = document.createElement("div");
    msgElement.innerHTML = `
        <strong>${senderId}</strong> (${new Date(timestamp).toLocaleTimeString()}):
        <span>${content}</span>
    `;
    document.getElementById("message-list").appendChild(msgElement);
});

// 用户状态更新
connection.on("UserStatusChanged", (userId, isOnline) => {
    const statusElement = document.getElementById(`user-${userId}-status`);
    statusElement.textContent = isOnline ? "在线" : "离线";
});

// 连接建立
connection.start().then(() => {
    console.log("已连接到SignalR服务");
}).catch(err => console.error(err.toString()));

// 发送消息
document.getElementById("send-btn").addEventListener("click", async () => {
    const receiverId = document.getElementById("receiverId").value;
    const content = document.getElementById("message-input").value;
    await connection.invoke("SendMessage", receiverId, content);
});

---

三、关键功能扩展

1. 消息持久化（Entity Framework Core）

public class AppDbContext : DbContext
{
    public DbSet<ChatMessage> Messages { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<ChatMessage>()
            .HasIndex(m => new { m.SenderId, m.ReceiverId })
            .IsUnique(false);
    }
}

// 保存消息到数据库
public async Task SaveMessageToDb(ChatMessage message)
{
    using var dbContext = new AppDbContext();
    dbContext.Messages.Add(message);
    await dbContext.SaveChangesAsync();
}

2. 实时通知增强

// 弹窗通知（使用iziToast）
connection.on("ReceiveMessage", async (senderId, content, timestamp) => {
    iziToast.info({
        title: senderId,
        message: content,
        position: 'topRight',
        timeout: 5000
    });
});

3. 消息状态同步

// 前端标记已读
async function markMessageAsRead(messageId) {
    await connection.invoke("MarkAsRead", messageId);
}

// 接收已读确认
connection.on("MessageRead", (messageId) => {
    document.querySelector(`[data-id="${messageId}"]`).classList.add("read");
});

---

四、服务端配置

1. Program.cs配置

var builder = WebApplication.CreateBuilder(args);

// 添加SignalR服务
builder.Services.AddSignalR(hubOptions => {
    hubOptions.EnableDetailedErrors = true;
    hubOptions.KeepAliveInterval = TimeSpan.FromMinutes(2);
});

// 添加身份认证（JWT示例）
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options => {
        options.TokenValidationParameters = new TokenValidationParameters {
            ValidateIssuer = true,
            ValidateAudience = true
        };
    });

var app = builder.Build();

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

参考代码 使用SignalR实现消息提醒(聊天源码) www.youwenfan.com/contentcso/92650.html

五、性能优化方案

1. 连接管理 使用ConcurrentDictionary维护用户连接池 实现连接心跳检测机制

2. 消息分片

   // 大文件分片传输
   public async Task SendLargeFile(IFormFile file)
   {
       var buffer = new byte[4096];
       using (var stream = file.OpenReadStream())
       {
           int bytesRead;
           while ((bytesRead = await stream.ReadAsync(buffer)) > 0)
           {
               await Clients.Caller.SendAsync("ReceiveFileChunk", 
                   file.Name, buffer, bytesRead);
           }
       }
   }

3. 负载均衡

   • 配置Redis作为SignalR后端存储

   builder.Services.AddSignalR().AddStackExchangeRedis("redis_connection_string");