How do multiplayer real-time applications work in canvas?

Question

JavaScript

I used to play browser games where several players and their movements on this map were displayed on one map (location) at once (for example, a game like a Petre cup - agar.io). But then I didn’t know what canvas was, and I didn’t think about how such things were implemented at all.
And recently, for the first time, I met with development on canvas. I want to understand how multi-user online applications are implemented on it?

As I understand it, in the requestAnimationFrame rendering function, in which the new position of player X is drawn, for example, it is shifted by 1 pixel, a post-request is sent to the server with the player's id and new coordinates of its location (offset by 1px). This data is saved and sent to all other players on the same map, and on their maps player X is drawn at the newly received coordinates. So? And this happens several dozen times per second (according to the frequency of calling requestAnimationFrame)?

Answer 1

There are at least 4 asynchronous (processed in parallel!) data acquisition cycles.
1. Synchronization signal: "heart beat" (heart-beat).
2. Local: only calculations.
3. Visualization/Rendering: FPS.
4. Network communication: multiplayer.
Everything is considered separately and independently of each other!
The most important is the clock signal (item 1).
BUT! Also, there are tolerances for all levels below that set acceptable optimization criteria and support correct synchronization and anti-cheat.
We do everything on the server on native sockets!
And, in order NOT to drive extra traffic in JSON format via WebSocket, I advise you to use websockify or engine.io(from socket.io developers).
Next - an approximation of the movement of objects and lag ... It will be even more interesting)))

Answer 2

Like normal chat, websocket