I am currently working on developing a straightforward chat application using vuejs and socketio. My goal is to send messages from one user to all other users in the chat. Below is the code I have implemented on the server side to achieve this:
io.on('connection', socket => {
socket.on('send-message', message => {
console.log('message sent: ' + message)
socket.broadcast.emit('receive-message', message)
})
})
On the client side, I have set up an event listener in the following method:
this.socket.on('receive-message', message => {
this.createMessageHtmlElement(message)
})
I am facing a challenge in determining where to place this method. Placing it in mounted() or created() results in it being called repeatedly. Ideally, I want it to be triggered only when a message is actually received from the server.
What is the best practice for positioning server event listeners within a vuejs project?