add SignalR client service

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));
+    }
+}

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');
+        }
+    }
 }

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<ConnectionState>;
+    userConnected: Observable<any>;
+    messageReceived: Observable<string>;
+
+    private connectionStateSubject = new Subject<ConnectionState>();
+    private userConnectedSubject = new Subject<any>();
+    private messageReceivedSubject = new Subject<string>();
+
+    constructor(private http: Http) {
+        this.connectionState = this.connectionStateSubject.asObservable();
+        this.userConnected = this.userConnectedSubject.asObservable();
+        this.messageReceived = this.messageReceivedSubject.asObservable();
+    }
+
+    start(debug: boolean): Observable<ConnectionState> {
+        // only for debug
+        $.connection.hub.logging = debug;
+        // get the signalR hub named 'broadcaster'
+        let connection = <FeedSignalR>$.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);
+    }
+}