From 281556b0a30dd80ad84e605daca823cb5472f7a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20K=C3=A4sler?= <tom.kaesler@mni.thm.de>
Date: Thu, 31 Jan 2019 16:00:50 +0100
Subject: [PATCH] add stomp to project
add feedback messages to communicate w/ backend
---
package.json | 1 +
src/app/app.module.ts | 12 ++++++
.../feedback-barometer-page.component.ts | 41 +++++++++++++++----
src/app/models/messages/create-feedback.ts | 13 ++++++
src/app/models/messages/get-feedback.ts | 7 ++++
src/app/rx-stomp.config.ts | 23 +++++++++++
6 files changed, 89 insertions(+), 8 deletions(-)
create mode 100644 src/app/models/messages/create-feedback.ts
create mode 100644 src/app/models/messages/get-feedback.ts
create mode 100644 src/app/rx-stomp.config.ts
diff --git a/package.json b/package.json
index e6f6897bd..4a116219e 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 764f87815..b0dbf9400 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts b/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts
index 55f0725ab..e4e74b34d 100644
--- a/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts
+++ b/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts
@@ -1,7 +1,12 @@
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);
+ }
}
diff --git a/src/app/models/messages/create-feedback.ts b/src/app/models/messages/create-feedback.ts
new file mode 100644
index 000000000..05bea8650
--- /dev/null
+++ b/src/app/models/messages/create-feedback.ts
@@ -0,0 +1,13 @@
+export class CreateFeedback {
+ type: string;
+ payload: {
+ value: number;
+ };
+
+ constructor(val: number) {
+ this.type = 'CreateFeedback';
+ this.payload = {
+ value: val
+ };
+ }
+}
diff --git a/src/app/models/messages/get-feedback.ts b/src/app/models/messages/get-feedback.ts
new file mode 100644
index 000000000..563ea0ab7
--- /dev/null
+++ b/src/app/models/messages/get-feedback.ts
@@ -0,0 +1,7 @@
+export class GetFeedback {
+ type: string;
+
+ constructor() {
+ this.type = 'GetFeedback';
+ }
+}
diff --git a/src/app/rx-stomp.config.ts b/src/app/rx-stomp.config.ts
new file mode 100644
index 000000000..70326222a
--- /dev/null
+++ b/src/app/rx-stomp.config.ts
@@ -0,0 +1,23 @@
+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);
+ }
+};
--
GitLab