0

I would like to use socket.io-client in my Vue 3 application for which I use the compositions API (with script setup syntax).

Different components want to listen to events coming from the socket.

How do I best handle the socket communication in this case? Two questions:

  • Should I make one socket instance and pass that to the child components? Or should every child component handle it's own connection?
  • How to share logic across components? I am writing a composable now, but not sure if that is suitable?

There exists a Vue 3 wrapper vue-3-socket.io but that does not seem to be useful together with the composition API.

Thanks!

(I tried writing a composable, but I am not sure about using that composable in multiple components. This yields multiple socket instances.)

Tolbxela
  • 4,767
  • 3
  • 21
  • 42
Dev Claartje
  • 1
  • 1
    There are certainly [reasons](https://stackoverflow.com/a/9269458/6225326) why an app might want/need multiple web socket connections, whether that makes sense for *your* app is unclear since we know nothing about it. If you think 1 connection makes the most sense, that'd probably be easiest. Look into using a global store that all components can write to and access. The store can be a central location for sending/receiving messages. The official recommended store for a Vue app is [Pinia](https://pinia.vuejs.org/). – yoduh Mar 20 '23 at 23:32

0 Answers0