diff --git a/Hubs/Broadcaster.cs b/Hubs/Broadcaster.cs index 0963ae9..9f77b7d 100644 --- a/Hubs/Broadcaster.cs +++ b/Hubs/Broadcaster.cs @@ -7,11 +7,11 @@ namespace LiveGameFeed.Hubs { public override Task OnConnected() { - return Clients.All.Message("New connection " + Context.ConnectionId); + return Clients.All.userConnected("New connection " + Context.ConnectionId); } public Task Broadcast(string message) { - return Clients.All.Message(Context.ConnectionId + "> " + message); + return Clients.All.messageReceived(Context.ConnectionId + "> " + message); } } } \ No newline at end of file diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml index b8cbfc2..ff82fd5 100644 --- a/Views/Home/Index.cshtml +++ b/Views/Home/Index.cshtml @@ -26,7 +26,8 @@ Loading... - + + \ No newline at end of file diff --git a/app/app.component.ts b/app/app.component.ts index 88bdfbe..237ade2 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,6 +1,19 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; + +import { FeedService, ConnectionState } from './shared/feed.service' + @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html' + templateUrl: 'app/app.component.html', + providers: [FeedService] }) -export class AppComponent { } +export class AppComponent implements OnInit { + + constructor(private service: FeedService) { } + + ngOnInit() { + this.service.start(true).subscribe( + null, + error => console.log('Error on init: ' + error)); + } +} \ No newline at end of file diff --git a/app/home/home.component.ts b/app/home/home.component.ts index 9061366..5dfb75c 100644 --- a/app/home/home.component.ts +++ b/app/home/home.component.ts @@ -1,11 +1,37 @@ import { Component, OnInit } from '@angular/core'; +import { FeedService, ConnectionState } from '../shared/feed.service'; + @Component({ selector: 'home', templateUrl: 'app/home/home.component.html' }) export class HomeComponent implements OnInit { - constructor() { } - ngOnInit() { } + error: any; + + constructor(private service: FeedService) { } + + ngOnInit() { + this.service.connectionState + .subscribe( + connectionState => { + if (connectionState == ConnectionState.Connected) { + console.log('Connected!'); + } else { + console.log(connectionState.toString()); + } + }, + error => { + this.error = error; + console.log(error); + }); + + if (this.service.currentState === ConnectionState.Connected) { + console.log(' connected....'); + } + else { + console.log('not connected'); + } + } } \ No newline at end of file diff --git a/app/shared/feed.service.ts b/app/shared/feed.service.ts new file mode 100644 index 0000000..bcc3c56 --- /dev/null +++ b/app/shared/feed.service.ts @@ -0,0 +1,108 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; + +import 'rxjs/add/operator/toPromise'; +import { Observable } from "rxjs/Observable"; +import { Subject } from "rxjs/Subject"; + +interface FeedSignalR extends SignalR { + broadcaster: FeedProxy +} + +interface FeedProxy { + client: FeedClient +} + +interface FeedClient { + userConnected: (user: any) => void; + userDisconnected: (id: string) => void; + messageReceived: (message: string) => void; +} + +export enum ConnectionState { + Connected = 1, + Disconnected = 2, + Error = 3 +} + +@Injectable() +export class FeedService { + + currentState = ConnectionState.Disconnected; + connectionState: Observable; + userConnected: Observable; + messageReceived: Observable; + + private connectionStateSubject = new Subject(); + private userConnectedSubject = new Subject(); + private messageReceivedSubject = new Subject(); + + constructor(private http: Http) { + this.connectionState = this.connectionStateSubject.asObservable(); + this.userConnected = this.userConnectedSubject.asObservable(); + this.messageReceived = this.messageReceivedSubject.asObservable(); + } + + start(debug: boolean): Observable { + // only for debug + $.connection.hub.logging = debug; + // get the signalR hub named 'broadcaster' + let connection = $.connection; + let feedHub = connection.broadcaster; + + /** + * @desc callback when a new user connect to the chat + * @param User user, the connected user + */ + feedHub.client.userConnected = user => this.onUserConnected(user); + + /** + * @desc callback when a message is received + * @param String to, the conversation id + * @param Message data, the message + */ + feedHub.client.messageReceived = message => this.onMessageReceived(message); + + if (debug) { + // for debug only, callback on connection state change + $.connection.hub.stateChanged(change => { + let oldState: string, + newState: string; + + for (var state in $.signalR.connectionState) { + if ($.signalR.connectionState[state] === change.oldState) { + oldState = state; + } + if ($.signalR.connectionState[state] === change.newState) { + newState = state; + } + } + + console.log("Feed Hub state changed from " + oldState + " to " + newState); + }); + } + + // start the connection + $.connection.hub.start() + .done(response => this.setConnectionState(ConnectionState.Connected)) + .fail(error => this.connectionStateSubject.error(error)); + + return this.connectionState; + } + + private setConnectionState(connectionState: ConnectionState) { + console.log('connection state changed to: ' + connectionState); + this.currentState = connectionState; + this.connectionStateSubject.next(connectionState); + } + + private onUserConnected(user: any) { + console.log("Chat Hub new user connected: " + user); + this.userConnectedSubject.next(user); + } + + private onMessageReceived(message: string) { + console.log(message); + this.messageReceivedSubject.next(message); + } +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index e4f52b4..0c80865 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -126,7 +126,7 @@ gulp.task("dependencies", ["copy:angular", gulp.task("watch", function () { return watch(paths.app) - .pipe(gulp.dest(paths.appDest)) + .pipe(gulp.dest(paths.appDest)); }); gulp.task("min:app", function () {