I have an auction application where I need to show real time bids by each user. The technology I want to use is Angular 6 for the frontend , Signal R for the real time communication and Asp.net MVC as backend apis. I tried both using @aspnet/signalR as well as ng2-signalR
Following is some of my code :
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
}
Following is App.Module.ts file
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 { }
FOllowing is 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}`);
}
}
There are some more files like app.component.html , route, model etc. but I think these files are enough to detail signal r processing. Any help would be appreciated.....
