Twilio Conversations随机断开连接问题及重连方案咨询

问题背景 #

使用React开发，基于Twilio Conversations JavaScript客户端时遇到对话随机断开的问题，仅在直接操作Conversation对象（如调用conversation.getMessages()）时触发，已采取措施避免不必要重渲染，客户端整体运行正常。

客户端管理代码（useEffect示例） #

useEffect(() => {
    if (!conversations.token) {
      return;
    }

    const conversationClient = new ConversationsClient(conversations.token, {
      retryWhenThrottledOverride: true,
    });

    conversationClient.on('connectionStateChanged', (state) => {
      // dispatch data to store
    });

    conversationClient.on('stateChanged', (state) => {
      // dispatch data to store
    });

    conversationClient.on('initialized', async () => {
      // dispatch data to store
    });

    conversationClient.on('initFailed', (error) => {
      // dispatch data to store
    });

    conversationClient.on('conversationAdded', (conversation) => {
      // dispatch data to store
      dispatch(addConversation(conversation));
    });

    conversationClient.on('conversationLeft', (conversation) => {
      // dispatch data to store
    });

    conversationClient.on(
      'conversationUpdated',
      ({ conversation, updateReasons }) => {
        // dispatch data to store
      },
    );

    conversationClient.on('conversationRemoved', (conversation) => {
      // dispatch data to store
    });

    conversationClient.on('messageAdded', (message) => {
      // dispatch data to store
    });

    conversationClient.on('tokenAboutToExpire', async () => {
      // dispatch data to store
    });

    conversationClient.on('tokenExpired', async () => {
      // dispatch data to store
    });

    // Cleanup
    return () => {
      conversationClient.shutdown();
    };
  }, [conversations.token]);

触发问题的操作代码 #

const messageCursor = await conversation.getMessages();

错误信息 #

Unable to connect: Connection is not initialized

Error: Unable to connect: Connection is not initialized
    at Upstream.send (browser.js?6941:3009:1)
    at _class._callee5$ (browser.js?6941:3816:1)
    at tryCatch (regeneratorRuntime.js?a677:44:1)
    at Generator.eval (regeneratorRuntime.js?a677:125:1)
    at Generator.eval [as next] (regeneratorRuntime.js?a677:69:1)
    at asyncGeneratorStep (asyncToGenerator.js?d0db:3:1)
    at _next (asyncToGenerator.js?d0db:22:1)
    at eval (asyncToGenerator.js?d0db:27:1)
    at new Promise (<anonymous>)
    at _class.eval (asyncToGenerator.js?d0db:19:1)
    at _class.get (browser.js?6941:3830:1)
    at eval (browser.js?82ff:1212:1)
    at Retrier.eval (browser.js?82ff:1160:1)
    at emitOne (browser.js?bc71:121:1)
    at Retrier.emit (browser.js?bc71:207:1)
    at Retrier.attempt (browser.js?bc71:566:1)
    at eval (browser.js?bc71:625:1)

解决方案 #

1. 给Conversation实例添加自动重连逻辑 #

监听Conversation的stateChanged事件，当状态变为disconnected时主动调用重连：

conversation.on('stateChanged', (newState) => {
  if (newState === 'disconnected') {
    conversation.connect().catch(err => {
      console.error('对话重连失败:', err);
      // 可添加重试机制，比如延迟后再次尝试
      setTimeout(() => conversation.connect(), 3000);
    });
  }
});

2. 避免持有无效的Conversation引用 #

不要在组件中缓存Conversation实例到外部变量，每次需要操作时通过客户端实例获取最新的对话对象：

// 替代直接使用缓存的conversation实例
const targetConversation = await conversationClient.getConversationBySid(conversationSid);
if (targetConversation.state === 'connected') {
  const messageCursor = await targetConversation.getMessages();
}

3. 优化Token刷新逻辑 #

在tokenAboutToExpire事件中使用updateToken方法更新令牌，而不是销毁旧客户端重建，保持连接连续性：

conversationClient.on('tokenAboutToExpire', async () => {
  const newToken = await fetch('/api/get-new-twilio-token'); // 替换为你的令牌获取接口
  await conversationClient.updateToken(newToken);
});

4. 操作前检查对话状态 #

调用getMessages等方法前先确认对话处于连接状态，否则先重连：

async function fetchMessages(conversation) {
  if (conversation.state !== 'connected') {
    try {
      await conversation.connect();
    } catch (err) {
      console.error('连接对话失败:', err);
      return;
    }
  }
  const messageCursor = await conversation.getMessages();
  // 处理消息游标
}

5. 调整客户端初始化配置 #

增加连接超时和重试相关配置，提升连接稳定性：

const conversationClient = new ConversationsClient(conversations.token, {
  retryWhenThrottledOverride: true,
  connectionTimeout: 10000, // 设置10秒连接超时
  retryPolicy: {
    maxAttempts: 3, // 最大重试次数
    delayMs: 1000 // 重试间隔
  }
});

内容的提问来源于stack exchange，提问作者Cup of Java