From cab5d9eb118be416ee1a060abef82cc883f5907f Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Wed, 3 Mar 2021 17:35:24 +1100 Subject: [PATCH] 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 | 14 +++++- src/app/app.module.ts | 2 + src/app/auth/auth-http-interceptor.service.ts | 6 +-- src/app/canvas/canvas.component.ts | 2 +- src/app/service/auth.service.ts | 7 +-- src/app/websocket.ts | 50 +++++++++++++++++++ 6 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 src/app/websocket.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 768a44d..64a4999 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,6 +6,7 @@ import { mainMenuItems } from './main-menu-items'; 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', @@ -22,8 +23,12 @@ export class AppComponent implements OnInit , OnDestroy { 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 { @@ -58,6 +63,11 @@ export class AppComponent implements OnInit , OnDestroy { ); this.authService.AutoLogin(); + + setTimeout(() => { + const specialCommand = 'send dummy string for 500 times'; + this.wsService.sendMessage(specialCommand); + }, 2000); } // tslint:disable-next-line:typedef diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 05a13ca..8c63558 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -44,6 +44,7 @@ import { RatingComponent } from './transaction-list/rating.component'; 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'; @@ -95,6 +96,7 @@ import {AuthHttpInterceptor} from './auth/auth-http-interceptor.service'; MenuService, AuthGuard, AuthService, + WebSocketService, { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, diff --git a/src/app/auth/auth-http-interceptor.service.ts b/src/app/auth/auth-http-interceptor.service.ts index bbc66ab..805adae 100644 --- a/src/app/auth/auth-http-interceptor.service.ts +++ b/src/app/auth/auth-http-interceptor.service.ts @@ -27,11 +27,11 @@ export class AuthHttpInterceptor implements HttpInterceptor { }); 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(); } }) ); diff --git a/src/app/canvas/canvas.component.ts b/src/app/canvas/canvas.component.ts index 7b0a8e2..514eb4c 100644 --- a/src/app/canvas/canvas.component.ts +++ b/src/app/canvas/canvas.component.ts @@ -30,7 +30,7 @@ export class CanvasComponent implements OnInit, OnDestroy { } onButtonClick(){ - console.log("ok"); + console.log("on button click default"); this.anyhttp(); } diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts index 08965fc..bdf6b4f 100644 --- a/src/app/service/auth.service.ts +++ b/src/app/service/auth.service.ts @@ -9,6 +9,8 @@ import {Router} from '@angular/router'; @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 (); @@ -19,7 +21,6 @@ export class AuthService { // 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'); @@ -31,7 +32,6 @@ export class AuthService { sfm.session, sfm.sessionExpire ); - console.log("check variable", this.loggedIn); } // tslint:disable-next-line:typedef @@ -42,13 +42,14 @@ export class AuthService { // tslint:disable-next-line:typedef login(email: string, password: string) { - this.http.post('https://svr2021.lawipac.com:8080/api/v1/login', {u: email, p: password}).subscribe( + this.http.post(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 => { diff --git a/src/app/websocket.ts b/src/app/websocket.ts new file mode 100644 index 0000000..6762aaf --- /dev/null +++ b/src/app/websocket.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import {Observable, Subscriber} from 'rxjs'; + + + +@Injectable() +export class WebSocketService { + + public ws: WebSocket; + private url: string; + private observer: Subscriber; + + public createObservableSocket(url: string): Observable { + this.url = url; + const ret = new Observable ( 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); + } +}