I’m developing a React Native app and looking to implement real time data refresh feature. I’m using expo 49, laravel 9 + pusher stack. Here’s the code I’m using to listen for events on Pusher channel:
const connectToWebSocket = async () => {
try {
const ws = new Echo({
broadcaster: 'pusher',
Pusher,
key: appConfig.apiKay,
wsHost: appConfig.backendUrl,
wssHost: appConfig.backendUrl,
wsPort: 6001,
wssPort: 6001,
forceTLS: true,
encrypted: true,
cluster: 'eu',
auth: {
headers: {
Authorization: `Bearer ${props.authToken}`,
},
},
});
const channel = ws.channel('user-online-chat-channel');
channel
.subscribed(() => {})
.listen('UserOnlineChatEvent', (e) => {
set_user_online();
});
const channel_typing = ws.channel('typing-message-chat-channel');
channel_typing
.subscribed(() => {})
.listen('TypingMessageEvent', (e) => {
if (e.typingMessageData.companionId === props.user_Id) {
let typingTimer;
setTyping(true);
clearTimeout(typingTimer);
typingTimer = setTimeout(() => {
setTyping(false);
}, 1000);
}
});
} catch (error) {
console.log('error', error);
}
};
When I launch the app, it all works fine. But if the phone goes into sleep mode and then wakes up, the app stops listening for events on the channel and thus data is no longer refreshed. This bug occurs on Android platform. If someone could advise on what the problem is or how to solve this, that would be very much appreciated.