set connection id on start

Hubs/Broadcaster.cs

@@ -7,9 +7,11 @@ namespace LiveGameFeed.Hubs
     {
         public override Task OnConnected()
         {
-            return Clients.All.userConnected("New connection " + Context.ConnectionId);
+            // Set connection id for just connected client only
+            return Clients.Client(Context.ConnectionId).setConnectionId(Context.ConnectionId);
         }
 
+        // Server side methods called from client
         public Task Subscribe(int matchId)
         {
             return Groups.Add(Context.ConnectionId, matchId.ToString());

Views/Home/Index.cshtml

@@ -37,8 +37,7 @@
             </div>
             <div class="collapse navbar-collapse" id="myNavbar">
             <ul class="nav navbar-nav">
-                <li class="active"><a href="#">Home</a></li>
+                <li class="active"><a href="https://github.com/chsakell" target="_blank"><span class="glyphicon glyphicon-sunglasses"></span> About</a></li>
-                <li><a href="https://github.com/chsakell" target="_blank"><span class="glyphicon glyphicon-sunglasses"></span> About</a></li>
                 <li><a href="https://github.com/chsakell" target="_blank"><span class="glyphicon glyphicon-save"></span> Source code</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">

app/home/home.component.html

@@ -3,6 +3,6 @@
         <match [match]="match" (updateSubscription)="updateSubscription($event)"></match>
     </div>
     <div class="col-md-4">
-        <chat [matches]="matches"></chat>
+        <chat [matches]="matches" [connection]="connectionId"></chat>
     </div>
 </div>

app/home/home.component.ts

@@ -12,6 +12,7 @@ import { SignalRConnectionStatus } from '../shared/interfaces';
 export class HomeComponent implements OnInit {
 
     matches: Match[];
+    connectionId: string;
     error: any;
 
     constructor(private dataService: DataService,
@@ -20,6 +21,8 @@ export class HomeComponent implements OnInit {
     ngOnInit() {
         let self = this;
 
+        self.listenForConnection();
+
         self.feedService.connectionState
             .subscribe(
             connectionState => {
@@ -60,7 +63,6 @@ export class HomeComponent implements OnInit {
                         for (var i = 0; i < self.matches.length; i++) {
                             if (self.matches[i].Id === feed.MatchId) {
                                 if (!self.matches[i].Feeds) {
-                                    console.log('initializing for match ' + self.matches[i].Id);
                                     self.matches[i].Feeds = new Array<Feed>();
                                 }
                                 self.matches[i].Feeds.unshift(feed);
@@ -74,8 +76,19 @@ export class HomeComponent implements OnInit {
             });
     }
 
+    listenForConnection() {
+        let self = this;
+        // Listen for connected / disconnected events
+        self.feedService.setConnectionId.subscribe(
+            id => {
+                console.log(id);
+                self.connectionId = id;
+            }
+        );
+    }
+
     updateSubscription(subscription: any) {
-        if(<boolean>subscription.subscribe === true)
+        if (<boolean>subscription.subscribe === true)
             this.feedService.subscribeToFeed(<number>subscription.matchId);
         else
             this.feedService.unsubscribeFromFeed(<number>subscription.matchId);

app/shared/components/chat.component.html

@@ -10,6 +10,11 @@
             <td><span class="teamName">{{match.Id}}</span></td>
             <td><span class="teamScore"> {{match.Host}} vs {{match.Guest}} </span></td>
         </tr>
+        <tr>
+            <td colspan="2">
+                <span class="match-th">{{connection}}</span>
+            </td>
+        </tr>
         <tr>
             <td colspan="2">
                 <div class="chat-table">

app/shared/components/chat.component.ts

@@ -10,6 +10,7 @@ import { FeedService } from '../services/feed.service';
 export class ChatComponent implements OnInit {
 
     @Input() matches: Match[];
+    @Input() connection: string;
     messages: ChatMessage[];
 
     constructor(private feedService: FeedService) { }

app/shared/interfaces.ts

@@ -9,7 +9,7 @@ export interface FeedProxy {
 }
 
 export interface FeedClient {
-    userConnected: (user: any) => void;
+    setConnectionId: (id: string) => void;
     userDisconnected: (id: string) => void;
 
     updateMatch: (match: Match) => void;

app/shared/services/feed.service.ts

@@ -13,14 +13,14 @@ export class FeedService {
     currentState = SignalRConnectionStatus.Disconnected;
     connectionState: Observable<SignalRConnectionStatus>;
 
-    userConnected: Observable<any>;
+    setConnectionId: Observable<string>;
     updateMatch: Observable<Match>;
     addFeed: Observable<Feed>;
     addChatMessage: Observable<ChatMessage>;
 
     private connectionStateSubject = new Subject<SignalRConnectionStatus>();
-    private userConnectedSubject = new Subject<any>();
+    
-
+    private setConnectionIdSubject = new Subject<string>();
     private updateMatchSubject = new Subject<Match>();
     private addFeedSubject = new Subject<Feed>();
     private addChatMessageSubject = new Subject<ChatMessage>();
@@ -30,7 +30,7 @@ export class FeedService {
     constructor(private http: Http) {
         this.connectionState = this.connectionStateSubject.asObservable();
 
-        this.userConnected = this.userConnectedSubject.asObservable();
+        this.setConnectionId = this.setConnectionIdSubject.asObservable();
         this.updateMatch = this.updateMatchSubject.asObservable();
         this.addFeed = this.addFeedSubject.asObservable();
         this.addChatMessage = this.addChatMessageSubject.asObservable();
@@ -48,7 +48,7 @@ export class FeedService {
          * @desc callback when a new user connect to the chat
          * @param User user, the connected user
        */
-        feedHub.client.userConnected = user => this.onUserConnected(user);
+        feedHub.client.setConnectionId = id => this.onSetConnectionId(id);
 
         /**
           * @desc callback when match score is updated
@@ -77,8 +77,8 @@ export class FeedService {
     }
 
     // Client side methods
-    private onUserConnected(user: any) {
+    private onSetConnectionId(id: string) {
-        this.userConnectedSubject.next(user);
+        this.setConnectionIdSubject.next(id);
     }
 
     private onUpdateMatch(match: Match) {

wwwroot/css/site.css

@@ -33,7 +33,7 @@ th, td {
 }
 
 .chat-table {
-    height: 240px;
+    height: 253px;
     overflow: auto;
 }