在ASP.NET Boilerplate中使用SignalR遇Connection ID required错误及JS调用疑问

核心疑问解答 #

• 仅填对Hub路径不能直接使用：必须在HTML页面中显式引入你的message.js文件，浏览器不会自动加载wwwroot目录下的JS资源。
• 直接访问/signalr-myChatHub报错是正常行为：SignalR的Hub端点是供客户端通过WebSocket/长连接协议通信的接口，不支持浏览器直接HTTP GET访问。

完整实现步骤 #

1. 后端Hub配置回顾（确保已完成） #

假设你已经定义了Hub类：

public class MyChatHub : Hub
{
    // 供客户端调用的方法
    public async Task SendMessage(string message)
    {
        // 推送给所有在线用户，后续可修改为推送给指定已登录用户
        await Clients.All.SendAsync("getMessage", message);
    }
}

并在Program.cs（或Startup.cs）中注册端点：

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<MyChatHub>("/signalr-myChatHub");
    // 其他业务端点配置...
});

2. 自定义JS文件（wwwroot/js/message.js） #

将文档代码添加中文注释，调整为可运行版本：

// 全局保存Hub连接实例，方便后续调用
var chatHub = null;

// 启动SignalR连接，abp.appPath会自动适配应用根路径（比如部署在子目录时）
abp.signalr.startConnection(abp.appPath + 'signalr-myChatHub', function (connection) {
    chatHub = connection; // 保存连接引用

    // 注册接收服务器推送消息的回调：服务器调用"getMessage"时触发
    connection.on('getMessage', function (message) {
        console.log('收到推送消息: ' + message);
        // 可选：把消息渲染到页面DOM中
        // document.getElementById('messageContainer').innerHTML += `<p>${message}</p>`;
    });
}).then(function (connection) {
    abp.log.debug('已连接到MyChatHub服务器！');
    abp.event.trigger('myChatHub.connected'); // 触发连接成功的自定义事件
});

// 监听连接成功事件，连接完成后发送测试消息给服务器
abp.event.on('myChatHub.connected', function() {
    // 调用服务器端Hub的SendMessage方法，传递参数
    chatHub.invoke('sendMessage', "大家好，我已成功连接到聊天Hub！");
});

3. 在HTML页面中引入JS文件 #

在你的页面（比如Index.cshtml或布局文件_Layout.cshtml）中，确保在ABP的SignalR脚本之后引入自定义JS：

<!-- 先引入ABP框架自带的SignalR封装脚本（ABP会自动注入，确保顺序正确） -->
<script src="/Abp/Framework/scripts/libs/abp.signalr.js"></script>
<!-- 再引入你的自定义脚本 -->
<script src="/js/message.js"></script>

<!-- 可选：添加一个显示消息的DOM容器 -->
<div id="messageContainer"></div>

原文档代码中文解释 #

var chatHub = null;

abp.signalr.startConnection(abp.appPath + 'signalr-myChatHub', function (connection) {
    chatHub = connection; // 保存Hub连接引用，方便后续调用服务器方法

    connection.on('getMessage', function (message) { // 注册监听服务器推送的"getMessage"事件
        console.log('received message: ' + message);
    });
}).then(function (connection) {
    abp.log.debug('Connected to myChatHub server!');
    abp.event.trigger('myChatHub.connected'); // 触发自定义的连接成功事件
});

abp.event.on('myChatHub.connected', function() { // 监听连接成功事件
    chatHub.invoke('sendMessage', "Hi everybody, I'm connected to the chat!"); // 调用服务器端的SendMessage方法
});

• abp.signalr.startConnection：ABP封装的SignalR连接启动方法，自动处理已登录用户的身份验证传递
• connection.on('getMessage', ...)：定义客户端接收服务器推送消息的逻辑，服务器调用SendAsync("getMessage", ...)时触发
• chatHub.invoke('sendMessage', ...)：客户端主动调用服务器Hub中的方法，传递参数
• abp.event.trigger/on：ABP的事件系统，用于解耦连接成功后的业务逻辑，避免回调嵌套

测试注意事项 #

• 确保用户已登录：ABP的SignalR会自动携带用户身份，后续可基于此实现向指定用户推送CRUD通知
• 打开浏览器控制台：查看连接日志和收到的推送消息
• 不要直接访问Hub端点：该端点仅用于SignalR客户端通信，不支持浏览器直接访问

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