added chat table

Controllers/MessagesController.cs

@@ -0,0 +1,25 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.SignalR.Infrastructure;
+using LiveGameFeed.Hubs;
+using LiveGameFeed.Models;
+
+namespace LiveGameFeed.Controllers
+{
+    [Route("api/[controller]")]
+    public class MessagesController : ApiHubController<Broadcaster>
+    {
+        public MessagesController(
+            IConnectionManager signalRConnectionManager)
+        : base(signalRConnectionManager)
+        {
+
+        }
+
+        // POST api/messages
+        [HttpPost]
+        public void Post([FromBody]ChatMessage message)
+        {
+            this.Clients.Group(message.MatchId.ToString()).addChatMessage(message);
+        }
+    }
+}

Models/ChatMessage.cs

@@ -0,0 +1,11 @@
+using System;
+
+namespace LiveGameFeed.Models
+{
+    public class ChatMessage
+    {
+        public int MatchId { get; set; }
+        public string Text { get; set; }
+        public DateTime CreatedAt {get; set;}
+    }
+}

app/shared/components/chat.component.html

@@ -10,29 +10,29 @@
             <td><span class="teamName">{{match.Id}}</span></td>
             <td><span class="teamScore"> {{match.Host}} vs {{match.Guest}} </span></td>
         </tr>
-        <!--<tr>
+        <tr>
             <td colspan="2">
                 <div class="feed-table">
                     <table class="table table-striped">
                         <thead>
                             <tr>
                                 <th></th>
-                                <th>Update</th>
+                                <th>Message</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr *ngFor="let feed of match.Feeds" feedHighlight>
+                            <tr *ngFor="let message of messages" feedHighlight>
                                 <td>
-                                    <span class="feed-time">{{feed.CreatedAt | date:'shortTime' }}</span>
+                                    <span class="feed-time">{{message.CreatedAt | date:'shortTime' }} [{{message.MatchId}}]</span>
                                 </td>
                                 <td class="filterable-cell">
-                                    <span class="feed-update"> {{feed.Description}} </span>
+                                    <span class="feed-update"> {{message.Text}} </span>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </td>
-        </tr>-->
+        </tr>
     </tbody>
 </table>

app/shared/components/chat.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { Match } from '../interfaces';
+import { ChatMessage, Match } from '../interfaces';
+import { FeedService } from '../services/feed.service';
 
 @Component({
     selector: 'chat',
@@ -9,8 +10,21 @@ import { Match } from '../interfaces';
 export class ChatComponent implements OnInit {
 
     @Input() matches: Match[];
+    messages: ChatMessage[];
 
-    constructor() { }
+    constructor(private feedService: FeedService) { }
 
-    ngOnInit() { }
+    ngOnInit() {
+        let self = this;
+
+        self.feedService.addChatMessage.subscribe(
+            message => {
+                console.log('received..');
+                console.log(message);
+                if(!self.messages)
+                    self.messages = new Array<ChatMessage>();
+                self.messages.unshift(message);
+            }
+        )
+     }
 }

app/shared/components/match.component.html

@@ -28,8 +28,8 @@
             </td>
         </tr>
         <tr *ngIf="subscribed">
-            <td><button type="button" class="btn btn-default btn-md">Send</button></td>
+            <td><button type="button" class="btn btn-default btn-md" (click)="addChatMessage()">Send</button></td>
-            <td><input type="text" class="form-control" placeholder="Type message.." /></td>
+            <td><input type="text" class="form-control" placeholder="Type message.." [(ngModel)]="chatMessage" /></td>
         </tr>
         <tr>
             <td colspan="2">

app/shared/components/match.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { Match } from '../interfaces';
+import { ChatMessage, Match } from '../interfaces';
 import { FeedService } from '../services/feed.service';
+import { DataService } from '../services/data.service';
 
 @Component({
     selector: 'match',
@@ -11,8 +12,10 @@ export class MatchComponent implements OnInit {
 
     @Input() match: Match;
     subscribed: boolean;
+    chatMessage: string = '';
 
-    constructor(private feedService: FeedService) { }
+    constructor(private feedService: FeedService,
+                private dataService: DataService) { }
 
     ngOnInit() {  }
 
@@ -26,4 +29,23 @@ export class MatchComponent implements OnInit {
         this.subscribed = false;
         this.feedService.unsubscribeToFeed(this.match.Id);
     }
+
+    addChatMessage() {
+        let self = this;
+        let messageToSend: ChatMessage = { 
+            MatchId : self.match.Id, 
+            Text : self.chatMessage,
+            CreatedAt : new Date(Date.now())
+         };
+
+        this.dataService.addChatMessage(messageToSend)
+            .subscribe(() => {
+                console.log('message sent..');
+            },
+            error => {
+                console.log(error);
+            });
+
+        self.chatMessage = '';
+    }
 }

app/shared/interfaces.ts

@@ -15,6 +15,7 @@ export interface FeedClient {
     updateMatch: (match: Match) => void;
     addFeed: (feed: Feed) => void;
     messageReceived: (message: string) => void;
+    addChatMessage: (chatMessage: ChatMessage) => void;
 }
 
 export interface FeedServer {
@@ -46,3 +47,9 @@ export interface Feed {
     CreatedAt: Date;
     MatchId: number;
 }
+
+export interface ChatMessage {
+    MatchId: number;
+    Text: string;
+    CreatedAt: Date;
+}

app/shared/services/data.service.ts

@@ -6,7 +6,7 @@ import {Observer} from 'rxjs/Observer';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 
-import { Match } from '../interfaces';
+import { ChatMessage, Match } from '../interfaces';
 import { ConfigService } from './config.service';
 
 @Injectable()
@@ -25,6 +25,20 @@ export class DataService {
             .catch(this.handleError);
     }
 
+    addChatMessage(message: ChatMessage): Observable<void> {
+
+        let headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+
+        return this.http.post(this._baseUrl + 'messages/', JSON.stringify(message), {
+            headers: headers
+        })
+            .map((res: Response) => {
+                return null;
+            })
+            .catch(this.handleError);
+    }
+
     private extractData(res: Response) {
         let body = res.json();
         return body || {};

app/shared/services/feed.service.ts

@@ -5,7 +5,7 @@ import 'rxjs/add/operator/toPromise';
 import { Observable } from "rxjs/Observable";
 import { Subject } from "rxjs/Subject";
 
-import { FeedSignalR, FeedProxy, FeedClient, FeedServer, ConnectionState, Match, Feed } from '../interfaces';
+import { FeedSignalR, FeedProxy, FeedClient, FeedServer, ConnectionState, ChatMessage, Match, Feed } from '../interfaces';
 
 @Injectable()
 export class FeedService {
@@ -17,6 +17,7 @@ export class FeedService {
     updateMatch: Observable<Match>;
     addFeed: Observable<Feed>;
     messageReceived: Observable<string>;
+    addChatMessage: Observable<ChatMessage>;
 
     private connectionStateSubject = new Subject<ConnectionState>();
     private userConnectedSubject = new Subject<any>();
@@ -24,6 +25,7 @@ export class FeedService {
     private updateMatchSubject = new Subject<Match>();
     private addFeedSubject = new Subject<Feed>();
     private messageReceivedSubject = new Subject<string>();
+    private addChatMessageSubject = new Subject<ChatMessage>();
 
     private server: FeedServer;
 
@@ -34,6 +36,7 @@ export class FeedService {
         this.updateMatch = this.updateMatchSubject.asObservable();
         this.addFeed = this.addFeedSubject.asObservable();
         this.messageReceived = this.messageReceivedSubject.asObservable();
+        this.addChatMessage = this.addChatMessageSubject.asObservable();
     }
 
     start(debug: boolean): Observable<ConnectionState> {
@@ -67,6 +70,8 @@ export class FeedService {
         */
         feedHub.client.messageReceived = message => this.onMessageReceived(message);
 
+        feedHub.client.addChatMessage = chatMessage => this.onAddChatMessage(chatMessage);
+
         if (debug) {
             // for debug only, callback on connection state change
             $.connection.hub.stateChanged(change => {
@@ -101,7 +106,6 @@ export class FeedService {
     }
 
     private onUserConnected(user: any) {
-        console.log("Chat Hub new user connected: " + user);
         this.userConnectedSubject.next(user);
     }
 
@@ -110,14 +114,19 @@ export class FeedService {
     }
 
     private onAddFeed(feed: Feed) {
+        console.log(feed);
         this.addFeedSubject.next(feed);
     }
 
     private onMessageReceived(message: string) {
-        console.log(message);
         this.messageReceivedSubject.next(message);
     }
 
+    private onAddChatMessage(chatMessage: ChatMessage) {
+        console.log(chatMessage);
+        this.addChatMessageSubject.next(chatMessage);
+    }
+
     public subscribeToFeed(matchId: number) {
         this.server.subscribe(matchId);
     }