How to work multiplayer real-time app in canvas?

I've played browser games where on the same map (location) is displayed by multiple players and their movement on the map (for example, a game like Cup Peter agar.io). But then I don't know what is canvas, and wonder how all these things are implemented.
And I recently met with the design on the canvas. Want to understand how it implement online multiplayer apps?

I understand that in the function render requestAnimationFrame, which draws the new position of the player X, for example, shifting by 1 pixel, is sent a post request to the server with user id and new coordinates to its location (offset by 1px). This data is saved and sent to all other players on the same map, and they have maps player X is drawn on the newly obtained coordinates. So? And this happens several dozen times per second (frequency of the call requestAnimationFrame)?
April 7th 20 at 15:20
2 answers
April 7th 20 at 15:22
Solution
There are at least 4 asynchronous(parallel processed!) receive loop data.
1. Signal synchronization: "heartbeat" (heart-beat).
2. Local: only calculations.
3. Render/Rendering: FPS.
4. Network communication: multiplayer.

All considered separately and independently from each other!
The most important is the clock (p.1).

BUT! Also, there are tolerances in all levels below, which establish permitted optimization criteria and maintain the correct synchronization and anti-cheat.

It's on the server do on the native sockets!
And to drive extra traffic in the JSON format via WebSocket, I advise you to use websockify or engine.io (from the developers of socket.io).

Further approximation of the motion of objects and lag... It will be even more interesting)))
What is the native sockets in the browser? - Nicola87 commented on April 7th 20 at 15:25
@Laura95, tcp/udp with ws-wrapper or two with a header.
The main thing - not to drive the text in the JSON. - zetta_Ter commented on April 7th 20 at 15:28
@palma.Gutmann, ws long is able to convey these binary data. Though protobuf it drive.

And there is an example of what you mean by "tcp/udp with ws-wrapper"? - Nicola87 commented on April 7th 20 at 15:31
@Laura95, in response, I added the links. - zetta_Ter commented on April 7th 20 at 15:34
@palma.Gutmann, looked clear. I really thought in the browser to something else, and there is the same websocket. - Nicola87 commented on April 7th 20 at 15:37
@Laura95, Well, let it be for now.. Although there is in experimental mode real chrome raw tcp and udp. But I don't test. - zetta_Ter commented on April 7th 20 at 15:40
April 7th 20 at 15:24
As a normal chat, a web socket
@Rhett.Conn, sorry for the noob, I guess the question I'm just a student still, actual practice I 0, for such things use just Redis? - Reid86 commented on April 7th 20 at 15:33
Here I was more interested in whether requestAnimationFrame is sent to the old on the new coordinates, i.e. a direct frame-by-frame or once per second?) With chat-it is clear - the Submit button there is a request. - Reid86 commented on April 7th 20 at 15:27
@anika.Jones, if the game engine is able to meet(and it should) in 16мс, then Yes, otherwise the smoothness of the game will suffer. - wilton_Hya commented on April 7th 20 at 15:30
@anika.Jones, redis is a store for quick access. Not necessarily, and the language tools to create arrays/objects that will live in memory, and no spacers in the form of radishes, it's faster to access them to have.
In General, for such problems, you need to use the most quick decisions and work in a loop requestAnimationFrame to minimize cesira everything that can be cache. - wilton_Hya commented on April 7th 20 at 15:36
@Rhett.Conn, thanks for the detailed answer! - Reid86 commented on April 7th 20 at 15:39
@anika.Jones, @tillman_Lemke23, @Rhett.Conn, no.... It's much more difficult... - zetta_Ter commented on April 7th 20 at 15:42
@palma.Gutmann, I wrote of the game, clear the stump is much more difficult, some conflicts are worth, but if you take a game with animations, without conflicts, to take a card for example, the communication between the server and the user, is slightly more complicated chat with proper knowledge of course. - Norval_Kuhic commented on April 7th 20 at 15:45
@tillman_Lemke23, well, it's step-by-step... And so - Yes. - zetta_Ter commented on April 7th 20 at 15:48

Find more questions by tags CanvasDevelopment of gamesJavaScript