如何借助GetStream实现消息已送达和已读状态的检测

GetStream原生支持消息的送达、已读状态标记，以下是对应实现步骤，完全匹配WhatsApp/Telegram的交互逻辑：

一、消息已送达状态实现 #

已送达指消息成功到达接收方客户端（而非仅上传到Stream服务器），实现流程如下：

• 发送方侧：发送消息后，Stream会自动为消息标记status: sent，此时UI可显示灰色单对勾。
• 接收方侧：监听频道的message.new事件，收到新消息后立即调用markMessagesDelivered()，将频道内所有未送达消息标记为已送达：

  // 接收方监听新消息并标记送达
  channel.on('message.new', async (event) => {
    await channel.markMessagesDelivered();
  });
  

• 发送方侧：监听message.delivered事件，收到后更新对应消息的UI（比如将灰色对勾改为蓝色）：

  // 发送方监听送达事件更新UI
  channel.on('message.delivered', (event) => {
    const msgEl = document.getElementById(`msg-${event.messageId}`);
    if (msgEl) {
      msgEl.querySelector('.status-icon').className = 'status-icon delivered';
      // 或直接替换图标：msgEl.querySelector('.status-icon').src = '/blue-check.svg';
    }
  });
  

二、消息已读状态实现 #

已读指接收方已查看消息，实现流程如下：

• 接收方侧：在进入聊天页面、窗口重新聚焦时，调用markMessagesRead()标记所有未读消息为已读：

  // 标记所有未读消息为已读
  async function markAllRead() {
    await channel.markMessagesRead();
  }
  
  // 页面加载时触发
  document.addEventListener('DOMContentLoaded', markAllRead);
  // 窗口聚焦时触发（用户切回聊天页面）
  window.addEventListener('focus', markAllRead);
  

• 发送方侧：监听message.read事件，收到后更新消息UI为已读状态（比如显示双蓝色对勾）：

  // 发送方监听已读事件更新UI
  channel.on('message.read', (event) => {
    const msgEl = document.getElementById(`msg-${event.messageId}`);
    if (msgEl) {
      msgEl.querySelector('.status-icon').className = 'status-icon read';
      // 或替换为双勾图标：msgEl.querySelector('.status-icon').src = '/double-blue-check.svg';
    }
  });
  

三、UI状态映射（完全匹配WhatsApp/Telegram） #

关键注意事项 #

• 确保频道权限配置正确：接收方需拥有read权限才能接收消息并标记状态
• 多设备登录场景下，Stream会自动同步消息状态，无需额外处理
• 历史消息初始化时，可通过message.status字段（sent/delivered/read）直接渲染对应状态

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