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

server.js

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.

admin.ejs

Time to test our Client / Server connection