React TS项目集成Rocket Chat iframe：未读消息数重置异常

在React TypeScript项目中通过iframe嵌入Rocket Chat后，调用以下两个接口获取房间未读消息数时表现不稳定，有时计数正确，有时异常：

• 接口1：/api/v1/channels.counters?roomId=${roomId}
• 接口2：/api/v1/subscriptions.get?updatedSince=2017-11-25T15:08:17.248Z
  尝试两种接口后问题均存在，推测二者共用同一未读计数处理逻辑。

可能的解决方案 #

1. 等待iframe登录状态确认后再请求计数 #

当前代码中iframe加载后仅发送登录消息，未确认登录完成就可能发起计数请求，导致状态不同步。可以通过监听Rocket Chat的postMessage回调确认登录状态：

function injectRocketChatIframe(token:string, channel:string) {
  const iframe = document.createElement('iframe');
  iframe.id = 'rocketChatFrame';
  iframe.src = `${rocketChatHost}/channel/${channel}?layout=embedded`;
  document.getElementById('rocket-chat-target').appendChild(iframe);

  iframe.addEventListener('load', () => {
    // 监听登录成功回调
    const handleMessage = (event: MessageEvent) => {
      if (event.origin === rocketChatHost && event.data?.event === 'login-success') {
        // 登录成功后再执行未读计数请求
        fetchUnreadCounters(token, roomId); // 替换为你的计数请求逻辑
        window.removeEventListener('message', handleMessage);
      }
    };
    window.addEventListener('message', handleMessage);

    iframe.contentWindow.postMessage({
      event: 'login-with-token',
      loginToken: token,
    }, rocketChatHost);
  });
}

2. 改用实时事件推送获取未读更新 #

Rocket Chat支持通过postMessage推送未读消息变化事件，无需主动轮询，避免时序问题：

// 在iframe登录成功后订阅未读更新
iframe.contentWindow.postMessage({
  event: 'subscribe',
  name: 'unread',
}, rocketChatHost);

// 监听未读计数更新
window.addEventListener('message', (event) => {
  if (event.origin === rocketChatHost && event.data?.event === 'unread-updated') {
    const { unreadCount } = event.data.payload;
    // 更新本地未读状态
    setUnreadCount(unreadCount);
  }
});

3. 主动调用标记已读接口强制重置计数 #

在用户查看聊天内容后，主动调用标记已读接口，确保计数正确重置：

async function markChannelAsRead(token: string, userId: string, roomId: string) {
  const response = await fetch(`${rocketChatHost}/api/v1/channels.markAsRead`, {
    method: 'POST',
    headers: {
      'X-Auth-Token': token,
      'X-User-Id': userId,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ roomId }),
  });
  if (!response.ok) {
    console.error('标记已读失败:', await response.text());
  }
}

可以在iframe加载完成、用户切换到聊天窗口等时机调用该接口。

4. 修复接口请求的缓存与参数问题 #

• 更新updatedSince参数：当前subscriptions.get接口使用固定的历史时间戳，应改为上次请求的时间戳，确保获取最新数据：

  const lastFetchTime = new Date().toISOString(); // 每次请求前更新
  const url = `/api/v1/subscriptions.get?updatedSince=${lastFetchTime}`;
  

• 禁用请求缓存：在接口请求头中添加缓存控制，避免浏览器返回旧数据：

  headers: {
    'X-Auth-Token': token,
    'X-User-Id': userId,
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache',
  }
  

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