Proof of concept messagerie

package.json

@@ -31,6 +31,7 @@
     "ngx-toastr": "^18.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^16.9.1",
+    "pusher-js": "^8.4.0-rc2",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.7.5",
     "tslib": "^2.3.0",

src/app/components/tchat/tchat-message/tchat-message.component.html

@@ -1,47 +1,46 @@
-<!-- Main Chat Area -->
 <div *ngIf="auth.user$ | async as user">
-    <!-- Chat Header -->
-    <header class="bg-white p-4 text-gray-700 dark:border-t dark:border-orange-900 dark:bg-gray-800 dark:text-white">
-        <a href="../../profil?name={{user.name}}"><h1 class="text-2xl font-semibold">{{user.name}}</h1></a>
-    </header>
+  <!-- Chat Header -->
+  <header class="bg-white p-4 text-gray-700 dark:border-t dark:border-orange-900 dark:bg-gray-800 dark:text-white">
+      <a href="../../profil?name={{user.name}}"><h1 class="text-2xl font-semibold">{{user.name}}</h1></a>
+  </header>
 
-    <!-- Chat Messages -->
-    <div class="h-screen overflow-y-auto p-4 pb-36 bg-gray-100 dark:bg-gray-700">
-        <div *ngFor="let message of messages">
-            <!-- Message entrant -->
-            <div *ngIf="message.type === 'incoming'" class="flex mb-4 cursor-pointer">
-              <div class="w-9 h-9 rounded-full flex items-center justify-center mr-2">
-                <img alt="..." src="../../../../assets/happy-cat.jpg" class="w-8 h-8 rounded-full">
-              </div>
-              <div class="flex max-w-96 bg-white rounded-lg p-3 gap-3">
-                <p class="text-gray-700">{{ message.content }}</p>
-              </div>
+  <!-- Chat Messages -->
+  <div class="h-screen overflow-y-auto p-4 pb-36 bg-gray-100 dark:bg-gray-700">
+      <div *ngFor="let msg of messages">
+          <!-- Message entrant -->
+          <div *ngIf="msg.username !== user.name" class="flex mb-4 cursor-pointer">
+            <div class="w-9 h-9 rounded-full flex items-center justify-center mr-2">
+              <img alt="..." src="../../../../assets/happy-cat.jpg" class="w-8 h-8 rounded-full">
             </div>
-
-            <!-- Message sortant -->
-            <div *ngIf="message.type === 'outgoing'" class="flex justify-end mb-4 cursor-pointer">
-              <div class="flex max-w-96 bg-orange-600 text-white rounded-lg p-3 gap-3">
-                <p>{{ message.content }}</p>
-              </div>
-              <div class="w-9 h-9 rounded-full flex items-center justify-center ml-2">
-                <img alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer"
-                    class="w-8 h-8 rounded-full">
-              </div>
+            <div class="flex max-w-96 bg-white rounded-lg p-3 gap-3">
+              <p class="text-gray-700">{{ msg.message }}</p>
+            </div>
+          </div>
+
+          <!-- Message sortant -->
+          <div *ngIf="msg.username === user.name" class="flex justify-end mb-4 cursor-pointer">
+            <div class="flex max-w-96 bg-orange-600 text-white rounded-lg p-3 gap-3">
+              <p>{{ msg.message }}</p>
+            </div>
+            <div class="w-9 h-9 rounded-full flex items-center justify-center ml-2">
+              <img alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer"
+                  class="w-8 h-8 rounded-full">
             </div>
           </div>
-    </div>
-
-    <!-- Chat Input -->
-    <footer class="bg-white p-4 absolute bottom-0 w-3/4 dark:bg-gray-800">
-        <div class="flex items-center">
-            <!-- Utilisez ngModel ici pour lier le champ de saisie au modèle -->
-            <input type="text" [(ngModel)]="newMessage" (keydown.enter)="sendMessage()" placeholder="Tapez un message..."
-                class="w-full p-2 rounded-md border border-gray-400 focus:outline-none focus:border-blue-500">
-            <button (click)="sendMessage()" class="bg-orange-600 text-white px-4 py-1 rounded-md ml-2 hover:bg-orange-700">
-                <span class="material-symbols-outlined">
-                    send
-                </span>
-            </button>
         </div>
-    </footer>
-</div>
+  </div>
+
+  <!-- Chat Input -->
+  <footer class="bg-white p-4 absolute bottom-0 w-3/4 dark:bg-gray-800">
+      <div class="flex items-center">
+          <!-- Utilisez ngModel ici pour lier le champ de saisie au modèle -->
+          <input type="text" [(ngModel)]="message" (keydown.enter)="submit()" placeholder="Tapez un message..."
+              class="w-full p-2 rounded-md border border-gray-400 focus:outline-none focus:border-blue-500">
+          <button (click)="submit()" class="bg-orange-600 text-white px-4 py-1 rounded-md ml-2 hover:bg-orange-700">
+              <span class="material-symbols-outlined">
+                  send
+              </span>
+          </button>
+      </div>
+  </footer>
+</div>

src/app/components/tchat/tchat-message/tchat-message.component.ts

@@ -1,75 +1,60 @@
 import { Component } from '@angular/core';
 import { AuthService } from '@auth0/auth0-angular';
-import { Utilisateur } from '../../../interfaces/interfaces';
+import { Message, Utilisateur } from '../../../interfaces/interfaces';
 import { WebSocketService } from '../../../services/web-socket.service';
 import { AppService } from '../../../services/app.service';
+import Pusher from 'pusher-js';
+
 
 @Component({
   selector: 'app-tchat-message',
   templateUrl: './tchat-message.component.html',
   styleUrls: ['./tchat-message.component.scss']
 })
-export class TchatMessageComponent {
-  user?: Utilisateur;
 
-  messages : any  = [
-    // { content: "Salut je suis intérrésé par le chat Tigrou", type: 'incoming'},
-    // { content: "Bonjour, très bien il est disponible en visite aujoudui", type: 'outgoing'},
-    // { content: "Ok j'arrive", type: 'incoming'},
-  ];
 
-  newMessage: string = '';
+export class TchatMessageComponent {
+  username: String = '';
+  message = '';
 
-  currentRoom: string = '';
 
+  messages: Message[] = [
+    // exemple de données initiales
+    { username: 'Alice', message: 'Bonjour' },
+    { username: 'Bob', message: 'Comment ça va ?' }
+  ];
 
   constructor(
-    private webSocketService: WebSocketService,
     public auth: AuthService,
     private appService: AppService,
     ) {
     this.auth.user$.subscribe((user) => {
-      if (user) {
-        this.currentRoom = '1_3'; // user to asso
-        this.joinRoom(this.currentRoom);
+      if (user && user.name){
+        this.username = user.name;
       }
     });
   }
 
 
   ngOnInit() {
-    this.getMessages();
-  }
-
+    Pusher.logToConsole = true;
 
-  joinRoom(room: string): void {
-    this.webSocketService.joinRoom(room);
-    this.listenForMessages();
-  }
+    const pusher = new Pusher('29fdd82357f17b9e1f8e', {
+      cluster: 'eu'
+    });
 
-  sendMessage(): void {
-    if (this.newMessage.trim() !== '') {
-      this.webSocketService.sendMessage(this.currentRoom, this.newMessage); // Envoyer un message à la salle actuelle
-      this.messages.push({ content: this.newMessage, type: 'outgoing'});
-      this.newMessage = '';
-    }
+    const channel = pusher.subscribe('chat');
+    channel.bind('message', (data: any) => this.messages.push(data));
   }
 
-  getMessages(): void {
-    this.appService.getAllConversationByUser(1).subscribe((convs) => {
-      console.log(' convs:', convs);
-    });
+  submit(): void {
+    this.appService.sendMessage(this.username, this.message).subscribe(
+      () => this.message = ''
+    );
   }
 
-  private listenForMessages(): void {
-    this.webSocketService.onMessage((message: string) => {
-      this.messages.push({ content: message, type: 'incoming'});
-      // Note: Avec Socket.io, onMessage est un observable qui continue de recevoir des messages,
-      // donc pas besoin de rappeler listenForMessages() ici
-    });
+  handleMessageChange(event: Event): void {
+    this.message = (event.target as HTMLInputElement).value;
   }
 
-
-
-
 }

src/app/interfaces/interfaces.ts

@@ -129,4 +129,10 @@ export interface PageEvent {
   rows: number;
   page: number;
   pageCount: number;
-}
+}
+
+
+export interface Message {
+  username: string;
+  message: string;
+}

src/app/services/app.service.ts

@@ -147,4 +147,19 @@ export class AppService {
       take(1)
     );
   }
+
+
+  // username et message
+  sendMessage( username: String, message: String) : Observable<any> {
+    return this.http.post(this.api + '/conversations', 
+    {
+      username: username,
+      message: message
+    }
+    ).pipe(
+      map((res: any) => res),
+      share(),
+      take(1)
+    );
+  }
 }