Creating an interactive overlay, with JS, for twitch simulating GTA San Andreas

Browsing twitch I found a stream of a food deliveryman working for UBER Eats. It is something I had not seen yet, a stream from the street, and performing that kind of actions.
I found the stream in the following state:
A stream without overlay and with cuts in a very repeated way. Which did not allow the twitch algorithm to recommend its channel more.
This was the first problem to be solved, the connection cuts, or at least the absolute disconnection of twitch … This will be for another article. (It’s not ready yet).
Step 1 — Planning the overlay
The overlay cannot be static, all the elements must be administrable, from an administration panel.
We will create everything based on HTML, CSS, JS with a client-server scheme, based on socket.io. We will have a website for the admin panel and various websites for our elements.
The first step is to create a web server and be able to support websockets. We will do all this in node.js with the express framework
Step 2 — Code
Continuing, we will start with the administration panel. The most important part is to send the data that will be modifier in the overlay by socketIO. We are collecting our data from a form with a text input. This is the logic in JavaScript that we will use to send our data via SocketIO.
Time to test our Client / Server connection
Now we know that the connection works. Time to receive our connection in an HTML page. For this we will create our element in HTML, CSS and we will use JS to receive the data from our server.
If we put everything to work, it will look like this
In Web:
In OBS:
Now we can create as many elements, as we want. This is a simple guide to explain in broad terms how overlay works. In the future I will explain how to create the minimap and make it functional.
Result
Step 4— Links
You can contact me at: estevesegura@protonmail.com,
The code on: github
The stream where you can see this working: titus_clan
