OCP-DEMO Update Board using WebSocket

Author: fax4ever

openshift/message-board/message-board-web/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { MessageService } from './message.service';
 import { AccountService } from './account.service';
 import { EventService } from './event.service';
+import { WebSocketService } from './websocket.service';
 
 import { AppComponent } from './app.component';
 import { CreateAccountComponent } from './create-account/create-account.component';
@@ -38,7 +39,7 @@ import { TimeComponent } from './time/time.component';
     TagComponent,
     TimeComponent
   ],
-  providers: [MessageService, AccountService, EventService],
+  providers: [MessageService, AccountService, EventService, WebSocketService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

openshift/message-board/message-board-web/src/app/board-detail/board-detail.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit, Input} from '@angular/core';
 
 import {Message} from '../message';
 import {MessageService} from '../message.service';
+import {WebSocketService} from '../websocket.service';
+import {EventService} from '../event.service';
 
 @Component({
   selector: 'app-board-detail',
@@ -12,11 +14,16 @@ export class BoardDetailComponent implements OnInit {
   private _userName: string;
   messages: Message[];
 
-  constructor(private service: MessageService) {}
+  constructor(private service: MessageService, private socket: WebSocketService, private eventService: EventService) {}
 
   ngOnInit() {
     console.log('init BoardDetailComponent');
     this.getMessages();
+	this.socket.ws().onmessage = (response) => {
+	  console.log('inc ', response);
+	  this.eventService.add("Board Update:" + response.data);
+	  this.messages = JSON.parse(response.data);
+	}
   }
 
   get userName(): string {
@@ -28,6 +35,7 @@ export class BoardDetailComponent implements OnInit {
     console.log('user changed: ' + this._userName + ' -> ' + userName);
     this._userName = userName;
     this.getMessages();
+    this.socket.listenTo(userName);
   }
 
   getMessages(): void {

openshift/message-board/message-board-web/src/app/post-message/post-message.component.ts

@@ -19,10 +19,7 @@ export class PostMessageComponent implements OnInit {
 
   postMessage(): void {
     console.log('Posting message:' + this.text);
-    this.service.postMessage(this.text)
-      .subscribe(result => {
-        this.messages.getMessages();
-      });
+    this.service.postMessage(this.text).subscribe();
     this.text = '';
   }
 

openshift/message-board/message-board-web/src/app/websocket.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class WebSocketService {
+
+  private socket;
+
+  constructor() {
+  	this.socket = new WebSocket(window.location.origin.replace("http","ws").replace("web","message") + "/message-service/board");
+  	console.log("WS created: " + this.socket);
+  }
+
+  listenTo(user : String) {
+    this.socket.onopen = () => this.socket.send(user);
+    if (this.socket.readyState == this.socket.OPEN) {
+    	this.socket.send(user);
+    }
+  }
+
+  ws(): WebSocket {
+    return this.socket;
+  }
+
+}