added websocket function so that the app can listen from the server it opens a whole new arean for multiple direction chat capability.

src/app/app.component.ts

 import { AuthService } from './service/auth.service';
 import { MenuService } from './service/menu.service';
 import {apiV1LoginResponse} from './models/api-v1-login-response';
+import {WebSocketService} from './websocket';
 
 @Component({
   selector: 'app-root',
 
       private loginSub: Subscription;
 
-        constructor(private menuService: MenuService, private authService: AuthService){
-        }
+      constructor(private menuService: MenuService, private authService: AuthService, private wsService: WebSocketService){
+          wsService.createObservableSocket(this.authService.apiWsUrl)
+            .subscribe(m => {
+              console.log('websocket server send this :', m);
+            });
+      }
 
         // check menuItem has fontawesome
       public menuItemHasFontawesome (item: any) : boolean {
     );
 
     this.authService.AutoLogin();
+
+    setTimeout(() => {
+      const specialCommand = 'send dummy string for 500 times';
+      this.wsService.sendMessage(specialCommand);
+    }, 2000);
   }
 
   // tslint:disable-next-line:typedef

src/app/app.module.ts

 import { TransDetailsComponent } from './trans-details/trans-details.component';
 import { TransTailsComponent } from './trans-details/trans-tails/trans-tails.component';
 import {AuthHttpInterceptor} from './auth/auth-http-interceptor.service';
+import {WebSocketService} from './websocket';
 
 
 
     MenuService,
     AuthGuard,
     AuthService,
+    WebSocketService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: AuthHttpInterceptor,

src/app/auth/auth-http-interceptor.service.ts

     });
     return next.handle(authReq).pipe(
       tap(event => {
-        console.log(event);
+        //console.log(event);
         if (event.type === HttpEventType.Response){
           console.log('Response received');
-          console.log(event.body);
-          this.auth.logout();
+          //console.log(event.body);
+          //this.auth.logout();
         }
       })
     );

src/app/canvas/canvas.component.ts

   }
 
   onButtonClick(){
-    console.log("ok");
+    console.log("on button click default");
     this.anyhttp();
   }
 

src/app/service/auth.service.ts

 @Injectable()
 export class AuthService {
 
+    public apiUrl = 'https://svr2021.lawipac.com:8080/api/v1/';
+    public apiWsUrl = 'wss://svr2021.lawipac.com:8080/api/v1/ws';
     public loggedIn = new apiV1LoginResponse(false, '','',0 );
     loginSuccess = new EventEmitter <apiV1LoginResponse>();
 
 
   // tslint:disable-next-line:typedef
     public AutoLogin() {
-      console.log("autologin");
       const sfm: apiV1LoginResponse = JSON.parse(localStorage.getItem('sfm'));
       if (!sfm) {
         console.log('no auto login');
         sfm.session,
         sfm.sessionExpire
       );
-      console.log("check variable", this.loggedIn);
     }
 
   // tslint:disable-next-line:typedef
   // tslint:disable-next-line:typedef
     login(email: string, password: string) {
 
-      this.http.post<apiV1LoginResponse>('https://svr2021.lawipac.com:8080/api/v1/login', {u: email, p: password}).subscribe(
+      this.http.post<apiV1LoginResponse>(this.apiUrl + 'login', {u: email, p: password}).subscribe(
         responseData => {
            this.loggedIn.session = responseData['Biukop-Session'];
            this.loggedIn.login = responseData.login;
            this.loggedIn.machineId = responseData['Biukop-Mid'];
            this.loggedIn.sessionExpire = responseData.sessionExpire;
            localStorage.setItem('sfm', JSON.stringify(this.loggedIn));
+           localStorage.setItem('mid', this.loggedIn.machineId);
            this.loginSuccess.emit(responseData);
          },
         error => {

src/app/websocket.ts

+import { Injectable } from '@angular/core';
+import {Observable, Subscriber} from 'rxjs';
+
+
+
+@Injectable()
+export class WebSocketService {
+
+  public ws: WebSocket;
+  private url: string;
+  private observer: Subscriber<string>;
+
+  public createObservableSocket(url: string): Observable<string> {
+    this.url = url;
+    const ret = new Observable<string> ( observer => {
+      this.observer = observer;
+    });
+    this.startWebsocket();
+    return ret;
+  }
+
+  // tslint:disable-next-line:typedef
+  public onMessage(event){
+    this.observer.next(event.data);
+  }
+
+  // tslint:disable-next-line:typedef
+  public onError(event){
+    console.log('on error ', event);
+  }
+
+  // tslint:disable-next-line:typedef
+  public onClose(event){
+    console.log('websocket closed.. reconnect in 1s ..');
+    setTimeout(() => { this.startWebsocket(); } , 1000);
+  }
+
+  // tslint:disable-next-line:typedef
+  public startWebsocket() {
+    console.log('starting websocket now..', this.url);
+    this.ws = new WebSocket(this.url);
+    this.ws.onmessage = this.onMessage.bind(this);
+    this.ws.onerror = this.onError.bind(this);
+    this.ws.onclose = this.onClose.bind(this);
+  }
+
+  public sendMessage(message: any): void {
+    this.ws.send(message);
+  }
+}