Hola tratando de hacer una aplicación de conversaciones basada en twilio
La aplicación funciona bien, pero cada vez que alguien hace clic en una conversación de la lista de conversaciones, inicia un efecto de uso, el efecto de uso tiene algo como la siguiente función:
const setChannelEvents = useCallback((channel) => { channel.on('messageAdded', (message) => { setMessages(prevMessages => [...message, prevMessages]) })El problema es que cada vez que dejamos la conversación, el oyente permanece conectado , por lo que cada vez que alguien hace clic en una conversación, la aplicación crea muchos oyentes y eso no es bueno.
Me pregunto cómo apagar el oyente cuando deja el componente
Intenté algo como esto:
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])no funciono
Cualquier ayuda será apreciada, gracias :)
Desarrollador evangelista de Twilio aquí.
Creo que su useEffect es mayormente correcto, pero potencialmente está usando un objeto diferente en la cláusula de retorno al canal original. La belleza de un gancho React como useEffect es que puede encapsular parte del estado en la función y luego usarlo en el desmontaje.
Prueba esto en su lugar:
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]); Aquí configura el currentChannel (estoy usando let para definir la variable y luego la actualizo una vez que se resuelve la promesa. También puede hacer esto dividiendo su cadena de promesa en funciones useEffect currentChannel await elimine al oyente de ese mismo objeto en la función de desmontaje.