Блог

Я написал клиентское приложение SignalR на Angular 2. Клиент реализует функцию connected , которая вызывается из концентратора SignalR. Эта функция просто устанавливает логическую переменную connected в true значение при вызове из концентратора. Я использую эту connected переменную для управления состоянием включения / выключения кнопки. Оно отлично работает в Firefox и Chrome, но в IE состояние включения / выключения кнопки не отражает значение connected переменной.

Ниже приведена функция в моем классе SignalR Hub в ASP.NET веб-api

 public void Connect()
{
    Clients.Caller.connected();
}
  

В моем приложении Angular2 у меня есть следующая служба.
signalr-test.service.ts

 import { Injectable } from '@angular/core';

export class SignalrWindow extends Window {
  $: any;
}

@Injectable()
export class SiglalrTestService {

  private hubProxy: any;
  private hubConnection: any;
  private connected = false;

  constructor(private window: SignalrWindow) {
    if (this.window.$ === undefined || this.window.$.hubConnection === undefined) {
      throw new Error("The variable '$' or the .hubConnection() function are not defined...please check the SignalR scripts have been loaded properly");
    }
    this.hubConnection = this.window.$.hubConnection();
    this.hubConnection.url = 'http://localhost:18117/signalr';
    this.hubProxy = this.hubConnection.createHubProxy('MyHub');

    this.hubProxy.on("connected", () => {
      this.connected = true;
      console.log('Connected successfully....');
    });
  }

  start(): void {
    this.hubConnection.start()
      .done(() => {
        this.hubProxy.invoke('Connect');
      })
      .fail((error: any) => {
        throw new Error("Failed to start connection"   error);
      });
  }

  stop(): void {
    this.hubConnection.stop();
    this.connected = false;
  }

  get isConnected(): boolean {return this.connected;}
}
  

app.component.ts

 import {Component, OnInit} from '@angular/core';
import { SiglalrTestService } from './signalr-test.service';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit{

  constructor(private signalrTest : SiglalrTestService){}

  ngOnInit(): void {
  }
  startSignalR(){
    this.signalrTest.start();
  }
  stopSignalR(){
    this.signalrTest.stop();
  }
  get connectedToServer() : boolean{ return this.signalrTest.isConnected;  }

}
  

и файл шаблона является
app.component.html

 <div>
  <h1>SignalR Test</h1>
  <input type="button" [disabled]="connectedToServer"  (click)="startSignalR()" value="Start" >
  <input type="button" [disabled]="!connectedToServer"  (click)="stopSignalR()" value="Stop" >
</div>
  

Я использую AngularJS 2.0.1, SignalR 2.2.1 и IE 11.

P.S. Я опубликовал эту проблему на github