A brief intro to WebSocket

Have you ever wondered how collaborative environment in Figma, metaverse 3D, and even games like among us work behind the scenes?

You and your two friends are inside a same room in among us. When you move your joystick in your phone your character moves in your phone as well as in the screens of your friends in real time.

Let me explain in detail how this works.

The answer is WebSocket. In that game there are two servers: one is normal backend server for http endpoints, and for other simple purposes. The other server is WebSocket server.

When you move your character in your phone, that creates an event. Here, this event is movement event (as you simply moved your character). Let us assume your character was in 2,3 and you attempted to move your character in 2,4. This creates a movement event.

This event is transferred to the WebSocket server. Here, firstly WebSocket sever validates the movement like if there is another character in 2,4 it simply rejects your movement event, and you are still in 2,3 end point. If everything is clear, WebSocket server updates the new location of your character from 2,3 to 2,4. This update is distributed across all the screens (your screen, your 2 friends screen) saying the character 1 has moved from this point to this point.

Finally, this event is rendered by rendering engine like 3JS and your character movement is shown at a same time in all of the screens.

In brief, this is the simplest explanation of how WebSocket works as well as what’s the logic behind the simple movement in a game. Everything is same in case of inner working of collaborative environment in Figma as well, just the event transferred to the WebSocket is a different type of event rather than movement event.