Twilio 从对话中删除听众

Question

你好尝试制作一个基于 twilio 的对话应用程序

该应用程序运行良好，但每次有人从对话列表中单击一个对话时，它都会启动一个 useEffect，useEffect 具有类似于以下功能的内容：

  const setChannelEvents = useCallback((channel) => {
    channel.on('messageAdded', (message) => {
      setMessages(prevMessages => [...message, prevMessages])
    })

问题是每次我们离开对话时听众都会留下on所以每次有人点击对话时，该应用程序都会吸引大量听众，这并不酷。

想知道如何在离开组件时关闭监听器

试过这样的事情：

  useEffect(() => {
    Twilio.getClient()
      .then((client) => client.getConversationBySid(channelId))
      .then((channel) => setChannelEvents(channel))
      .catch((err) => console.log('err', err.message))
      .finally(() => setLoading(''))
    
      return () => chatClientChannel.current.removeListener('messageAdded')
  }, [channelId, setChannelEvents])

没用

任何帮助将不胜感激，谢谢:)

Answer 1

这里是 Twilio 开发人员布道者。

我认为您的 useEffect 大部分是正确的，但您可能在 return 子句中使用了与原始频道不同的对象。像 useEffect 这样的 React hook 的美妙之处在于你可以在函数中封装一些状态，然后在拆解中使用它。

试试这个：

  const handleMessageAdded = (message) => {
    // do something with the new message
  }

  useEffect(() => {
    let currentChannel;
    Twilio.getClient()
      .then((client) => client.getConversationBySid(channelId))
      .then((channel) => {
        currentChannel = channel;
        return setChannelEvents(channel);
      })
      .catch((err) => console.log('err', err.message))
      .finally(() => setLoading(''))
    
      return () => { 
        if (currentChannel) {
          currentChannel.removeListener('messageAdded', handleMessageAdded);
        }
      };
  }, [channelId, setChannelEvents]);

在这里你设置 currentChannel（我使用 let 来定义变量，然后在承诺解决后更新它。你也可以通过将你的承诺链分解成 awaited 函数在 useEffect 函数中设置 currentChannel)，然后在拆卸函数中从同一对象中删除侦听器。

Twilio 从对话中删除听众

Twilio Remove listeners from conversations

javascript

twilio

reactjs

react-native

twilio-conversations