React连接ASP.NET Windows Service中SignalR报错及解决方案咨询

错误原因 #

你当前使用的@microsoft/signalr是ASP.NET Core SignalR专属客户端库，与基于Owin的传统ASP.NET SignalR服务完全不兼容，这就是报错检测到连接ASP.NET SignalR服务器的尝试。此客户端仅支持连接ASP.NET Core SignalR服务器的根本原因。

可行解决方案 #

方案一：改用传统ASP.NET SignalR的JavaScript客户端 #

这是改动最小的方案，仅需替换React端的客户端库并调整连接逻辑：

1. 安装旧版SignalR客户端
   在React项目根目录执行命令：

npm install signalr
# 或使用yarn
yarn add signalr

2. 修改React端连接代码
   替换原App.js代码为以下内容，注意适配服务端的Hub方法与事件名称：

import logo from './logo.svg';
import './App.css';
import * as signalR from 'signalr';
import { useState } from 'react';

function App() {
  const [hubConnection, setHubConnection] = useState(null);
  const [hubProxy, setHubProxy] = useState(null);

  function Connect() {
    // 创建连接实例，指向服务端SignalR映射路径
    const connection = signalR.hubConnection('http://localhost:5000/MyHub');
    // 创建Hub代理（服务端Hub类名需转为小写）
    const proxy = connection.createHubProxy('myHub');

    // 监听服务端推送的sendMessage事件
    proxy.on('sendMessage', (message) => {
      console.log('收到服务端消息:', message);
    });

    // 启动连接
    connection.start()
      .then(() => {
        setHubConnection(connection);
        setHubProxy(proxy);
        console.log('SignalR连接成功！');
      })
      .catch(err => {
        alert(err);
        console.error('SignalR连接失败:', err);
      });

    // 组件卸载时停止连接
    return () => {
      if (connection.state === signalR.connectionState.connected) {
        connection.stop();
      }
    };
  }

  function sendMessage() {
    if (hubProxy) {
      // 调用服务端的SendMessage方法，参数需与服务端定义一致
      hubProxy.invoke('SendMessage', '来自前端的通知！')
        .catch(err => console.error('发送消息失败:', err));
    }
  }

  return (
    <div className="App">
      <div className="container">
        <button onClick={Connect}>连接SignalR</button>   
        <button onClick={sendMessage}>发送消息</button>   
      </div>
    </div>
  );
}

export default App;

3. 验证服务端配置
   确保服务端Startup.cs中的CORS配置正确，且MapSignalR的路径/MyHub与客户端连接地址完全匹配；同时确认Windows Service已正常启动，可通过浏览器访问http://localhost:5000/MyHub查看SignalR握手页面。

方案二：将服务端升级为ASP.NET Core SignalR（可选） #

若允许重构服务端，可将Windows Service改为基于.NET Core的Worker Service或ASP.NET Core Web服务，使用ASP.NET Core SignalR。此方案可保留你原本的@microsoft/signalr客户端，但需完全重构服务端的SignalR代码与Windows Service托管逻辑。

关键注意点 #

• 传统ASP.NET SignalR与ASP.NET Core SignalR是两个完全独立的框架，客户端与服务端必须严格匹配版本
• 服务端Hub的方法名称、客户端监听的事件名称必须完全一致（旧版SignalR默认会将Hub类名转为小写作为代理名称）
• 确保服务端端口5000未被占用，且防火墙允许该端口的HTTP请求

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