如何检测何时收到新消息并在聊天窗口中阅读？

Question

我正在构建一个聊天应用程序，该程序允许用户进行一对一的活动聊天会话。我想添加通知（在未读消息的聊天选项卡上加注），并在收到w条新短信时读取（一打和两打）功能。

我正在使用firebase-firestore和angular-6。聊天组件使用管道接收和显示消息。

Chat.html：

<ul class="chat" *ngFor="let chat of (session.id | chat | async)"
        [ngClass]="[chat.sender_id === userId ? 'sent-padding' : '']">
        <li [ngClass]="[chat.sender_id === userId ? 'sent' : 'received']">
          <div class="msg">
            <span [innerHtml]="chat.message | linky"></span>
            <span class="message-time pull-right">
              {{chat.timestamp | toHours}} {{chat.read}}
              <img *ngIf="chat.sender_id === userId" src="assets/icons/read.svg" />
            </span>
            <span>

            </span>
          </div>
        </li>
      </ul>

聊天对象：

const chat: IChat = {
    read: false,
    message: message,
    session_id: session.id,
    recipient_id: this.thread.id,
    sender_id: this.userId,
    timestamp: new Date()
  };

我如何设法检测新消息并将其更新为已读状态？