I am currently trying to migrate a mobile react-native application (working with expo) from twilio-chat to twilio-conversations. Already did it with the browser based agent-application which works fine.
The react-native app is able to send messages, which appear in the browser based app, but not in the message list of the mobile app itself. Also my "messageAdded" listener never gets called.
Here is the hook I wrote to handle the interaction with the conversation client:
import { Client, Conversation, Message } from '@twilio/conversations';import { useEffect, useState } from 'react';import { ConversationType, Session } from '../interfaces/Session';import useConversationToken from './useConversationToken';import { useSocket } from './useSocket';interface ChatOptions { session: Session;}const useTwilioConversation = (options: ChatOptions) => { const [chatReady, setChatReady] = useState(false); const [chatConversation, setChatConversation] = useState<Conversation>(); const [messages, setMessages] = useState<Message[]>([]); const [newMessageAvailable, setNewMessageAvailable] = useState<boolean>( false ); useConversationToken({ session: options.session, type: ConversationType.CHAT, callback: async (data) => { await createClient(data.token); }, }); useEffect(() => { return () => { if (chatConversation) { chatConversation.removeAllListeners(); chatConversation.leave(); } }; }, []); // socket context for handling other application communication const socket = useSocket(); const onMessageAdded = (message: Message) => { // never gets called console.log('-------------------------------------------------------------->NEW MESSAGE: ', message ); setMessages((prevMessages) => { return [...prevMessages, message]; }); setNewMessageAvailable(true); }; const registerListeners = (chatConversation: Conversation) => { chatConversation.on('messageAdded', onMessageAdded); console.log(chatConversation.listenerCount('messageAdded')); // returns '2' }; const onChatConnected = () => { socket.emit('deviceConnect', { sessionId: options.session.id }); }; const createClient = async (token: string) => { const client = await new Client(token, { logLevel: 'debug' });// works fine client.on('stateChanged', (state) => { if (state === 'initialized') { onInit(client); } }); client.on('messageAdded', onMessageAdded); }; const onInit = async (client: Client) => { const conversation = await client.getConversationByUniqueName( options.session.room ); if (conversation) { if (conversation.status !== 'joined') { client.on('conversationJoined', () => { registerListeners(conversation); }); await conversation.join(); } else { registerListeners(conversation); } if (options.session.description !== '') await conversation.sendMessage(options.session.description); const messages = await conversation.getMessages(); setMessages(messages.items); onChatConnected(); setChatConversation(conversation); setChatReady(true); } }; const submitMessage = (message: string) => { chatConversation?.sendMessage(message); }; const readMessages = () => { setNewMessageAvailable(false); }; return { messages, submitMessage, chatReady, newMessageAvailable, readMessages, } as const;};export default useTwilioConversation;I also tried this code directly in place instead of using it as a hook which makes no difference.
After sending a few messages to the mobile client, I receive an error, that indicates that there was a problem sending log messages to the devlopment environment. "RangeError: Invalid string length"
Twilio debug logs can be found here: Logs