如何在页面刷新后保留SignalR消息并设置指定保留期限

核心思路 #

• 将通知持久化到数据库，每条记录包含消息内容和过期日期
• 客户端页面加载时，先从后端拉取未过期的历史通知并渲染
• 发送新通知时，先存入数据库再推送给所有客户端
• 前端定期或在加载时清理已过期的通知

后端实现步骤 #

1. 创建通知实体类 #

public class Notification
{
    public int Id { get; set; }
    public string Message { get; set; }
    public DateTime ExpirationDate { get; set; }
    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
}

2. 更新DbContext添加通知集合 #

public class YourDbContext : DbContext
{
    public DbSet<Member> Members { get; set; }
    // 新增通知集合
    public DbSet<Notification> Notifications { get; set; }

    // 其他原有配置...
}

3. 修改添加成员的逻辑，同步保存通知 #

ctx.Members.Add(addThisMember);
await ctx.SaveChangesAsync();
notyf.Success("member successfully created.");

// 创建带过期时间的通知（示例为7天后过期，可自定义）
var newNotification = new Notification
{
    Message = $"New Member added: {addThisMember.Fullname}",
    ExpirationDate = DateTime.UtcNow.AddDays(7)
};
ctx.Notifications.Add(newNotification);
await ctx.SaveChangesAsync();

// 推送给所有客户端
await hCtx.Clients.All.SendAsync("ReceiveNotification", newNotification);
return RedirectToAction("Members");

4. 添加获取未过期通知的API接口 #

[HttpGet("api/notifications")]
public async Task<IActionResult> GetActiveNotifications()
{
    var activeNotifications = await ctx.Notifications
        .Where(n => n.ExpirationDate > DateTime.UtcNow)
        .OrderByDescending(n => n.CreatedAt)
        .ToListAsync();
    return Ok(activeNotifications);
}

5. 可选：定期清理过期通知 #

用ASP.NET Core后台任务或Hangfire等工具，定期删除数据库中已过期的通知，避免冗余数据。

前端实现步骤 #

1. 页面加载时渲染历史通知 #

const connection = new signalr.HubConnectionBuilder().withUrl("/NotificationHub").build();

// 通用渲染通知函数
function renderNotification(notification) {
    const li = document.createElement("li");
    // 给过期通知添加样式标记
    if (new Date(notification.expirationDate) < new Date()) {
        li.classList.add("expired-notification");
    }
    li.textContent = `${user} says ${notification.message}`;
    document.getElementById("messagesList").appendChild(li);
}

// 加载未过期的历史通知
async function loadActiveNotifications() {
    try {
        const response = await fetch("/api/notifications");
        const notifications = await response.json();
        notifications.forEach(notification => renderNotification(notification));
    } catch (err) {
        console.error("加载历史通知失败:", err);
    }
}

// SignalR接收新通知逻辑
connection.on("ReceiveNotification", function (notification) {
    renderNotification(notification);
});

// 初始化流程：先加载历史通知，再启动SignalR连接
async function init() {
    await loadActiveNotifications();
    await connection.start().catch(err => console.error(err.toString()));
}

// 页面加载完成后执行初始化
document.addEventListener("DOMContentLoaded", init);

2. 可选：前端定期清理过期通知 #

设置定时器，定时移除页面上已过期的通知：

// 每小时检查并移除过期通知
setInterval(() => {
    const messagesList = document.getElementById("messagesList");
    const expiredItems = messagesList.querySelectorAll(".expired-notification");
    expiredItems.forEach(item => item.remove());
}, 3600000);

内容的提问来源于stack exchange，提问作者Katakyie Kofi Poku