From 614532d297f02ac72aae6fd751a56cc2480d9be1 Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Mon, 15 Jul 2024 21:11:56 +0200 Subject: [PATCH 1/4] WEP Message --- src/app/app-routing.module.ts | 1 + src/app/app.module.ts | 5 ++ .../tchat-message.component.html | 27 +++---- .../tchat-message/tchat-message.component.ts | 73 +++++++++---------- src/app/interfaces/interfaces.ts | 8 +- src/app/services/app.service.ts | 32 +++++--- src/app/services/web-socket.service.ts | 41 +++-------- 7 files changed, 89 insertions(+), 98 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 77487e8..c599cc9 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -75,6 +75,7 @@ const routes: Routes = [ { path: 'tchat', component: TchatComponent, + canActivate: [AuthGuard], }, { path : 'callback', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e102b7e..20c6dde 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -125,6 +125,11 @@ import { PaginatorModule } from 'primeng/paginator'; uri: `${environment.urlAPI}/*`, httpMethod: HttpMethod.Patch, }, + // Protéger la route GET /v1/conversations/1/messages + { + uri: `${environment.urlAPI}/conversations/*`, + httpMethod: HttpMethod.Get, + }, ], }, }), diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.html b/src/app/components/tchat/tchat-message/tchat-message.component.html index 3c5da44..da39a18 100644 --- a/src/app/components/tchat/tchat-message/tchat-message.component.html +++ b/src/app/components/tchat/tchat-message/tchat-message.component.html @@ -7,20 +7,18 @@
- -
+
...
-

{{ msg.message }}

+

{{ msg.contenu }}

- -
+
-

{{ msg.message }}

+

{{ msg.contenu }}

...
- - - -
+ + +
diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.ts b/src/app/components/tchat/tchat-message/tchat-message.component.ts index 3f813c2..ffa6ee0 100644 --- a/src/app/components/tchat/tchat-message/tchat-message.component.ts +++ b/src/app/components/tchat/tchat-message/tchat-message.component.ts @@ -1,60 +1,53 @@ -import { Component } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { AppService } from '../../../services/app.service'; import { AuthService } from '@auth0/auth0-angular'; -import { Message, Utilisateur } from '../../../interfaces/interfaces'; import { WebSocketService } from '../../../services/web-socket.service'; -import { AppService } from '../../../services/app.service'; -import Pusher from 'pusher-js'; - +import { Message } from '../../../interfaces/interfaces'; @Component({ selector: 'app-tchat-message', templateUrl: './tchat-message.component.html', - styleUrls: ['./tchat-message.component.scss'] + styleUrls: ['./tchat-message.component.scss'], }) - - -export class TchatMessageComponent { - username: String = ''; +export class TchatMessageComponent implements OnInit { + // @Input() conversationId: number; + conversationId = 1; + username: string = ''; message = ''; - - - messages: Message[] = [ - // exemple de données initiales - { username: 'Alice', message: 'Bonjour' }, - { username: 'Bob', message: 'Comment ça va ?' } - ]; + messages: Message[] = []; constructor( public auth: AuthService, private appService: AppService, - ) { + private webSocketService: WebSocketService + ) {} + + ngOnInit(): void { this.auth.user$.subscribe((user) => { - if (user && user.name){ - this.username = user.name; + if (user) { + this.username = user.name || 'toto'; + + // Call getMessages once user is authenticated + this.appService.getMessages(this.conversationId).subscribe((messages: Message[]) => { + this.messages = messages; + console.log('🚀 ~ TchatMessageComponent ~ this.appService.getMessages ~ this.messages:', this.messages); + }); + + // Subscribe to WebSocket messages once user is authenticated + this.webSocketService.subscribeToChannel(`conversation-${this.conversationId}`, 'new-message', (data: Message) => { + this.messages.push(data); + }); } }); } - - ngOnInit() { - Pusher.logToConsole = true; - - const pusher = new Pusher('29fdd82357f17b9e1f8e', { - cluster: 'eu' - }); - - const channel = pusher.subscribe('chat'); - channel.bind('message', (data: any) => this.messages.push(data)); - } - submit(): void { - this.appService.sendMessage(this.username, this.message).subscribe( - () => this.message = '' - ); - } - - handleMessageChange(event: Event): void { - this.message = (event.target as HTMLInputElement).value; + this.auth.user$.subscribe((user) => { + if (user && user.sub) { + this.appService.sendMessage(this.conversationId, 1, this.message).subscribe(() => { + this.message = ''; + }); + } + }); } - } diff --git a/src/app/interfaces/interfaces.ts b/src/app/interfaces/interfaces.ts index 6a46c2a..e0f9009 100644 --- a/src/app/interfaces/interfaces.ts +++ b/src/app/interfaces/interfaces.ts @@ -133,6 +133,10 @@ export interface PageEvent { export interface Message { - username: string; - message: string; + contenu: string + conversationsId : number; + createdAt: string + id: number + isAuthor: boolean + utilisateursId: number } diff --git a/src/app/services/app.service.ts b/src/app/services/app.service.ts index 05fbd21..6b6a03a 100644 --- a/src/app/services/app.service.ts +++ b/src/app/services/app.service.ts @@ -148,18 +148,32 @@ export class AppService { ); } - - // username et message - sendMessage( username: String, message: String) : Observable { - return this.http.post(this.api + '/conversations', - { - username: username, - message: message - } - ).pipe( + sendMessage(conversationId: number, userId: number, content: string) { + return this.http.post(`${this.api}/conversations/${conversationId}/messages`, { + userId, + content, + }).pipe( map((res: any) => res), share(), take(1) ); } + + getMessages(conversationId: number) { + return this.http.get(`${this.api}/conversations/${conversationId}/messages`).pipe( + map((res: any) => res), + share(), + take(1) + );; + } + + getConversations(userId: number) { + return this.http.get(`${this.api}/conversations/user/${userId}`).pipe( + map((res: any) => res), + share(), + take(1) + );; + } + + } diff --git a/src/app/services/web-socket.service.ts b/src/app/services/web-socket.service.ts index cb389dc..cf89513 100644 --- a/src/app/services/web-socket.service.ts +++ b/src/app/services/web-socket.service.ts @@ -1,43 +1,20 @@ import { Injectable } from '@angular/core'; -import { io, Socket } from 'socket.io-client'; -import { environment } from 'src/environments/environment'; +import Pusher from 'pusher-js'; @Injectable({ providedIn: 'root', }) export class WebSocketService { - api = environment.api.serverUrl; - private socket: Socket = io(this.api); + private pusher: Pusher; -// public sendMessage(message: string): void { -// this.socket.emit('message', message); -// } - -// public onMessage(): Promise { -// return new Promise(resolve => { -// this.socket.on('message', (data: string) => { -// resolve(data); -// }); -// }); -// } - - joinRoom(room: string): void { - this.socket.emit('joinRoom', { room }); - } - - sendMessage(room: string, message: string): void { - this.socket.emit('message', { room, message }); + constructor() { + this.pusher = new Pusher('29fdd82357f17b9e1f8e', { + cluster: 'eu', + }); } - onMessage(callback: (message: string) => void): void { - this.socket.on('message', callback); + subscribeToChannel(channelName: string, eventName: string, callback: (data: any) => void) { + const channel = this.pusher.subscribe(channelName); + channel.bind(eventName, callback); } - - // Méthode pour écouter les notifications de la room - onRoomNotification(callback: (message: string) => void): void { - this.socket.on('notification', callback); - } - - - // Ajoutez d'autres méthodes au besoin... } From 5bae6e7bd0368d5aa13c5f2f137c9685b9491a7b Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Tue, 16 Jul 2024 18:50:12 +0200 Subject: [PATCH 2/4] Update message --- src/app/app.module.ts | 8 +- .../tchat-message.component.html | 55 +++++------ .../tchat-message/tchat-message.component.ts | 56 ++++++----- src/app/components/tchat/tchat.component.html | 98 +++++++++---------- src/app/components/tchat/tchat.component.ts | 31 ++++-- src/app/interfaces/interfaces.ts | 31 +++--- src/app/services/app.service.ts | 22 ++--- src/app/services/user.service.ts | 19 +++- 8 files changed, 176 insertions(+), 144 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 20c6dde..a1f6e94 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -125,11 +125,15 @@ import { PaginatorModule } from 'primeng/paginator'; uri: `${environment.urlAPI}/*`, httpMethod: HttpMethod.Patch, }, - // Protéger la route GET /v1/conversations/1/messages + // Protéger la route GET messages { - uri: `${environment.urlAPI}/conversations/*`, + uri: `${environment.urlAPI}/users/infos`, httpMethod: HttpMethod.Get, }, + { + uri: `${environment.urlAPI}/messages/*`, + httpMethod: HttpMethod.Get, + } ], }, }), diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.html b/src/app/components/tchat/tchat-message/tchat-message.component.html index da39a18..5fb5d3d 100644 --- a/src/app/components/tchat/tchat-message/tchat-message.component.html +++ b/src/app/components/tchat/tchat-message/tchat-message.component.html @@ -1,42 +1,41 @@ -
+
-

{{user.name}}

 + +

{{selectedConversation!.nom}}

+
-
-
-
- ... -
-
-

{{ msg.contenu }}

-
-
- -
-
-

{{ msg.contenu }}

-
-
- ... -
-
+
+ +
+
+ ...
+
+

{{ msg.contenu + ' (receveur)' }}

+
+
+ +
+
+

{{ msg.contenu + ' (envoyeur)' }}

+
+
+ ... +
+
+
-