Angular聊天组件WebSocket收消息后DOM不刷新问题解决咨询

一、解决ConversationComponent DOM不刷新问题 #

1. 使用Async管道（最优方案） #

在组件模板中直接用async管道订阅chat$，Angular会自动处理变更检测，无需手动调用ChangeDetectorRef：

<!-- ConversationComponent模板 -->
<div *ngIf="_chatService.chat$ | async as chat">
  <div *ngFor="let msg of chat.messages">
    {{ msg.value }}
  </div>
</div>

组件代码中移除手动订阅逻辑，既能避免内存泄漏，也省去手动处理变更检测的麻烦。

2. 手动订阅时正确触发变更检测 #

如果必须保留手动订阅，确保在组件内部使用ChangeDetectorRef（服务中禁止使用，避免循环依赖），并根据组件变更检测策略选择对应方法：

// ConversationComponent.ts
constructor(
  private _chatService: ChatService,
  private _cdr: ChangeDetectorRef
) {}

ngOnInit(): void {
  this._chatService.chat$
    .pipe(takeUntil(this._unsubscribeAll))
    .subscribe((chat: Chat) => {
      this.chat = chat;
      // 若组件使用OnPush变更检测策略
      this._cdr.markForCheck();
      // 必要时可强制触发变更检测（不推荐滥用）
      // this._cdr.detectChanges();
    });
}

注意：组件默认变更检测策略为Default，此时markForCheck可省略；若设置了changeDetection: ChangeDetectionStrategy.OnPush，则必须调用markForCheck或detectChanges。

3. 验证服务中数据更新的不可变性 #

确认服务中更新_chats和_chat时，始终传递新对象（你的代码已正确实现这一点，只需确认即可）：

// 服务中已正确处理不可变更新
this._chats.next([...chats]); // 创建新数组
this._chat.next(newChat); // 创建新的chat对象

二、实现聊天列表新消息通知 #

1. 为Chat对象添加未读消息计数 #

修改Chat接口，新增unreadCount属性：

interface Chat {
  id: string;
  phoneNumber: string;
  contactId: string;
  messages: Message[];
  unreadCount?: number; // 新增未读计数字段
}

2. 更新服务中的updateChatMessages方法 #

收到新消息时，若当前未打开该聊天，则更新对应聊天的未读计数：

updateChatMessages(phoneNumber: string, message: string) {
  const chats = this._chats.value;
  const chatIndex = chats.findIndex((chat) => chat.phoneNumber === phoneNumber);

  if (chatIndex > -1) {
    const newChat = { ...chats[chatIndex] };
    const messageId = new Date().getTime().toString();

    newChat.messages.push({
      id: messageId,
      chatId: newChat.id,
      contactId: newChat.contactId,
      isMine: false,
      value: message,
      createdAt: new Date().toISOString(),
      isRead: false,
    });

    // 仅当未打开该聊天时，增加未读计数
    const isCurrentChat = this._chat.value?.phoneNumber === phoneNumber;
    if (!isCurrentChat) {
      newChat.unreadCount = (newChat.unreadCount || 0) + 1;
    }

    chats[chatIndex] = newChat;
    this._chats.next([...chats]);

    if (isCurrentChat) {
      this._chat.next(newChat);
    }
  }
}

3. 在聊天列表组件中显示未读通知 #

在列表模板中根据unreadCount渲染小红点或数字：

<!-- 聊天列表模板 -->
<div *ngFor="let chat of _chatService.chats$ | async" (click)="openChat(chat)">
  <span>{{ chat.phoneNumber }}</span>
  <span *ngIf="chat.unreadCount > 0" class="unread-badge">
    {{ chat.unreadCount }}
  </span>
</div>

添加基础样式：

.unread-badge {
  background-color: #ff4757;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: 8px;
}

4. 打开聊天时重置未读计数 #

在聊天列表组件的打开聊天方法中，重置对应聊天的未读计数：

// 聊天列表组件中
openChat(chat: Chat) {
  const updatedChat = { ...chat, unreadCount: 0 };
  // 调用服务方法更新聊天数据
  this._chatService.updateChatUnreadCount(updatedChat);
  // 切换到当前聊天
  this._chatService.setCurrentChat(updatedChat);
}

// 服务中新增updateChatUnreadCount方法
updateChatUnreadCount(updatedChat: Chat) {
  const chats = this._chats.value;
  const index = chats.findIndex(c => c.id === updatedChat.id);
  if (index > -1) {
    chats[index] = updatedChat;
    this._chats.next([...chats]);
    this._chat.next(updatedChat);
  }
}

内容的提问来源于stack exchange，提问作者Ella1993