#11 Start combining Vue & socket.io
- Aaron
- Dec 2, 2020
- 3 min read
Updated: Dec 4, 2020
I tried and succeeded in serving my front from the same domain of my server. Serving all my HTML from that same express server didn’t feel quite right to me. I had a feeling that it could mess up my routes when I started integrating Vue, as it seemed Vue & Express routing would clash from what I read online.
I was looking for a way to separate my client and my server.
The socket.io documentation says you connect your front to a different domain.
Because I used socket.io v3, I also had to handle CORS, something that was not previously required in older socket.io versions.
The documentation doesn’t really highlight this, unless you go to the specific handling CORS page: https://socket.io/docs/v3/handling-cors/.
Many tutorials and documentation online were still for v2, so they didn’t really touch this subject, unfortunately. That is why I want to highlight this, so it may help you in the future.
After struggling for a while, I found this helpful tutorial.
The project in the tutorial is a simple canvas game. Not really applicable to the card game I want to make, but it’s still useful for getting to know how to integrate Vue & socket.io and connect an external server.
Something that also came up while watching this video is the socket object vs the io object: Timestamp: 22:52 - socket vs io
Things I found online about socket vs io:
socket vs io
io is a Socket.IO server instance attached to an instance of http.Server listening for incoming events.
The socket argument of the connection event listener callback function is an object that represents an incoming socket connection from a client.
Both can have .on
The io variable represents the group of sockets. The code you have starts on line one with providing a function in the second parameter that gives you a socket variable every time a new connection is made. The socket variable is only for communicating with each individual connection. You may not see it in the code but there will be one socket variable for each connection established.
Experimenting on my own
io.on("connection", socket => {
//generate userNumber (unique for this connection)
const randomNum = Math.floor(Math.random() * 10);
// No matter how much the click is received, the number that will be send back will be the same (for that client)
socket.on("click" => {
socket.emit("randomNumber", randomNum) //
});io.on(“connection”) is unique for every connected client.
Here the randomNum is generated in the beginning and does not change while the user is connected. (e.g. client1 will keep getting the number 3 with every execution, while client2 will keep getting the number 5), because it was generated at the start of each connection.
There is also this article that talks more about the .broadcast feature:
I also found an article that talks about handling Socket.io events in Vue.
A way to centralize all socket.io events totally abstracted from the logic of the app, so we can dispatch events from a single module and listen to them in app views and components.
There are also some libraries that are supposed to make the integration/use of Vue & socket.io easier.
I personally probably won't be using them, since both Vue & socket.io got new versions somewhat recently.
I'm still not quite done learning Vue. There are still some steps I need to figure out: like handling routes with the Vue router and integrating it with the socket.io backend server. Once I know more about Vue, I can try to make my code less messy.
You can look at my current (messy) demo here: https://github.com/aaronharinck/vue-socketio-rooms
Comments