Adding Socket.io in Vuex/Vue based application.
Hello Coders!!
Writing something after a long time, and as you know I write about the solutions that you cannot find over the internet with ease, here we are with another article that tells you the easiest way to connect your Vue app with Socket.io client when you socket server is listening on another URL completely different from your Vue !!
Amazing isn’t it?
First of all, let me tell you a scenario of why I needed this!
I wrote an Express application, which makes requests to Facebook REST APIs and saves the conversations in the MongoDB database. I needed to display those data on a Vue based dashboard.
Now, whenever there was a new message, my Mongoose was watching for new data, and on Document updated I emitted a socket event to me Vue app which on listening to that socket event updates the Dashboard with the latest conversation. Cool right?
Let’s start with actual 0s and 1s now!
First of all, you need to set up your socket.io server that listens on a certain port. Here is the easiest set-up for your Backend Socket Server.
We have created an instance of the socket-io server here which on connection emits an event. We have named that event as “some-event”.
Make sure to add necessary CORS settings and pass them as an option in your socket initialization or else you will receive a CORS error when connecting to the server.
Assume that this server is now running at https://your-socketserver-url.com.
We can call the server-side completed with this step! Now, let's move towards the front-end setup of our Vue app.
After initializing your Vue app from Vue CLI follow these steps -
1) Install Socket.io client by running the command —
npm i socket.io-client
This will install the socket.io client package on your system.
2) Then inside your Vueapp/src folder create another folder named plugins and inside that folder create a file called webSocket.js, We will use this file as our Global file that listens for all socket events and dispatches an action to the store based on the socket events!
The final structure is ../yourapp/src/plugins/webSocket.js and Copy the following code there.
We are importing the package we just installed in step 1. Then we are assigning the socket variable to the socket connection from our server. Finally, we are exporting a function that dispatches an action based on the socket-listener that reacts to the event emitted from our main socket-server or backend.
3) Now in your Vuex main file, (where your state is, that might be store.js or store/index.js) import this webSocket.js as a plugin! See example -
Here as you can see we imported the webSocket.js file we created in step 2 and passed that as a plugin in the Vuex store! Below there is the action which we dispatched in the webSocket.js socket listener function!
and THERE YOU GO!
You have just successfully connected your Socket.io server which is listening on a completed different domain with your Vuejs application which is on some other domain!
Thank you for reading this article! Do show some love you found this article useful!
Make sure to leave a comment if you want to know something in detail too!
Still didn't get it? or Need GitHub access to my working code? Email me at uddeshya1312@gmail.com
Thankyou Wonderful people!
Happy Coding….
