add stomp to project

add feedback messages to communicate w/ backend

package.json

@@ -27,6 +27,7 @@
     "@angular/router": "7.1.0",
     "@ngx-translate/core": "^10.0.2",
     "@ngx-translate/http-loader": "^3.0.1",
+    "@stomp/ng2-stompjs": "^7.2.0",
     "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "hammerjs": "^2.0.8",

src/app/app.module.ts

@@ -24,6 +24,9 @@ import { LanguageService } from './services/util/language.service';
 import { MarkdownService, MarkedOptions } from 'ngx-markdown';
 import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
 import { HomePageComponent } from './components/home/home-page/home-page.component';
+import { InjectableRxStompConfig, RxStompService, rxStompServiceFactory } from '@stomp/ng2-stompjs';
+import { myRxStompConfig } from './rx-stomp.config';
+
 export function dialogClose(dialogResult: any) {
 }
 
@@ -54,6 +57,15 @@ export function dialogClose(dialogResult: any) {
       useClass: AuthenticationInterceptor,
       multi: true
     },
+    {
+      provide: InjectableRxStompConfig,
+      useValue: myRxStompConfig
+    },
+    {
+      provide: RxStompService,
+      useFactory: rxStompServiceFactory,
+      deps: [InjectableRxStompConfig]
+    },
     NotificationService,
     AuthenticationService,
     AuthenticationGuard,

src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { AuthenticationService } from '../../../services/http/authentication.service';
 import { UserRole } from '../../../models/user-roles.enum';
 import { NotificationService } from '../../../services/util/notification.service';
+import { RxStompService } from '@stomp/ng2-stompjs';
+import { Message } from '@stomp/stompjs';
+import { CreateFeedback } from '../../../models/messages/create-feedback';
+import { GetFeedback } from '../../../models/messages/get-feedback';
 
 /* ToDo: Use TranslateService */
 
@@ -18,16 +23,29 @@ export class FeedbackBarometerPageComponent implements OnInit {
     { state: 3, name: 'sentiment_very_dissatisfied', message: 'Abgehängt.', count: 0, }
   ];
   userRole: UserRole;
-
-  dummy = [2, 3, 2, 1]; // dummy data -> delete this with api implementation and add get-data
+  roomId: string;
 
   constructor(
     private authenticationService: AuthenticationService,
-    private notification: NotificationService, ) {}
+    private notification: NotificationService,
+    private rxStompService: RxStompService,
+    private route: ActivatedRoute, ) {
+      this.roomId = this.route.snapshot.params.roomId;
+    }
 
   ngOnInit() {
     this.userRole = this.authenticationService.getRole();
-    this.updateFeedback(this.dummy);
+
+    this.rxStompService.watch(`/room/${this.roomId}/feedback.stream`).subscribe((message: Message) => {
+      this.parseIncomingMessage(message);
+    });
+
+    const getFeedback = new GetFeedback();
+
+    this.rxStompService.publish({
+      destination: `/backend/room/${this.roomId}/feedback.query`,
+      body: JSON.stringify(getFeedback)
+    });
   }
 
   private updateFeedback(data) {
@@ -38,10 +56,12 @@ export class FeedbackBarometerPageComponent implements OnInit {
     }
   }
 
-  submitFeedback(state: string) {
-    this.dummy[state] += 1; // delete this with api implementation and add submit-data
-    this.updateFeedback(this.dummy);
-    this.notification.show(`Feedback submitted to room.`);
+  submitFeedback(state: number) {
+    const createFeedback = new CreateFeedback(state);
+    this.rxStompService.publish({
+      destination: `/backend/room/${this.roomId}/feedback.command`,
+      body: JSON.stringify(createFeedback)
+    });
   }
 
   toggle() {
@@ -49,4 +69,9 @@ export class FeedbackBarometerPageComponent implements OnInit {
     const temp = 'stopped'; // add status variable
     this.notification.show(`Feedback transmission ${ temp }.`);
   }
+
+  parseIncomingMessage(message: Message) {
+    const values = JSON.parse(message.body).payload.values;
+    this.updateFeedback(values);
+  }
 }

src/app/models/messages/create-feedback.ts

+export class CreateFeedback {
+  type: string;
+  payload: {
+    value: number;
+  };
+
+  constructor(val: number) {
+    this.type = 'CreateFeedback';
+    this.payload = {
+      value: val
+    };
+  }
+}

src/app/models/messages/get-feedback.ts

+export class GetFeedback {
+  type: string;
+
+  constructor() {
+    this.type = 'GetFeedback';
+  }
+}

src/app/rx-stomp.config.ts

+import { InjectableRxStompConfig } from '@stomp/ng2-stompjs';
+
+export const myRxStompConfig: InjectableRxStompConfig = {
+  // Which server?
+  brokerURL: `ws://${window.location.hostname}:8080/ws/websocket`,
+
+  // How often to heartbeat?
+  // Interval in milliseconds, set to 0 to disable
+  heartbeatIncoming: 0, // Typical value 0 - disabled
+  heartbeatOutgoing: 20000, // Typical value 20000 - every 20 seconds
+
+  // Wait in milliseconds before attempting auto reconnect
+  // Set to 0 to disable
+  // Typical value 500 (500 milli seconds)
+  reconnectDelay: 1000,
+
+  // Will log diagnostics on console
+  // It can be quite verbose, not recommended in production
+  // Skip this key to stop logging to console
+  debug: (msg: string): void => {
+    // console.log(new Date(), 'STOMP debug: ' + msg);
+  }
+};