在Azure Communication Services（Next.js）中获取未读消息数量

核心实现步骤 #

首先确保你使用的是最新版的@azure/communication-chat SDK，然后按以下步骤操作：

1. 正确初始化聊天客户端与线程客户端
   在Next.js客户端组件中（ACS SDK仅支持浏览器环境），先初始化ChatClient，再获取目标聊天线程的ChatThreadClient实例：

'use client';

import { ChatClient } from '@azure/communication-chat';
import { AzureCommunicationTokenCredential } from '@azure/communication-common';
import { useEffect, useState } from 'react';

export default function ChatThreadPage({ threadId, userToken }) {
  const [unreadCount, setUnreadCount] = useState(0);
  let chatThreadClient;

  useEffect(() => {
    // 初始化ChatClient
    const chatClient = new ChatClient(
      '你的ACS资源端点',
      new AzureCommunicationTokenCredential(userToken)
    );

    // 获取指定线程的ChatThreadClient
    chatThreadClient = chatClient.getChatThreadClient(threadId);

    // 初始获取未读消息数
    fetchUnreadCount();

    // 监听新消息事件，实时更新未读数
    const handleNewMessage = () => {
      fetchUnreadCount();
    };
    chatThreadClient.on('chatMessageReceived', handleNewMessage);

    return () => {
      chatThreadClient.off('chatMessageReceived', handleNewMessage);
    };
  }, [threadId, userToken]);

  // 封装获取未读消息数的函数
  const fetchUnreadCount = async () => {
    try {
      const count = await chatThreadClient.getUnreadMessagesCount();
      setUnreadCount(count);
      console.log(`未读消息数：${count}`);
    } catch (error) {
      console.error('获取未读消息数失败:', error);
    }
  };

  return (
    <div>
      <h2>聊天线程：{threadId}</h2>
      <p>未读消息：{unreadCount}</p>
      {/* 你的聊天界面 */}
    </div>
  );
}

2. 关键注意事项

• 确保用户已加入目标聊天线程：只有线程成员才能获取未读消息数，若用户未加入，调用getUnreadMessagesCount会返回权限错误。
• 验证Token权限：用户Token需包含chat相关的权限，确保生成Token时配置了正确的scope。
• Next.js环境适配：必须在客户端组件（添加'use client'指令）中使用ACS SDK，服务器组件无法直接调用浏览器端的SDK方法。

3. 排查常见问题

• 若返回0但实际有未读消息：检查用户是否已发送过已读回执（比如调用过sendReadReceipt），已读的消息不会计入未读数。
• SDK版本问题：旧版SDK可能没有getUnreadMessagesCount方法，运行npm update @azure/communication-chat升级到最新稳定版。

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