SignalR连接400错误排查：ASP.NET Web API 2与React的PoC问题

你遇到的所有问题本质上都是客户端与服务器端的SignalR生态不匹配导致的：

• 你的服务器是基于.NET Framework 4.6的ASP.NET Web API 2，使用的是第一代传统SignalR（Microsoft.AspNet.SignalR）；
• 但客户端却用了@aspnet/signalr-client——这是ASP.NET Core生态的第二代SignalR客户端，两个版本的通信协议、API设计完全不兼容，自然会触发"未知传输协议"的错误。

下面是一步步的修复方案：

步骤1：替换客户端依赖 #

先卸载错误的Core版客户端，换成传统SignalR对应的JS包：

# 卸载不兼容的包
npm uninstall @aspnet/signalr-client
# 安装正确的传统SignalR客户端
npm install signalr --save

补充：如果你的React项目不想引入jQuery（传统SignalR官方依赖），可以用第三方无依赖的替代包signalr-no-jquery，安装命令换成npm install signalr-no-jquery --save即可。

步骤2：重构客户端连接代码 #

传统SignalR的API和Core版本差异很大，需要调整你的连接逻辑：

// 如果你用官方依赖，先确保项目引入了jQuery
import $ from 'jquery';
import 'signalr';

// 或者用无依赖版本的写法
// import * as signalR from 'signalr-no-jquery';

// 创建Hub连接实例
const connection = $.hubConnection('http://api.domain/signalr');
// 生成ChatHub的代理对象
const chatHubProxy = connection.createHubProxy('ChatHub');

// 注册监听服务器推送的方法（对应Hub里的Send/Receive方法）
chatHubProxy.on('receiveMessage', (user, message) => {
  console.log(`收到消息：${user} - ${message}`);
});

// 启动连接
connection.start()
  .done(() => console.log('SignalR连接成功！'))
  .fail(err => console.error('连接失败：', err));

步骤3：修复服务器端路由冲突 #

你调试时只有ChatConnection.ProcessRequest被触发，说明你的PersistentConnection和Hub的路由发生了冲突。调整Startup类的配置：

using Microsoft.AspNet.SignalR;
using Owin;

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        // 先映射Hub的默认路由（/signalr）
        app.MapSignalR();
        
        // 如果需要保留PersistentConnection，给它单独分配一个路由，避免和Hub冲突
        app.MapSignalR("/chat-connection", new ChatConnection());
    }
}

同时检查Web.config里的SignalR handler配置是否正确：

<system.webServer>
  <handlers>
    <add name="SignalR" verb="*" path="/signalr/*" type="Microsoft.AspNet.SignalR.Hubs.HubDispatcher, Microsoft.AspNet.SignalR.Core"/>
  </handlers>
</system.webServer>

步骤4：验证Hub代理生成 #

现在访问http://api.domain/signalr/hubs应该能正常返回自动生成的Hub代理JS代码（如果服务器端启用了代理生成）。如果还是报错，确认服务器端已安装正确的NuGet包：

• Microsoft.AspNet.SignalR.Core
• Microsoft.AspNet.SignalR.WebApi

额外避坑提示 #

以后区分两种SignalR的核心标志：

• 传统SignalR：面向.NET Framework，NuGet包前缀是Microsoft.AspNet.SignalR，客户端用signalr npm包；
• ASP.NET Core SignalR：面向.NET Core/.NET 5+，NuGet包前缀是Microsoft.AspNetCore.SignalR，客户端用@microsoft/signalr npm包（注意不是旧版的@aspnet/前缀）。

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