asp.net-mvc - 如何将 Signal R 与 Angular 6 和 Asp.net MVC api 连接起来？

Question

我有一个拍卖应用程序，我需要在其中显示每个用户的实时出价。我想使用的技术是用于前端的 Angular 6，用于实时通信的 Signal R 和作为后端 api 的 Asp.net MVC。我尝试同时使用 @aspnet/signalR 和 ng2-signalR

以下是我的部分代码:

App.component.ts

import { Component, Injectable } from '@angular/core';
import { SignalR, SignalRConnection, ISignalRConnection, BroadcastEventListener } from '../../node_modules/ng2-signalr';
import { Route, ActivatedRoute, Resolve } from '@angular/router';
import { BidService } from './app.service';
import { BidBlotter } from './Bid.Model';
import * as signalR from '@aspnet/signalr';
import { HubConnection } from '@aspnet/signalr';

// import '~/signalr/hubs';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private _connection: SignalRConnection;
  public _hubConnection: SignalRConnection;

  constructor(
    private _signalR: SignalR,
    private _bidservice: BidService,
    public route: ActivatedRoute) {
  }
  private _hubConnection1: HubConnection | undefined;
  ngOnInit() {
this.getBids(1);
    this.connectToSignalR();
    }

private server: any; // used to call server
  // $.connection.testSignalRHub.client
  private client: any; // used to receive calls from server
  // $.connection.testSignalRHub
  private hub: any; // hub itself
  private hub1: any; // hub itself
  connectToSignalR() {

    jQuery.getScript('http://localhost:52106/signalr/hubs', () => {
this.server.broadcastCommonData = (data: any) => {
        alert(1);
        // self.commonData = data;
      };


    })
    // if you need to call the server hub method - use server variable:
    //this.server.broadcastCommonData(this.commonData);
  }
  bidDetails = [];
  bidBlotter: BidBlotter;

  title = 'app';
  QuickBid(amount) {
    // this._signalR.connect().then((c) => {
    debugger
    var abc = amount;
    var data = Object.assign({}, this.bidBlotter, {
      Amount: abc
    });
    this._bidservice.SaveBidDetails(data).subscribe(() => {
      // this.myfun();
      // this.getBids(1);
      debugger
      this.connection.invoke('BroadcastCommonData').then((data: string[]) => {
        // this.speakers = data;
      });

    });
    // });
  }

  id: number = 1;

  getBids(id) {
    this._bidservice.GetBidList(id).subscribe((response) => {
      var data = JSON.parse(JSON.stringify(response));
      this.bidDetails = data;
    })
  }

 private connection: any;
  private proxy: any;
  private ulr: any;

  myfun() {
 this.connection = $.hubConnection("http://localhost:52106");
    let conx = this._signalR.createConnection();
    conx.status.subscribe((s) => console.log(s.name));
    debugger
    conx.start().then((c) => {
      console.log("Connected");
    });
    let onMessageSent$ = new BroadcastEventListener<any>('ON_MESSAGE_SENT');
    this.connection.listen(onMessageSent$);
    onMessageSent$.subscribe((chatMessage: any) => {
      debugger
      alert("success");
      // this.chatMessages.push(chatMessage);
    });
    }
  public sendMessage(): void {
    debugger
    this.proxy.invoke('PostToClient', alert(1))
      // .subscribe(()=>{
      //   debugger;
      // })
      .catch((error: any) => {
        console.log('SendMessage error -> ' + error);
      });
  }


}

import { EventEmitter, NgZone, OnDestroy } from "@angular/core";
import * as jQuery from "jquery";
import { Observable, Observer, ReplaySubject, Subject } from "rxjs";

export enum HubConnectionState {
  Connecting = 1,
  Connected = 2,
  Reconnecting = 3,
  Disconnected = 4
}

以下是App.Module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Http, Response, Headers,RequestOptions } from '@angular/http';
import { AppComponent } from './app.component';
import { SignalRModule } from 'ng2-signalr';
import { SignalRConfiguration } from 'ng2-signalr';
import { RouterModule, Routes} from '@angular/router';
// import { ConnectionResolver } from './app.component';
import { BidService } from './app.service';
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
import { ConnectionResolver } from './app.component.resolver';


export function createConfig(): SignalRConfiguration {
  const c = new SignalRConfiguration();
  c.hubName = 'RequestLog';
  // c.qs = { user: 'donald' };
  // c.url = 'http://localhost:52106/';
  c.url = 'http://localhost:52106/';
  c.logging = true;

  // >= v5.0.0
  c.executeEventsInZone = true; // optional, default is true
  c.executeErrorsInZone = false; // optional, default is false
  c.executeStatusChangeInZone = true; // optional, default is true
  return c;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([]),
    SignalRModule.forRoot(createConfig),
    HttpClientModule

  ],
  providers: [BidService],
  bootstrap: [AppComponent]
})
export class AppModule { }

下面是App.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/Observable/of';
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
import { BidBlotter } from './Bid.Model';

@Injectable()
export class BidService {

    constructor(private http: HttpClient) { }

    private BaseUrl = "http://localhost:52106/";

    SaveBidDetails(bidblotter: BidBlotter) {
        return this.http.post(this.BaseUrl + `api/Bid/SaveBid`, bidblotter);
    }

    GetBidList(id : number) {
        return this.http.get(this.BaseUrl + `api/Bid/GetListByID/${id}`);
    }
}

还有一些文件，如 app.component.html 、路由、模型等，但我认为这些文件足以详细说明信号 r 处理。任何帮助将不胜感激......

Answer 1

我刚刚经历了很多同样的挫折。我刚刚回答了另一篇文章，重点介绍了我在使用 c# .net 框架后端设置角度应用程序时所经历的一些事情。

1) @aspnet/signalr 包用于 .Net Core。对于 .Net Framework，您需要 signalr 包 (npm install signalr)。

2) 由于您现在使用的是 signalr 包，因此当您尝试在角度组件中实例化新的 HubConnection 时，您将无法访问 HubConnectionBuilder。

相反，当 signalr 脚本被执行时，它会将附加事件附加到您代码中的 $。 注意:如果您的 ts 文件在构建或编译时出现错误，请确保您包含了 @types/signalr 和 @types/jquery来自 npm

要设置新的集线器连接，请使用 $.hubConnection("your-url-here/signalr")。这将在运行时附加到服务器的集线器。 注意:我将此结果作为一个名为 hubConnection 的变量存储在我的角度组件中

在您的服务器代码(.cs 文件)上，您有 Hub 类，您需要在类名上方添加:[HubName("YourHubName")]。所以在你的情况下，你的 .cs 文件在顶部看起来像这样:

[HubName("HubName")]    
public class MyHubClass: Hub

您很可能必须将其包含在 .cs 文件的顶部:使用 Microsoft.AspNet.SignalR.Hubs；

然后在您的 Angular 组件中设置一个代理以附加到您服务器上的该集线器 在实例化新的 hubConnection 之后的下一行，写:

this.hubConnection.createHubProxy("yourHubName");。

创建代理后，您可以附加监听器以监听从服务器发出的事件，或者您可以从角度组件调用服务器函数。

我关注了这个example在这里学习如何设置调用事件和监听服务器事件。是的，它是 Angular 2，但 signalr 的所有功能在我的 Angular 7 应用程序中仍然有效。

看我的另一个回答here如果这给您带来一些问题，请获取有关 jQuery 和 signalR 的进一步解释