Just Enough Multiplayer: Prototyping Realtime Multi-User Spaces with Socket.io

Chris Arasin
Apr 23 · 4 min read
A virtual water cooler experience the author built.

In the past year, we’ve had a renewed interest in building collaborative applications and virtual spaces where people can come together. While full-featured multiplayer networked games can be complex, we’ve found a simple socket.io server on Glitch to be an effective tool for rapid multi-user prototyping.

Where multiplayer gets complicated

Multiplayer games get complicated because of latency.

If I send an input to move to the left, my local client immediately renders that movement so the game feels snappy. However, it may take 100 milliseconds for that input to get to the game server, run the game simulation to determine what happens with a given input, and then another 100 milliseconds to send the resulting game state to all players. Now, there’s a 200 millisecond difference between where I think I am and where the other players do.

Competitive multiplayer games get complicated because they must create the illusion that this 200 millisecond difference does not exist. If you’re interested in how this is done, check out this fantastic resource by Gabriel Gambetta.

(Oh yeah, also networked physics.)

What’s not so complicated

Luckily, we can do a lot without solving this latency issue. For many applications, whether it’s a simulated world or a collaborative tool, we can simply run our virtual environment on each client, respond to updates from the server, and not worry about compensating for the milliseconds between us.

Bluecadet’s prototype 3D model viewer concept with co-presence from Virtual Events Are Experiences. Why Aren’t They Designed That Way?

A Demo Multiplayer App with Glitch and Socket.io

The following demo app will get you started with the concepts involved in adding simple multiplayer presence to an interface. The frontend is built with React. We will not be covering basic React concepts, so some level of familiarity is assumed. The server is built with Node.js/Socket.io and is hosted on Glitch. Glitch has been a fun development server environment for our multiplayer prototypes. It’s instantly deployed and allows for quick collaborative iteration.

Get the full code repos here:

Three separate networked instances of the demo app

The Frontend

https://github.com/ChrisArasin/simple-multiplayer-client

Our demo app will render a user as a colored circle and move them on click. We’ll use react-spring to interpolate between user position updates. While not suitable for every use case, getting fewer state updates and handling more of the movement in a client-side interpolation is a nice simplification and can still communicate presence effectively.

The Player

The player component renders a dot with a position and color. React-spring’s useSpring hook will interpolate between position updates with some configured settings (which are quite fun to play with).

The Game Board

Our Game board renders all other players at the latest updated position from the server, renders the current player in their latest input position, and captures user input. We separately render the current player so the user does not feel a delay between their input and the application’s response to a server update.

Client-Side Network Class

The client-side network’s init method is called on mount of the application. This establishes the socket connection, sets at listener for the stateUpdate events the client will receive from the server, and sends an initialize event to the server which will register the current player with its randomly chosen color.

When the user clicks to move, we both locally update the user’s position and send this position update to the server.

The Node Socket.io Server

Our server will accomplish a few tasks:

  • Keep track of the current state of all players
  • Handle new users joining
  • Send updates to each client of the current player state
  • Remove a user when they leave.

Player State

Our state data will be an object holding player information, keyed by their IDs. The createPlayer function will be called when a user joins to build a new player object.

Handling Player Events

We set up a handler for when the client side application calls io.connect. In this handler, we set up listeners for the three events the client can trigger.

When the client application sends the initialize event, we create a new player with the corresponding id and color, and add that new player data to the game state. We also begin emitting updates to all players if this is the first player joining (discussed in the next section.)

When the client sends a positionUpdate event, we update that player’s position in game state.

When a player leaves, the disconnect event is sent, and we remove that player from state.

Broadcasting State Updates

Once users have joined and we are updating their position in the server-side game state, we must broadcast these updates to all players.

The core of this function is io.emit('stateUpdate', players) call. This sends a snapshot of the current player data to all connected users. On the client side, this state object is used to interpolate each player to their updated position.

We have a stateChanged flag which prevents an update from being sent if there has not been an event that changed the application state since its last update.

We then confirm that players are still connected, and schedule another stateUpdate message at a given interval.

Extending the Pattern

This pattern can be summarized as:

  1. Client-side: Emit a user action as a message to the server
  2. Server-side: Update shared application state
  3. Server-side: In a game loop, broadcast that shared state to connected users
  4. Client-side: Interpolate between state updates
Bluecadet’s 3D virtual holiday party

In our Holiday Oasis, we used this flexible pattern to model all user actions, including movement on different surfaces, eating holiday treats, and triggering dance floor fireworks. It should serve as a solid foundation for bringing multiplayer features to a variety of contexts, whether it’s a realtime collaborative application or a simulated 3D environment.

Bluecadet

Bluecadet Cosmos

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store