Server Sent Events – Increasing Performance Levels

During Lockdown, a group of friends and I started getting together weekly, to play a board game using an online board game table, also known as a Virtual Tabletop (VTT). All the players can see a table, move pieces, and the current state of the table is synchronized for all players. The problem we ran into was with the performance of this VTT. Following an investigation, I discovered the VTT was using polling to retrieve data from the server. Periodically each client (player) would check with the server and if there had been any updates, the server would then send the updates to the client.
We had one player in Japan, one in Sweden and the rest were living in Ireland. Each move was taking over a minute to register the event with the server and update all the clients.

I decided to develop my own solution, with a focus on performance. I achieved this improvement in performance using Server-Sent Events. Server-Sent Events is a server push technology that enables a client to receive automatic updates from a server via HTTP. I developed my own VTT web app using HTML 5 Canvas/JavaScript for the Client-Side and NodeJS for the Server. 

Server-Sent Events
Server-Sent Events allow data to be sent from server to client without the need for polling, The client creates a listener object, which waits for server data and triggers a function when data is received.
The key benefit is increased performance due to the reduction of data transmission. A drawback is that data can only be sent one way. Server -> Client. To send client data to the server I used a REST API.

Client
The client consisted of a HTML Canvas on which players could add various shaped pieces, players could also move, rotate and change the size of pieces. Any client interaction called a REST API, passed in details of the move, resize, rotation, etc.

Server
The sever is a NodeJS App hosted in Azure, the main job of the server is to maintain the current state of the game, the position, orientation and size of each piece. The server has REST APIs that when called, update the details of a particular piece. The server then sends the update to all the clients connected.

Conclusion
I began this project with performance being the goal, and I achieved this. Due to Azure Hosting and a reduction in the amount of data transmitted, the time to register updates was reduced from 1 minute to less than 10 seconds.

For all your Software Development needs please contact Aspira here.