diff --git a/package-lock.json b/package-lock.json
index 0e293c4..54e602a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,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",
@@ -11475,6 +11476,15 @@
"node": ">=6"
}
},
+ "node_modules/pusher-js": {
+ "version": "8.4.0-rc2",
+ "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.4.0-rc2.tgz",
+ "integrity": "sha512-d87GjOEEl9QgO5BWmViSqW0LOzPvybvX6WA9zLUstNdB57jVJuR27zHkRnrav2a3+zAMlHbP2Og8wug+rG8T+g==",
+ "license": "MIT",
+ "dependencies": {
+ "tweetnacl": "^1.0.3"
+ }
+ },
"node_modules/qjobs": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
@@ -13496,6 +13506,12 @@
"node": ">=16 || 14 >=14.17"
}
},
+ "node_modules/tweetnacl": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+ "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
+ "license": "Unlicense"
+ },
"node_modules/type-fest": {
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
@@ -22946,6 +22962,14 @@
"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
"dev": true
},
+ "pusher-js": {
+ "version": "8.4.0-rc2",
+ "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.4.0-rc2.tgz",
+ "integrity": "sha512-d87GjOEEl9QgO5BWmViSqW0LOzPvybvX6WA9zLUstNdB57jVJuR27zHkRnrav2a3+zAMlHbP2Og8wug+rG8T+g==",
+ "requires": {
+ "tweetnacl": "^1.0.3"
+ }
+ },
"qjobs": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
@@ -24479,6 +24503,11 @@
}
}
},
+ "tweetnacl": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+ "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+ },
"type-fest": {
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
diff --git a/package.json b/package.json
index d9ba686..55ddb5d 100644
--- a/package.json
+++ b/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",
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 992aa48..3c5da44 100644
--- a/src/app/components/tchat/tchat-message/tchat-message.component.html
+++ b/src/app/components/tchat/tchat-message/tchat-message.component.html
@@ -1,47 +1,46 @@
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
{{ message.content }}
-
+
+
+
+
+
+
+
-
-
-
-
-
{{ message.content }}
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
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 94190a4..3f813c2 100644
--- a/src/app/components/tchat/tchat-message/tchat-message.component.ts
+++ b/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;
}
-
-
-
}
diff --git a/src/app/interfaces/interfaces.ts b/src/app/interfaces/interfaces.ts
index 438ecef..6a46c2a 100644
--- a/src/app/interfaces/interfaces.ts
+++ b/src/app/interfaces/interfaces.ts
@@ -129,4 +129,10 @@ export interface PageEvent {
rows: number;
page: number;
pageCount: number;
-}
\ No newline at end of file
+}
+
+
+export interface Message {
+ username: string;
+ message: string;
+}
diff --git a/src/app/services/app.service.ts b/src/app/services/app.service.ts
index c65c488..05fbd21 100644
--- a/src/app/services/app.service.ts
+++ b/src/app/services/app.service.ts
@@ -147,4 +147,19 @@ export class AppService {
take(1)
);
}
+
+
+ // username et message
+ sendMessage( username: String, message: String) : Observable
{
+ return this.http.post(this.api + '/conversations',
+ {
+ username: username,
+ message: message
+ }
+ ).pipe(
+ map((res: any) => res),
+ share(),
+ take(1)
+ );
+ }
}