Use the Vue Event Bus as a proxy for Socket communication

[digiguru]

I've managed to get Mongo and Socket servers runnign, which is ace. On doing so I realised that the socket communication is spread all around the application and the socket object is being passed into a number of components. This is a little bit of an anti-pattern for a few reasons.

• If SocketIO is replaced with another library (Or there's a breaking change) it will need a large refactor on any component that uses sockets (unlikely but relevant)
• To mock out the socket server in tests you have to do manual work in every component (painful and becoming likely)
• Vue has a concept of global events called the event bus, and this provides a great API to perform this sort of communication (useful as we can use it to trigger other sorts of events, and mock globally)
• You can intercept all socket calls and make changes based on global state, for example adding GameID or other global stateful elements that should exist outside the child component

Here's an interesting blog post detailing how one would set it up.

https://medium.com/@spooky.dev/centralizing-socket-io-events-with-an-event-bus-in-vue-15e5d0e265eb

[digiguru]

Experimental branch #16 is where I am looking at the change