angular - 如何在 Angular 2 中使用 ng2 SignalR 连接到 SignalR 服务器的 IP 地址

Question

我已经使用 ng2 以角度创建了一个 SignalR 应用程序。到目前为止，它运行正常。我的问题在于它可以连接到硬编码的 IP 地址。我需要动态提供 IP 地址，以便在给定时间连接到任何服务器。在 ng2 的文档中，SignalR 配置在 app.module.ts 中。这意味着在运行时无法再更改它。我正在“tabs1”页面上连接。请参阅下面的代码，了解我是如何实现这一点的。

app.module.ts

import { SignalRModule } from 'ng2-signalr';
import { SignalRConfiguration } from 'ng2-signalr';

export function createConfig(): SignalRConfiguration {
  const config = new SignalRConfiguration();
  config.hubName = 'ServerHub';
  config.qs = { user: 'Lane' };
  config.url = 'http://localhost:8089/'; <=== This is the URL of the server that I need to dynamically change
  config.executeEventsInZone = true;
  config.executeErrorsInZone = false;
  config.executeStatusChangeInZone = true;
  return config;
}

连接服务.ts

import { Injectable, EventEmitter } from '@angular/core';
import { SignalR, IConnectionOptions, BroadcastEventListener } from 'ng2-signalr';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConnectionService {
  messageReceived: EventEmitter<string> = new EventEmitter();
  messageFromServer = new Subject<string>();
  options: IConnectionOptions = { hubName: 'ServerHub' };
  onMessageReceived$ = new BroadcastEventListener<string>('Addmessage');
  onServerBroadcast$ = new BroadcastEventListener('serverBroadcast');
  connection: any = null;
  public message = '';

  constructor(
    private signalR: SignalR
  ) { }

  public startConnection(): void {
    this.connection = this.signalR.createConnection();
    this.connection.start().then((c: { errors: { hasError: any; }; }) => {
      if(!c.errors.hasError) {
        // this.connection.listen(this.onMessageReceived$);
        this.connection.listen(this.onServerBroadcast$);

        this.onMessageReceived$.subscribe((message: string) => {
          console.log('asdfasdf' + message);
        });

        this.onServerBroadcast$.subscribe((message: any) => {
          this.message = this.message + message;
          this.messageFromServer.next(this.message);
        });
      }
    });
  }

  public MessageFromClient(message: string): void {
    this.connection.invoke('messageFromClient', message)
      .then((data: any) => {
        console.log(data);
      });
  }

  public getMessage() {
    return this.message;
  }
}

tab1.component.ts

import {
  SignalR,
  BroadcastEventListener,
  IConnectionOptions
} from 'ng2-signalr';
import { NgForm } from '@angular/forms';
import { ConnectionService } from '../../_services/connection.service';
import { Subscription } from 'rxjs';

 message = '';
  options: IConnectionOptions = { hubName: 'ServerHub' };
  onMessageSent$ = new BroadcastEventListener<string>('addMessage');
  private messageFromServerSubscription: Subscription;
  ipAddress: string;

onSubmit(form: NgForm){
    if(!form.valid) {
      return;
    }
    this.ipAddress = form.value;
    console.log(this.ipAddress);
    this.cs.startConnection(); <=== This is how I start the connection
  }

标签： angularsignalr