如何在Angular 5中使用ng2-signalr？求连接示例或指引

我来帮你梳理清楚ng2-signalr在Angular 5里的使用流程，结合你现有的C# Hub给个完整的简单示例，一步步来就很清晰啦！

1. 先安装适配的依赖包 #

因为Angular 5对第三方库的版本有兼容性要求，你需要安装适配的ng2-signalr版本，打开终端执行：

npm install ng2-signalr@^7.0.0 --save
npm install @aspnet/signalr-client --save

2. 配置Angular模块 #

在你的app.module.ts中导入SignalR模块并配置连接参数，这里要对应你的C# Hub信息：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SignalRModule, SignalRConfiguration } from 'ng2-signalr';

// 配置SignalR连接信息
export function signalRConfigFactory(): SignalRConfiguration {
  const config = new SignalRConfiguration();
  config.hubName = 'myHub'; // 必须和你的C# Hub类名完全一致
  config.url = 'http://localhost:5000/signalr'; // 替换成你的SignalR服务实际地址
  return config;
}

@NgModule({
  imports: [
    BrowserModule,
    // 注册SignalR模块并传入配置
    SignalRModule.forRoot(signalRConfigFactory)
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件中建立连接并调用Hub方法 #

比如在你的根组件app.component.ts中，注入SignalR服务，实现连接和调用Hello方法的逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SignalR, SignalRConnection } from 'ng2-signalr';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h3>SignalR测试</h3>
      <button (click)="sendHelloMsg()" [disabled]="!isConnected">发送Hello消息</button>
    </div>
  `
})
export class AppComponent implements OnInit, OnDestroy {
  private connection: SignalRConnection;
  isConnected = false;

  constructor(private signalR: SignalR) { }

  ngOnInit() {
    // 初始化并建立SignalR连接
    this.signalR.connect().then(conn => {
      this.connection = conn;
      this.isConnected = true;
      console.log('SignalR连接成功！');

      // 如果你的Hub有向客户端推送消息的方法，可以在这里监听
      // 比如：this.connection.on('serverPushMethod', (data) => console.log(data));
    }).catch(err => {
      console.error('SignalR连接失败：', err);
    });
  }

  // 调用Hub中的Hello方法
  sendHelloMsg() {
    if (this.connection) {
      this.connection.invoke('Hello', '来自Angular 5的问候！')
        .then(() => console.log('消息发送成功，已到达服务器Hub'))
        .catch(err => console.error('发送消息失败：', err));
    }
  }

  // 组件销毁时断开连接，避免内存泄漏
  ngOnDestroy() {
    if (this.connection) {
      this.connection.stop().then(() => console.log('SignalR连接已断开'));
    }
  }
}

关键注意点 #

• Hub名称必须匹配：config.hubName要和你的C# Hub类名myHub完全一致，大小写也要注意哦。
• 服务地址正确：确保config.url指向你的SignalR服务的实际端点，如果是传统ASP.NET SignalR，地址通常是http://你的服务器地址/signalr；如果是ASP.NET Core SignalR，地址会是http://你的服务器地址/hubs/myHub，根据你的后端配置调整。
• 连接状态管理：记得在组件销毁时调用connection.stop()，避免长期持有连接导致的内存问题。

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