Livewire Js Code cleanup issue. Same code run twice when I back to the page from others

Hope you guys are doing well.

I was working with a chat application when I faced an issue with cleanup js on Livewire. I was navigating from one friend's inbox to another friend's with wire:navigate so code creates multiple instances for one inbox.

Example: Chat A is chatting with Chat B and Chat C. So, In the Chat A dashboard there have 2 inboxes B and C. When B messages everything okay and When C message and Chat A goes to check the C inbox Was good, But when B did send another message and A was back to B's inbox the message was duplicated. When do page reloads and start working fine.

Now, when they go to C inbox and Then again back to B inbox now one message repeats 3 times because there 3 instance created for echo listeners on the same inbox.

The problem is when I navigate to inbox livewire doesn't do cleanup and when I back it execute my js code again.

Sorry, Maybe I am a bad explainer. IF you have time and have questions please ask me.

Thanks


Echo.private('messages.' + {{ $inbox->id }})
.listen('MessageSent', (e) => {
let message = document.createElement('div');
let text = document.createElement('p');
text.textContent = e.message.message;
text.classList.add('text-base')

if (e.message.sender_id === {{ auth()->id() }}) {
message.classList.add('max-w-[80%]', 'md:max-w-[75%]', 'lg:max-w-[70%]', 'self-end', 'p-3', 'rounded-[10px]', 'border-[1px]', 'border-gray-200', 'bg-blue-500', 'text-white');
} else {
message.classList.add('max-w-[80%]', 'md:max-w-[75%]', 'lg:max-w-[70%]', 'p-3', 'rounded-[10px]', 'border-[1px]', 'border-gray-200', 'self-start')
}
message.appendChild(text)
document.getElementById('inbox-{{ $inbox->id }}').appendChild(message);
let chatBox = document.getElementById('chat-box')
chatBox.scrollTo(0, chatBox.scrollHeight)
console.log('Okay')
})
.listen('MessageTyping', function (e) {
const typingEl = document.getElementById('chat-typing')
if (e.typing) {
typingEl.classList.remove('hidden');
} else {
typingEl.classList.add('hidden');
}
let chatBox = document.getElementById('chat-box')
chatBox.scrollTo(0, chatBox.scrollHeight)
})


I have tried this:


const channel = setTimeout(() => {
Echo.private('messages.' + {{ $inbox->id }})
.listen('MessageSent', (e) => {
let message = document.createElement('div');
let text = document.createElement('p');
text.textContent = e.message.message;
text.classList.add('text-base')

if (e.message.sender_id === {{ auth()->id() }}) {
message.classList.add('max-w-[80%]', 'md:max-w-[75%]', 'lg:max-w-[70%]', 'self-end', 'p-3', 'rounded-[10px]', 'border-[1px]', 'border-gray-200', 'bg-blue-500', 'text-white');
} else {
message.classList.add('max-w-[80%]', 'md:max-w-[75%]', 'lg:max-w-[70%]', 'p-3', 'rounded-[10px]', 'border-[1px]', 'border-gray-200', 'self-start')
}
message.appendChild(text)
document.getElementById('inbox-{{ $inbox->id }}').appendChild(message);
let chatBox = document.getElementById('chat-box')
chatBox.scrollTo(0, chatBox.scrollHeight)
console.log('Okay')
})
.listen('MessageTyping', function (e) {
const typingEl = document.getElementById('chat-typing')
if (e.typing) {
typingEl.classList.remove('hidden');
} else {
typingEl.classList.add('hidden');
}
let chatBox = document.getElementById('chat-box')
chatBox.scrollTo(0, chatBox.scrollHeight)
})
}, 10)


Livewire.hook('component.init', ({component, cleanup}) => {
if (component.name !== 'chat.messages'){
return;
}

//I have already try the Echo code here and also did Echo.leaveChannel() on cleanup result was terrible maybe my code was wrong.

cleanup(() => {
clearTimeout(channel)
//Echo.leaveChannel This is also not working.
})
})

Continue reading...