Twilio Conversations的messageAdded事件偶发不触发问题排查

问题描述 #

在Twilio Conversation 对象上注册 messageAdded 处理器后，使用 conversation.sendMessage(messageText) 发送新消息时，处理器有时不会被调用，该问题随机出现。例如：连续发送4条消息 A,B,C,D，处理器会响应 A,B,D，但不响应 C。

有时还会完全卡住，仅能通过刷新解决；刷新后所有已发送消息都会出现在对话中。

已排除的可能性 #

• 存在多个Client实例引用
• 存在多个Conversation实例引用
• 处理器在 useEffect 清理函数中被移除
• 处理器未绑定到Conversation对象（已存在于 Conversation._events.messageAdded 下）

代码示例 #

import React from "react";
import { Conversation, Message, Paginator } from "@twilio/conversations";
import { useTwilioClient } from "./Twilio.context";

const messagesPageSize = 50;

export const useTwilioConversation = (sid: string) => {
  const twilioClient = useTwilioClient();
  const [twilioConversation, setTwilioConversation] =
    React.useState<Conversation | null>(null);
  const [messages, setMessages] = React.useState<Message[]>([]);
  const [paginator, setPaginator] = React.useState<Paginator<Message>>();
  const [isLoading, setIsLoading] = React.useState(false);

  const fetchMore = React.useCallback(() => {
    if (!twilioConversation || !paginator) {
      return;
    }
    paginator.prevPage().then((paginator) => {
      setPaginator(paginator);
      setMessages((prev) => paginator.items.concat(prev));
    });
  }, [paginator, twilioConversation]);

  React.useEffect(() => {
    if (!twilioClient) {
      return;
    }
    setIsLoading(true);
    const getTwilioConversation = async () => {
      const conversation = await twilioClient.getConversationBySid(sid);
      await conversation.setAllMessagesRead();
      setTwilioConversation(conversation);
      const paginator = await conversation.getMessages(messagesPageSize);
      setPaginator(paginator);
      setMessages(paginator.items);
    };
    getTwilioConversation().finally(() => {
      setIsLoading(false);
    });
  }, [twilioClient, sid]);

  React.useEffect(() => {
    if (!twilioConversation) {
      return;
    }
    const handleMessageAdded = (message: Message) => {
      setMessages((prev) => [...prev, message]);
    };
    twilioConversation.on("messageAdded", handleMessageAdded);
    return () => {
      twilioConversation?.removeListener("messageAdded", handleMessageAdded);
    };
  }, [twilioConversation]);

  return {
    messages,
    twilioConversation,
    fetchMore,
    hasMore: !!paginator?.hasPrevPage,
    isLoading,
    setMessages,
  };
};

SDK版本：2.2.0 #

解决方案 #

1. 升级SDK版本
   2.2.0版本属于较旧版本，Twilio在后续3.x系列版本中修复了大量实时事件同步的bug，包括messageAdded事件丢失的问题。直接升级到最新稳定版是最有效的解决途径。

2. 本地临时消息兜底
   由于messageAdded依赖服务端WebSocket推送，存在网络延迟或丢包可能，可在调用sendMessage后先添加临时消息到本地状态，待事件触发后替换为服务端返回的正式消息，避免用户感知到消息丢失：

   // 组件内发送消息的逻辑示例
   const sendMessage = async (text: string) => {
     if (!twilioConversation) return;
     // 创建临时消息先更新本地状态
     const tempMessage = {
       body: text,
       author: twilioClient.user?.identity,
       dateCreated: new Date(),
       isTemp: true
     } as unknown as Message;
     setMessages(prev => [...prev, tempMessage]);
     try {
       const realMessage = await twilioConversation.sendMessage(text);
       // 替换临时消息为真实消息
       setMessages(prev => prev.map(msg => (msg as any).isTemp ? realMessage : msg));
     } catch (err) {
       // 发送失败移除临时消息
       setMessages(prev => prev.filter(msg => !(msg as any).isTemp));
       console.error("消息发送失败:", err);
     }
   };
   

3. 定时同步消息校验
   在事件监听基础上，添加定时拉取最新消息的逻辑，每隔一段时间与本地状态对比，补全丢失的消息：

   React.useEffect(() => {
     if (!twilioConversation) return;
   
     const syncLatestMessages = async () => {
       const latestPage = await twilioConversation.getMessages(10);
       const serverSids = new Set(latestPage.items.map(m => m.sid));
       setMessages(prev => {
         const localSids = new Set(prev.map(m => m.sid));
         const missingMessages = latestPage.items.filter(m => !localSids.has(m.sid));
         return [...prev, ...missingMessages];
       });
     };
   
     // 初始同步 + 30秒定时同步
     syncLatestMessages();
     const syncInterval = setInterval(syncLatestMessages, 30000);
   
     const handleMessageAdded = (message: Message) => {
       setMessages((prev) => [...prev, message]);
     };
     twilioConversation.on("messageAdded", handleMessageAdded);
   
     return () => {
       clearInterval(syncInterval);
       twilioConversation.removeListener("messageAdded", handleMessageAdded);
     };
   }, [twilioConversation]);
   

4. 监听连接状态重同步
   监听Twilio Client的连接状态变化，当连接重连成功后，重新拉取完整消息列表，确保本地状态与服务端一致：

   React.useEffect(() => {
     if (!twilioClient) return;
   
     const handleConnectionChange = async (state: string) => {
       if (state === "connected" && twilioConversation) {
         const paginator = await twilioConversation.getMessages(messagesPageSize);
         setMessages(paginator.items);
       }
     };
   
     twilioClient.on("connectionStateChanged", handleConnectionChange);
     return () => {
       twilioClient.removeListener("connectionStateChanged", handleConnectionChange);
     };
   }, [twilioClient, twilioConversation]);
   

内容的提问来源于stack exchange，提问作者Kuba Sułkowski