从.NET Core UI连接旧版SignalR服务器的可行方案咨询

完全没问题！新版的@aspnet/signalr客户端是为ASP.NET Core SignalR设计的，和旧版ASP.NET SignalR（基于.NET Framework）不兼容，但你可以直接在Angular5/TypeScript项目中使用旧版SignalR客户端包来连接你的.NET Framework SignalR服务器。

具体步骤 #

1. 安装必要的npm包 #

旧版SignalR客户端的npm包是signalr（注意没有@aspnet前缀），同时它依赖jQuery，所以需要一起安装：

# 安装匹配服务器版本的旧版SignalR客户端
npm install signalr@2.2.1 --save

# 安装jQuery及对应的TypeScript类型定义
npm install jquery@3.5.1 --save
npm install @types/jquery @types/signalr --save-dev

2. 配置Angular项目引入脚本 #

在angular.json中添加jQuery和SignalR的脚本引用，确保Angular能加载这些依赖：

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/signalr/jquery.signalR.min.js"
]

3. 在Angular组件中使用SignalR客户端 #

示例代码如下，展示如何建立连接、调用Hub方法和监听服务器推送的消息：

import { Component, OnInit } from '@angular/core';
declare var $: any; // 声明jQuery全局变量，避免TypeScript报错

@Component({
  selector: 'app-signalr-connector',
  templateUrl: './signalr-connector.component.html'
})
export class SignalrConnectorComponent implements OnInit {
  private signalRConnection: any;

  ngOnInit(): void {
    // 初始化SignalR连接，替换为你的旧服务器地址
    this.signalRConnection = $.hubConnection('http://your-old-signalr-server-domain');
    // 创建Hub代理，替换为服务器端的Hub类名称
    const hubProxy = this.signalRConnection.createHubProxy('YourServerHubName');

    // 监听服务器推送的消息
    hubProxy.on('ReceiveNotification', (sender: string, content: string) => {
      console.log(`收到服务器消息：${sender} - ${content}`);
      // 在这里更新你的Angular UI
    });

    // 启动连接
    this.signalRConnection.start()
      .done(() => {
        console.log('SignalR连接成功！');
        // 调用服务器端的Hub方法
        hubProxy.invoke('SendClientMessage', 'Angular客户端', 'Hello 旧版SignalR服务器')
          .fail(error => console.error('调用服务器方法失败：', error));
      })
      .fail(error => console.error('SignalR连接失败：', error));
  }
}

关键注意事项 #

• 路由匹配：如果服务器端用的是默认配置（app.MapSignalR()），客户端连接URL可以直接写/signalr（同域情况下），不需要完整域名。
• 跨域配置：如果Angular应用和SignalR服务器不在同一域名下，需要在服务器端的OWIN Startup类中配置CORS：

  // 服务器端Startup.cs代码
  using Microsoft.Owin.Cors;
  
  public void Configuration(IAppBuilder app)
  {
      // 生产环境建议限制具体允许的域名，不要用AllowAll
      app.UseCors(CorsOptions.AllowAll);
      app.MapSignalR();
  }
  

• 版本一致性：客户端signalr包的版本尽量和服务器端Microsoft.AspNet.SignalR版本保持一致（这里用2.2.1），避免出现未知兼容性问题。

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