SignalR 与 Angular 4答案

【问题标题】：SignalR with Angular 4SignalR 与 Angular 4
【发布时间】：2019-07-01 21:59:36
【问题描述】：

我想连接到 SignalR Hub 并使用 Angular 4 检索数据。如果您能提供一个示例来说明如何实现这一目标，我将不胜感激。

【问题讨论】：

你自己有没有尝试过？
blog.sstorie.com/integrating-angular2-and-signalr-part-1 或 c-sharpcorner.com/article/… 。所以不会做你的研究工作
我使用 c-sharpcorner.com 进行了尝试，但我收到了一个名为“TypeError: Cannot read property 'hubConnection' of undefined”的错误
@ArunaNamal 你确定这个集线器连接未定义错误仍然存在吗？因为如果服务器没有准备好或者我们在客户端配置的url不正确都会出现这种情况。

【解决方案1】：

在这里，我想为您提供我在项目中使用的 SignlR 服务。希望这能帮助你理解。

import { CommonService } from './commonService';
import { AuthSettings } from '../authSettings';
import { Injectable, EventEmitter } from '@angular/core';

declare const $: any;
@Injectable()
export class SignalRService {
  private connectionId;
  private authData;
  private signalRConnectionId;
  private proxy: any;
  private connection: any;
  private tryingToReconnect = false;
  public ExpiredBidStatus: EventEmitter<any>;
  public ActivatedBid: EventEmitter<any>;
  public Notification: EventEmitter<any>;

  constructor(private commonSvc: CommonService) {
    this.ActivatedBid = new EventEmitter<any>();
    this.ExpiredBidStatus = new EventEmitter<any>();
    this.Notification = new EventEmitter<any>();
  }

  public initialize(): void {
    this.connection = $.hubConnection(AuthSettings.apiServiceBaseUri);
    this.proxy = this.connection.createHubProxy('crowneStockHub');
    this.setToken();

    this.proxy.on('broadcastExpiredBidStatus', (bidId) => {
      this.ExpiredBidStatus.emit(bidId);
    });

    this.proxy.on('broadcastActivatedBid', (bid) => {
      console.log('activated bid');
      this.ActivatedBid.emit(bid);
    });

    this.proxy.on('broadcastNotification', (notification) => {
      console.log('notification');
      console.log(notification);
      this.Notification.emit(notification);
    });

    this.proxy.on('broadcastTimeOut', () => {
      this.initialize();
    });

    this.stopConnection();

    this.connection.start().done((data: any) => {
      console.log('Now connected');
      this.connectionId = this.connection.id;
      this.commonSvc.signalRConnectionId = this.connectionId;
    }).fail((error: any) => {
      console.log('Could not connect ' + error);

    });

    this.connection.reconnecting(() => {
      this.tryingToReconnect = true;
    });

    this.connection.reconnected(() => {
      this.tryingToReconnect = false;
    });
    this.connection.error((error) => {
      this.initialize();
    });
    this.connection.disconnected(() => {
      if (this.tryingToReconnect) {
        setTimeout(() => {
          this.initialize();
        }, 5000);

      }
    });

  }

  setToken() {
    this.authData = window.localStorage.getItem('authorizationData');
    if (this.authData) {
      const token = this.authData.token;
      $.signalR.ajaxDefaults.headers = { Authorization: 'Bearer ' + token };
    }
  };

  stopConnection() {
    this.connection.stop();
  };

  getConnection() {
    return this.connectionId;
  };
}

【讨论】：

这里的 CommonService 是什么？能否请您解释一下或提供公共服务代码示例。

【解决方案2】：

感谢 Jota.Toledo， c-sharpcorner.com/article 为我工作。除此之外，我还修改了 OwinStartup，如下所示。

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

app.MapSignalR();

【讨论】：