How I used WebSockets with Node.js to synchronize button presses in order to watch anime with my friends
I have a bunch of friends. We watch anime/films/tv series together, and we always used a rather simple but effective method of doing it: just making up a countdown whenever we wanted to start a new episode. One of us would make the countdown, and we would make our best effort to press the play button at the exact same time.
This primitive strategy was actually quite surprisingly working good. We had no particular problems, apart from that few times where one of us just forgot to press the play button or wasn’t paying attention, or just missed the mark and started 1 second later. Overall, it wasn’t a big issue.
However, I wanted to have an excuse to finally start to learn the basics of WebSockets, so I built a small Node.js script that is capable of pressing the space bar of all the clients connected at the same time (not exactly, we’ll talk about it later).
It was actually really simple to make! The logic is the following:
- N clients connect to the main server
- 1 client connects to the main server as a special “sender”
- 1 server is kept alive 24/7 managing connections and broadcasting messages when the sender sends a signal
So we need to code 3 separate chunks of logic: the server logic, the client logic and the sender logic. I’ve chosen Node.js for the job, because I find it really simple to understand while also being very lightweight and cross-platform, too! Of course you can implement this in any language you’d like to. Using Express for something this simple would be overkill, to say the least.
Let’s start with the server logic. At startup, it will create a new HTTP server, and attach it to a new WebSockets server. The protocol name will be “keypress-protocol”.
Cool! We have our WebSockets server. Now we listen for connection requests, see if we can accept them, and if so we add them to a map of active connections (a map where each key is an address and each value is a valid connection object). When we get a signal of disconnection, of course, we remove the entry associated with the connection that just went away.
Now we can listen for messages coming from the potential connected sender. When the sender sends us the letter ‘S’, the server will relay this message to all connected clients. In JavaScript:
‘isOriginAllowed’ is a function that accepts an origin as parameter and returns true if that origin is allowed to connect. You can easily implement your own whitelist like this, to avoid strangers and creeps connecting without your consent.
Last but not least, we let the HTTP server listen on port 8080.
That’s it! Really! The server is done.
The client is even simpler. It connects to the WS server we just wrote, and it starts listening for a specific space bar message. Once it gets one, it will automatically press the space bar through the use of an NPM package called ‘node-key-sender’ (really cool package!). In short:
The sender is, instead, listening for space bar presses. When the sender presses the space bar, it will send the space bar message to the server.
The code is an exact copy of the client, but the connection logic is different:
It’s done! Now we just need a place to host the server which is running 24/7. I used my personal VPS with Docker. The Dockerfile I’m using is the following:
Once the server is running, the clients and the sender will connect to it by running client.js or sender.js using Node. Remember that node-key-sender needs Java installed and available on PATH to work.
Now the fun part: when I, the sender, want to start watching a video with my friends, I just need to press space bar, and it will also press it on my friends’ computers. Neat!
To be honest, this was really really easy. I expected WebSockets to be more difficult, but Node.js makes everything so nice and simple to use! Of course this project is very basic and doesn’t include some stuff that I will leave up to you readers:
- There can be more than 1 sender. Meaning that, if someone is feeling like trolling, he can do it. He can connect to the server as sender and start sending space bar messages as he wishes. This is not good!
- There is no anti-spam protection. The sender can spam space bar as many times as he wants, the message will always go through.
- There is no lag compensation. Meaning that if one of the clients is lagging (due to distance or poor connection), the space bar presses won’t be synchronized…
- The IP addresses of all the peers are not hidden. Oof.
This is my very first article on Medium. Excuse me for my bad English, I’m not a native speaker.
That’s all folks!
