Get the websocket port from the api

src/app/openlp.service.ts

@@ -5,9 +5,10 @@ import { URLSearchParams, Http } from '@angular/http';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 
-import { PluginDescription, State, Slide, ServiceItem, MainView } from './responses';
+import { PluginDescription, State, Slide, ServiceItem, MainView, SystemInformation } from './responses';
 import { environment } from '../environments/environment';
 
+
 let deserialize = (json, cls) => {
     var inst = new cls();
     for(var p in json) {
@@ -34,17 +35,35 @@ export class OpenLPService {
     }
     this.apiURL = `http://localhost:${port}`;
 
+
     this.stateChanged$ = new EventEmitter<State>();
     let state:State = null;
-    let ws:WebSocket = new WebSocket('ws://localhost:4317/state')
-    ws.onmessage = (event) => {
-      let reader = new FileReader()
-      reader.onload = () => {
-        state = deserialize(JSON.parse(reader.result).results, State);
-        this.stateChanged$.emit(state);
-        }
-      reader.readAsText(event.data);
+    this.retrieveSystemInformation().subscribe(info => {
+      let ws:WebSocket = new WebSocket(`ws://localhost:${info.websocket_port}/state`)
+      ws.onmessage = (event) => {
+        let reader = new FileReader()
+        reader.onload = () => {
+          state = deserialize(JSON.parse(reader.result).results, State);
+          this.stateChanged$.emit(state);
+          }
+        reader.readAsText(event.data);
+      }
+    });
+  }
+
+  private retrieveSystemInformation(): Observable<SystemInformation> {
+    return this.http.get<SystemInformation>(`${this.apiURL}/system`);
+  }
+
+  getSystemInformation(): SystemInformation {
+    let information = sessionStorage.getItem('system_information');
+    if (information) {
+      return JSON.parse(information);
     }
+    this.retrieveSystemInformation().subscribe(information => {
+      sessionStorage.setItem('system_information', JSON.stringify(information));
+      return information;
+    });
   }
 
   getMainImage(): Observable<MainView> {

src/app/responses.ts

@@ -37,4 +37,8 @@ export interface ServiceItem {
 
 export interface MainView {
 	slide_image: string;
+}
+
+export interface SystemInformation {
+	websocket_port: number;
 }