Implement live updates from the backend

package.json

@@ -24,9 +24,11 @@
     "@angular/platform-browser-dynamic": "5.2.9",
     "@angular/platform-server": "5.2.9",
     "@angular/router": "5.2.9",
+    "@stomp/ng2-stompjs": "^0.6.4",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "ngx-cookie-service": "^1.0.9",
+    "npm": "^6.0.0",
     "rxjs": "^5.5.7",
     "zone.js": "^0.8.20"
   },

src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { JsonPipe } from '@angular/common';
-import { HttpModule } from '@angular/http';
-import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {JsonPipe} from '@angular/common';
+import {HttpModule} from '@angular/http';
+import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
 
-import { MatButtonModule } from '@angular/material';
-import { MatToolbarModule } from '@angular/material';
-import { MatTableModule } from '@angular/material/table';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatIconModule } from '@angular/material/icon';
-import { MatDialogModule } from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material';
+import {MatToolbarModule} from '@angular/material';
+import {MatTableModule} from '@angular/material/table';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatIconModule} from '@angular/material/icon';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {MatInputModule} from '@angular/material/input';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatTooltipModule} from '@angular/material/tooltip';
 
+// Other libs
+import {StompRService} from '@stomp/ng2-stompjs';
+import {CookieService} from 'ngx-cookie-service';
 
-import { CookieService } from 'ngx-cookie-service';
+// Our stuff
+import {UserService} from './user.service';
+import {SnackBarService} from './snackbar.service';
+import {DialogService} from './dialog.service';
 
-import { UserService } from './user.service';
-import { SnackBarService } from './snackbar.service';
-import { DialogService } from './dialog.service';
+import {AppComponent} from './app.component';
+import {MgmtComponent} from './mgmt/mgmt.component';
+import {LoginComponent} from './login/login.component';
+import {ProfileComponent} from './profile/profile.component';
+import {ServiceComponent} from './service/service.component';
+import {SshKeysComponent} from './ssh-keys/ssh-keys.component';
+import {AccountComponent} from './account/account.component';
 
-import { AppComponent } from './app.component';
-import { MgmtComponent } from './mgmt/mgmt.component';
-import { LoginComponent } from './login/login.component';
-import { ProfileComponent } from './profile/profile.component';
-import { ServiceComponent } from './service/service.component';
-import { SshKeysComponent } from './ssh-keys/ssh-keys.component';
-import { AccountComponent } from './account/account.component';
-
-/*
-const routes = [
-  {
-    path: '',
-    component: MgmtComponent,
-  },
-  {
-    path: '*',
-    redirectTo: '/',
-  },
-];
- */
 
 @NgModule({
   declarations: [
@@ -92,6 +82,7 @@ const routes = [
     SnackBarService,
     DialogService,
     JsonPipe,
+    StompRService,
   ],
   bootstrap: [AppComponent],
   entryComponents: [

src/app/types/types.module.ts

@@ -47,6 +47,7 @@ export interface User {
   userinfo: any;
   ssh_keys: SSHKey[];
   deployments: Deployment[];
+  id: number;
 }
 
 interface StateAPI {

src/app/user.service.ts

-import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
+import {Injectable } from '@angular/core';
+import {HttpClient, HttpErrorResponse } from '@angular/common/http';
+import {Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/of';
 
-import { CookieService } from 'ngx-cookie-service';
-import { MatTableDataSource } from '@angular/material';
+import {CookieService } from 'ngx-cookie-service';
+import {MatTableDataSource } from '@angular/material';
 
-import { SnackBarService } from './snackbar.service';
+import {SnackBarService } from './snackbar.service';
+import {StompConfig, StompRService} from '@stomp/ng2-stompjs';
+import {Message} from '@stomp/stompjs';
 
-import { environment } from '../environments/environment';
-import { IdP, User, Service, AuthInfo, AllAuthInfo, UserState, SSHKey, NewSSHKey } from './types/types.module';
+import {environment } from '../environments/environment';
+import {IdP, User, Service, AuthInfo, AllAuthInfo, UserState, SSHKey, NewSSHKey } from './types/types.module';
 
 
 @Injectable()
@@ -27,6 +29,7 @@ export class UserService {
     public cookieService: CookieService,
     public http: HttpClient,
     public snackBar: SnackBarService,
+    private _stompService: StompRService,
   ) {
     this.update();
   }
@@ -74,11 +77,6 @@ export class UserService {
       this.snackBar.open(data['error']);
     }
 
-    if (!this.loggedIn && data.logged_in) {
-      this.snackBar.open('Logged in');
-    }
-
-    this.loggedIn = data.logged_in;
     if (!this.services) {
       this.services = data.services;
     }
@@ -105,6 +103,13 @@ export class UserService {
       this.sshKeyData = null;
       this.userInfoData = null;
     }
+
+    if (!this.loggedIn && data.logged_in) {
+      this.snackBar.open('Logged in');
+      // TODO dirty
+      this.connectLiveUpdates()
+    }
+    this.loggedIn = data.logged_in;
   }
 
   public updateState() {
@@ -224,4 +229,54 @@ export class UserService {
       }
     );
   }
+
+  public initStomp() {
+    // handle with care
+    let login = this.user.id
+    let passcode = this.cookieService.get('sessionid');
+
+    const stompConfig: StompConfig = {
+      // Which server?
+      url: 'wss://hdf-portal.data.kit.edu:15671/ws',
+
+      // Headers
+      // Typical keys: login, passcode, host
+      headers: {
+        login: 'webpage-client:' + login,
+        passcode: passcode,
+      },
+
+      // How often to heartbeat?
+      // Interval in milliseconds, set to 0 to disable
+      heartbeat_in: 0, // Typical value 0 - disabled
+      heartbeat_out: 20000, // Typical value 20000 - every 20 seconds
+      // Wait in milliseconds before attempting auto reconnect
+      // Set to 0 to disable
+      // Typical value 5000 (5 seconds)
+      reconnect_delay: 5000,
+
+      // Will log diagnostics on console
+      debug: true
+    };
+    this._stompService.config = stompConfig;
+    this._stompService.initAndConnect();
+  }
+
+  public connectLiveUpdates() {
+    this.initStomp();
+    let subscription = this._stompService.subscribe(
+      '/exchange/update/' + this.user.id.toString()
+    );
+
+    subscription.map((message: Message) => {
+      return message.body;
+    }).subscribe((msg_body: string) => {
+      this.snackBar.open(
+        'Backend: ' + msg_body
+      );
+      console.log(`Received: ${msg_body}`);
+    });
+  }
+
+
 }