SignalR與角4

Question

我想連接到SinalR Hub並通過使用Angular 4應用程序檢索數據。 欣賞您是否可以提供樣品以達到此目的。

謝謝。

Answer 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; 
    }; 
} 

Answer 2

謝謝Jota.Toledo， c-sharpcorner.com/article適合我。 除此之外，我還修改了OwinStartup，如下所示。

app.UseCors（Microsoft.Owin.Cors.CorsOptions.AllowAll）;

app.MapSignalR（）;