Kevin Powell - Community•7mo ago

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>

4 Replies

ViegoOP•7mo ago

message.txt

ViegoOP•7mo ago

message.txt

ViegoOP•7mo ago

ViegoOP•7mo ago

Gaming

Programming

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