4 replies

Real-time Chat Messages Not Appearing in Angular & Spring Boot Application

Hello everyone,

I'm working on a chat application using Angular on the frontend and Spring Boot on the backend. The chat messages are not appearing in real-time for the recipient, even though the WebSocket connection seems to be established correctly. Here’s a summary of the setup and the issue:

Problem Description
The messages are successfully sent from the sender, processed by the backend, saved in the database, and logged as sent to the recipient. However, the recipient does not receive the messages in real-time. The recipient only sees the messages after refreshing the page, which loads the messages from the database.

I'm struggling with this prob , its been 2 weeks right now

<div class="chat-container">
  <div class="chat-sidebar">
    <h3>Conversations Archivées</h3>
    <ul>
      <li *ngFor="let conv of archivedConversations" (click)="selectRecipient(conv.userId)">
        Conversation avec {{ conv.userId }}
      </li>
    </ul>
  </div>
  <div class="chat-main">
    <div class="chat-header">
      <input type="text" placeholder="Matricule du destinataire" [(ngModel)]="recipientId" />
      <button (click)="loadMessages()">Charger l'historique</button>
    </div>
    <div class="chat-messages">
      <div *ngFor="let message of messages" class="chat-message" [ngClass]="{'sent': message.senderId === userMatricule, 'received': message.senderId !== userMatricule}">
        <p>{{ message.content }}</p>
        <span>{{ message.timestamp | date:'short' }}</span>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" placeholder="Entrez votre message" [(ngModel)]="newMessage" />
      <button (click)="sendMessage()">Envoyer</button>
    </div>
  </div>
</div>

<div class="chat-container">
  <div class="chat-sidebar">
    <h3>Conversations Archivées</h3>
    <ul>
      <li *ngFor="let conv of archivedConversations" (click)="selectRecipient(conv.userId)">
        Conversation avec {{ conv.userId }}
      </li>
    </ul>
  </div>
  <div class="chat-main">
    <div class="chat-header">
      <input type="text" placeholder="Matricule du destinataire" [(ngModel)]="recipientId" />
      <button (click)="loadMessages()">Charger l'historique</button>
    </div>
    <div class="chat-messages">
      <div *ngFor="let message of messages" class="chat-message" [ngClass]="{'sent': message.senderId === userMatricule, 'received': message.senderId !== userMatricule}">
        <p>{{ message.content }}</p>
        <span>{{ message.timestamp | date:'short' }}</span>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" placeholder="Entrez votre message" [(ngModel)]="newMessage" />
      <button (click)="sendMessage()">Envoyer</button>
    </div>
  </div>
</div>

KP-C

Kevin Powell - Community•2y ago•

4 replies

Viego

Real-time Chat Messages Not Appearing in Angular & Spring Boot Application

<div class="chat-container">
  <div class="chat-sidebar">
    <h3>Conversations Archivées</h3>
    <ul>
      <li *ngFor="let conv of archivedConversations" (click)="selectRecipient(conv.userId)">
        Conversation avec {{ conv.userId }}
      </li>
    </ul>
  </div>
  <div class="chat-main">
    <div class="chat-header">
      <input type="text" placeholder="Matricule du destinataire" [(ngModel)]="recipientId" />
      <button (click)="loadMessages()">Charger l'historique</button>
    </div>
    <div class="chat-messages">
      <div *ngFor="let message of messages" class="chat-message" [ngClass]="{'sent': message.senderId === userMatricule, 'received': message.senderId !== userMatricule}">
        <p>{{ message.content }}</p>
        <span>{{ message.timestamp | date:'short' }}</span>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" placeholder="Entrez votre message" [(ngModel)]="newMessage" />
      <button (click)="sendMessage()">Envoyer</button>
    </div>
  </div>
</div>

<div class="chat-container">
  <div class="chat-sidebar">
    <h3>Conversations Archivées</h3>
    <ul>
      <li *ngFor="let conv of archivedConversations" (click)="selectRecipient(conv.userId)">
        Conversation avec {{ conv.userId }}
      </li>
    </ul>
  </div>
  <div class="chat-main">
    <div class="chat-header">
      <input type="text" placeholder="Matricule du destinataire" [(ngModel)]="recipientId" />
      <button (click)="loadMessages()">Charger l'historique</button>
    </div>
    <div class="chat-messages">
      <div *ngFor="let message of messages" class="chat-message" [ngClass]="{'sent': message.senderId === userMatricule, 'received': message.senderId !== userMatricule}">
        <p>{{ message.content }}</p>
        <span>{{ message.timestamp | date:'short' }}</span>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" placeholder="Entrez votre message" [(ngModel)]="newMessage" />
      <button (click)="sendMessage()">Envoyer</button>
    </div>
  </div>
</div>

Real-time Chat Messages Not Appearing in Angular & Spring Boot Application

Real-time Chat Messages Not Appearing in Angular & Spring Boot Application

Similar Threads

Similar Threads

Similar Threads