front-end sockets gg

package-lock.json

@@ -411,6 +411,22 @@
         "semver-intersect": "^1.1.2"
       }
     },
+    "@stomp/ng2-stompjs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@stomp/ng2-stompjs/-/ng2-stompjs-4.0.1.tgz",
+      "integrity": "sha512-LiP/VoCLGhwVR56T0WCLN3pV1Cx8ifgteNIKzAtKngJJjtkwk9cHAoiPz/u3ZPmuCxcd+JpGrIM/j0utg2CfUg==",
+      "requires": {
+        "@stomp/stompjs": "^4.0.0 >=4.0.7"
+      }
+    },
+    "@stomp/stompjs": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-4.0.7.tgz",
+      "integrity": "sha512-2fI/P978d7Kux3KqOfF5GLkiCbwgrPjOZwkgr0qZvVh9b+kHVueqhkxDGIGVyyrUO4Iwdmy5s6sXPc5RxhFlQA==",
+      "requires": {
+        "websocket": "^1.0.24"
+      }
+    },
     "@types/jasmine": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.8.tgz",
@@ -2369,7 +2385,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -3080,7 +3095,6 @@
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
       "integrity": "sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=",
-      "dev": true,
       "requires": {
         "original": ">=0.0.5"
       }
@@ -3705,14 +3719,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3727,20 +3739,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3857,8 +3866,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3870,7 +3878,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3885,7 +3892,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3893,14 +3899,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3919,7 +3923,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4000,8 +4003,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4013,7 +4015,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4135,7 +4136,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4756,8 +4756,7 @@
     "http-parser-js": {
       "version": "0.4.13",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.13.tgz",
-      "integrity": "sha1-O9bW/ebjFyyTNMOzO2wZPYD+ETc=",
-      "dev": true
+      "integrity": "sha1-O9bW/ebjFyyTNMOzO2wZPYD+ETc="
     },
     "http-proxy": {
       "version": "1.17.0",
@@ -4926,8 +4925,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
       "version": "1.3.5",
@@ -5221,8 +5219,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-utf8": {
       "version": "0.2.1",
@@ -5609,8 +5606,7 @@
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
-      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
-      "dev": true
+      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE="
     },
     "json5": {
       "version": "0.5.1",
@@ -6494,8 +6490,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -6517,7 +6512,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
       "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
-      "dev": true,
       "optional": true
     },
     "nanomatch": {
@@ -7124,7 +7118,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.1.tgz",
       "integrity": "sha512-IEvtB5vM5ULvwnqMxWBLxkS13JIEXbakizMSo3yoPNPCIWzg8TG3Usn/UhXoZFM/m+FuEA20KdzPSFq/0rS+UA==",
-      "dev": true,
       "requires": {
         "url-parse": "~1.4.0"
       }
@@ -7807,8 +7800,7 @@
     "querystringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.0.0.tgz",
-      "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==",
-      "dev": true
+      "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw=="
     },
     "randomatic": {
       "version": "3.0.0",
@@ -8187,8 +8179,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resolve": {
       "version": "1.8.1",
@@ -8271,9 +8262,9 @@
       }
     },
     "rxjs": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.1.tgz",
-      "integrity": "sha512-OwMxHxmnmHTUpgO+V7dZChf3Tixf4ih95cmXjzzadULziVl/FKhHScGLj4goEw9weePVOH2Q0+GcCBUhKCZc/g==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
+      "integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -8959,6 +8950,29 @@
         }
       }
     },
+    "sockjs-client-web": {
+      "version": "1.1.1-alpha.2",
+      "resolved": "https://registry.npmjs.org/sockjs-client-web/-/sockjs-client-web-1.1.1-alpha.2.tgz",
+      "integrity": "sha512-5z0kLtfyhWym0d04VQrAxB+5+85OY6T82gFYhChF4JcsWWJInVLt2frK95bnD2igl3jtgGaf/V5yA9xrTNoy7A==",
+      "requires": {
+        "debug": "^2.2.0",
+        "eventsource": "~0.1.6",
+        "faye-websocket": "~0.11.0",
+        "inherits": "^2.0.1",
+        "json3": "^3.3.2",
+        "url-parse": "^1.1.1"
+      },
+      "dependencies": {
+        "faye-websocket": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
+          "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
+          "requires": {
+            "websocket-driver": ">=0.5.1"
+          }
+        }
+      }
+    },
     "source-list-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
@@ -9676,6 +9690,15 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "typescript": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
@@ -9926,7 +9949,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.1.tgz",
       "integrity": "sha512-x95Td74QcvICAA0+qERaVkRpTGKyBHHYdwL2LXZm5t/gBtCB9KQSO/0zQgSTYEV1p0WcvSg79TLNPSvd5IDJMQ==",
-      "dev": true,
       "requires": {
         "querystringify": "^2.0.0",
         "requires-port": "^1.0.0"
@@ -10413,11 +10435,22 @@
         "webpack-core": "^0.6.8"
       }
     },
+    "websocket": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.26.tgz",
+      "integrity": "sha512-fjcrYDPIQxpTnqFQ9JjxUQcdvR89MFAOjPBlF+vjOt49w/XW4fJknUoMz/mDIn2eK1AdslVojcaOxOqyZZV8rw==",
+      "optional": true,
+      "requires": {
+        "debug": "^2.2.0",
+        "nan": "^2.3.3",
+        "typedarray-to-buffer": "^3.1.2",
+        "yaeti": "^0.0.6"
+      }
+    },
     "websocket-driver": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
       "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
-      "dev": true,
       "requires": {
         "http-parser-js": ">=0.4.0",
         "websocket-extensions": ">=0.1.1"
@@ -10426,8 +10459,7 @@
     "websocket-extensions": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
-      "dev": true
+      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
     },
     "when": {
       "version": "3.6.4",
@@ -10565,6 +10597,12 @@
       "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
       "dev": true
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=",
+      "optional": true
+    },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",

package.json

@@ -20,9 +20,11 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "@stomp/ng2-stompjs": "^4.0.1",
     "angular-in-memory-web-api": "^0.6.0",
     "core-js": "^2.5.4",
-    "rxjs": "^6.0.0",
+    "rxjs": "^6.2.2",
+    "sockjs-client-web": "^1.1.1-alpha.2",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {

src/app/app.module.ts

@@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { StompConfig, StompService } from '@stomp/ng2-stompjs';
+import * as SockJS from 'sockjs-client';
 
 import { AppComponent } from './app.component';
 import { StatusComponent } from './timeline/status/status.component';
@@ -16,6 +18,26 @@ import { MessageComponent } from './inbox/message/message.component';
 import { RouterModule, Routes } from '@angular/router';
 import { ChatroomComponent } from './chatroom/chatroom.component';
 
+export function socketProvider() {
+	return new SockJS('http://localhost:8080/stomp');
+}
+
+const stompConfig: StompConfig = {
+	url: socketProvider,
+
+	headers: {
+		login: 'guest',
+		passcode: 'guest'
+	},
+
+	heartbeat_in: 0,
+	heartbeat_out: 5000,
+
+	reconnect_delay: 5000,
+	debug: true
+
+};
+
 const appRoutes: Routes = [
 	{ path: '', component: TimelineComponent },
 	{ path: 'chatroom', component: ChatroomComponent }
@@ -44,7 +66,13 @@ const appRoutes: Routes = [
 			{ enableTracing: false }
 		),
 	],
-	providers: [],
+	providers: [
+		StompService,
+		{
+			provide: StompConfig,
+			useValue: stompConfig
+		}
+	],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/post.service.ts

@@ -7,7 +7,9 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 
 export class PostService {
 
-	constructor( private http: HttpClient ) {}
+	constructor(private http: HttpClient) {
+
+	}
 
 	getAllPosts() {
 		return this.http.get('/api/post/all').toPromise();

src/app/timeline/timeline.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Subscription  } from 'rxjs';
+import { StompService } from '@stomp/ng2-stompjs';
 import { PostService } from '../post.service';
 
 @Component({
@@ -6,13 +9,34 @@ import { PostService } from '../post.service';
 	templateUrl: './timeline.component.html',
 	styleUrls: ['./timeline.component.css']
 })
+
 export class TimelineComponent implements OnInit {
+	private subscription: Subscription;
+	public messages: Observable<any>;
+
+	public subscribed: boolean;
+	public mq: Array<string> = [];
+	public count = 0;
+	private _counter = 1;
+
 	posts: any;
 
-	constructor( private postService: PostService ) { }
+	constructor(
+		private postService: PostService,
+		private _stompService: StompService) { }
 
 	ngOnInit() {
-		this.getAllPostsFromService();
+		this.subscribed = false;
+		this.subscribe();
+		// this.getAllPostsFromService();
+	}
+
+	public subscribe() {
+		if (this.subscribed) {
+			return;
+		}
+
+		this.messages = this._stompService.subscribe('')
 	}
 
 	async getAllPostsFromService() {