added functions and web-socket to chat in group

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

@@ -1,12 +1,12 @@
-import {Component, inject, input, OnInit, signal} from '@angular/core';
-import {GetGroupDetailsDto, GetMessageDto, MessagesService} from "../../services/api";
+import {Component, inject, input, OnDestroy, OnInit} from '@angular/core';
+import {GetGroupDetailsDto, MessagesService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
-import {AuthManageService} from "../../services/auth-manage";
-import {jwtDecode} from "jwt-decode";
-import {DatePipe} from "@angular/common";
 import {addIcons} from "ionicons";
 import {chatbubbleEllipsesOutline, moonOutline} from 'ionicons/icons';
+import {ChatService} from "../../services/chat-service";
+import {MessagesListComponent} from "../messages-list/messages-list.component";
+import {MessageFormComponent} from "../message-form/message-form.component";
 
 addIcons({
     "chatbubble-ellipses-outline" : chatbubbleEllipsesOutline,
@@ -18,21 +18,20 @@ addIcons({
     templateUrl: './message.component.html',
     styleUrls: ['./message.component.scss'],
     imports: [
-        DatePipe,
-        IonicModule
+        IonicModule,
+        MessagesListComponent,
+        MessageFormComponent
     ]
 })
-export class MessageComponent implements OnInit {
+export class MessageComponent implements OnInit, OnDestroy {
     private messagesService = inject(MessagesService);
-    private authService = inject(AuthManageService);
     private loadCtrl = inject(LoadingController);
     private toastCtrl = inject(ToastController);
+    private chatService = inject(ChatService);
 
-    messages = signal<GetMessageDto[]>([]);
+    messages = this.chatService.messages;
     groupId = input.required<GetGroupDetailsDto["id"]>();
 
-    currentUser = 0;
-
     async ngOnInit() {
         const loading = await this.loadCtrl.create({
             message: 'Chargement...',
@@ -42,8 +41,8 @@ export class MessageComponent implements OnInit {
 
         try {
             const messages = await firstValueFrom(this.messagesService.getMessagesEndpoint(this.groupId()));
-            this.messages.set(messages);
-            this.currentUser = Number(jwtDecode<any>(this.authService.getToken()).UserId);
+            this.chatService.setMessages(messages);
+            await this.chatService.connect(this.groupId());
         }
         catch {
             const toast = await this.toastCtrl.create({
@@ -55,4 +54,8 @@ export class MessageComponent implements OnInit {
         }
         await loading.dismiss();
     }
+
+    async ngOnDestroy() {
+        await this.chatService.disconnect();
+    }
 }