ASP.NET Core中SignalR通知失效及signalr未定义问题求助

核心错误原因 #

Uncaught ReferenceError: signalr is not defined是因为前端未正确加载SignalR的JS库，先解决这个基础问题，再排查其他节点。

1. 正确引入SignalR JavaScript库 #

方案一：CDN快速引入 #

在你的HTML页面中，在notification.js之前添加CDN脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.10/signalr.min.js"></script>

必须保证加载顺序正确，否则脚本执行时signalr对象还未初始化。

方案二：npm安装（适合项目依赖管理） #

1. 安装SignalR包：

npm install @microsoft/signalr

2. 在页面或模块中引入：

// ES模块方式
import * as signalr from '@microsoft/signalr';

// 或者传统脚本引入（从node_modules取编译后的文件）
<script src="node_modules/@microsoft/signalr/dist/browser/signalr.js"></script>

2. 检查后端SignalR配置 #

确保Program.cs（或Startup.cs）中正确配置了SignalR服务和Hub路由：

var builder = WebApplication.CreateBuilder(args);

// 注册SignalR服务
builder.Services.AddSignalR();

var app = builder.Build();

// 配置NotificationHub的路由，要和前端withUrl的路径完全一致
app.MapHub<NotificationHub>("/NotificationHub");

app.Run();

3. 前端脚本修正 #

你的脚本里${user}变量未定义，会触发新的错误，同时可以优化连接稳定性：

var connection = new signalr.HubConnectionBuilder()
    .withUrl("/NotificationHub")
    .withAutomaticReconnect() // 可选：添加自动重连，提升在线稳定性
    .build();

connection.on("ReceiveNotification", function (message) {
    var messagesList = document.getElementById("messagesList");
    // 先检查DOM元素是否存在，避免找不到节点的错误
    if (!messagesList) return;
    
    var li = document.createElement("li");
    li.textContent = `通知：${message}`;
    messagesList.appendChild(li);
});

connection.start().catch(function (err) {
    console.error("SignalR连接失败：", err.toString());
});

4. 控制器注入验证 #

确保MemberController中正确注入了IHubContext<NotificationHub>：

private readonly IHubContext<NotificationHub> _hubContext;

public MemberController(IHubContext<NotificationHub> hubContext)
{
    _hubContext = hubContext;
}

// 创建成员方法中使用注入的上下文发送消息
await _hubContext.Clients.All.SendAsync("ReceiveNotification", $"New Member added: {addThisMember.Fullname}");

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