How to avoid websocket clients duplicated using vuejs

Question

When I access to a component, it runs socket.on.
And there is a button component in Vuejs as below. So when I emit to socket.on('voice') of nodejs, the nodejs socket emits to 'socket.on('reply').
Thus, console.log(msg) worsk well.

<button @click="start()">Click</button>

methods:{
   start(){
       socket.emit('voice',{data:'hey'})
   }
created(){
       socket.on('reply', msg => console.log(msg))

But the problem is when I move to another url and back to this component, 'socket.on('reply') runs again.
Therefore there are two websocket clients here.
how can I solve this problem? Thank you so much for reading this.

Thank you so much for your reply. But could you write some code in detail a little bit? — DD DD
– DD DD, Commented Dec 9, 2019 at 7:47
If you define socket.on('reply', msg => console.log(msg)) in Parent component then it won't call everytime. If App.vue is the Parent component then define there. — Rahul
– Rahul, Commented Dec 9, 2019 at 11:20

tony19 · Accepted Answer · 2022-07-16 00:37:40Z

1

I give you another link, where it is explained: Vue.js: Dynamic & Async Components

I know very little about views and dynamic content, but from what I understood from the documentation, you have to cover your component with a keep-alive block, which will cause that this component will not be regenerated again. You must consider all the pros and cons of this solution, in particular performance issues, and whether it can be done differently.

I don't know what your component looks like, so I give an example from the documentation:

<keep-alive>
  <my-chat-component></my-chat-component>
</keep-alive>

edited Jul 16, 2022 at 0:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 9, 2019 at 11:02

Gander

2,0111 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to avoid websocket clients duplicated using vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related