Making Multiplayer Games with Colyseus, Node.js and TypeScript

Rate this content
Bookmark

By interacting with the Colyseus community over the past few years, some fundamental questions (not necessarily connected with the framework) seem to appear time and time again when developers start to build their own multiplayer games. This talk is going to cover some of these questions, as well as the most common scenarios and techniques you can start using today when building your own multiplayer game.

Endel Dreyer
Endel Dreyer
31 min
07 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk covers making multiplayer games with Coliseus, Node.js, and Typescript. It explores the state of networking on the web, alternative servers, and how Coliseus works. The Talk also discusses client-side prediction, lag compensation, server limitations, scaling, and showcases cool games made with Coliseus. Additionally, it mentions Nakama and Unity integration for client-side prediction in multiplayer games. Coliseus is available on mobile and can be found on colossus.io or the GitHub repository.

1. Introduction to Coliseus and Networking

Short description:

Today, I'm going to talk about making multiplayer games with Coliseus, Node.js, and Typescript. We'll discuss the state of networking on the web, alternative servers, how Coliseus works, client-side techniques, and multiplayer games built with Coliseus. The state of networking on the web currently relies on WebSockets and WebRTC, with the potential future inclusion of Web Transport. While TCP is the only option for web-based games, UDP is generally preferred. However, many successful games have been made using TCP and WebSockets.

Hello, hello, everybody. I'm Enzo, I'm creator of Coliseus, and today I'm going to talk about making multiplayer games with Coliseus, Node.js and Typescript. I'm very excited to be here.

So, the topics of this talk are the state of networking on the web, alternative servers, how Coliseus works and its internal systems, some client-side techniques that you can apply even outside the scope of Coliseus, and a few multiplayer games built with Coliseus.

So, the state of networking on the web. Right now we have, for bidirectional connections, we have mostly WebSockets and WebRTC available. Web Transport, hopefully, is going to come in the future. WebSockets is TCP only and is available since 2011. WebRTC has been fully standardized only in the last year and is fairly complicated and involves a lot of other protocols and it does support reliable and unreliable connections. WebTransport, hopefully, is going to replace WebSocket in the future. Nobody knows when. And it's very exciting. It does support reliable and unreliable delivery and has experimental support already on Chrome since January this year. General advice for networking outside of the web is that TCP is not ideal for games and UDP is, it's hard to disagree of this, but unfortunately the web only has TCP as of now. Hopefully web transport is going to change that in the future and many successful games have been made in the past using TCP and WebSockets is what we got and there's a lot of successful games made on top of WebSockets.

2. Alternative Servers and Coliseus Framework

Short description:

In an alternative approach, the server validates and determines the state of the game, rather than relying on the client. Coliseus is a Node.js framework that uses WebSockets for transport. It provides matchmaking, room synchronization, and messaging. Rooms in Coliseus have lifecycle methods and can be created when clients request to join or create them. The matchmaking flow involves an HTTP request for seat reservation, querying for existing rooms, creating a room if necessary, and establishing a WebSocket connection. After the connection is established, the client receives the full room state and can start exchanging messages.

Okay, without further ado let's talk about alternative servers. So in an alternative approach you wouldn't trust the client so the client can say for example where he is or the client should never dictate information. The server should always be able to validate and tell the truth about the state of the game. So this is not very alternative, it might be fine if you're okay with this so this wouldn't be feasible on a multiplayer competitive game.

So an alternative to this is give more, give less information for the server. Let's say I'm pointing at a certain angle and moving forward so the server has the current position and he's going to the server is going to determine what's the next one and not the client. So this is alternative the responsibilities of the server is to hold the game logic, game state, validate client inputs and exchange messages with the clients and also the state. The responsibilities of the client is basically to be a visual representation of what's in the server and send inputs and actions for the server.

What Coliseus brings to the table, it is a Node.js framework. It's built only with WebSockets, so there's only WebSocket as a transport layer so far on Coliseus. It matchmakes players into rooms and has a built in room synchronization and message system. And it has the build blocks and the architecture so you can scale this to many servers and have many servers handle multiple rooms. And as you can see, rooms is a very basic block from Coliseus, and this is how a room definition looks like, and it has its life cycle methods, such as onCreate to set up a match, onJoin when some player joins the room, onLeave to clear this player from the room state and the other clients can react to this change, and onDispose when this room has been destroyed on the server. If you have a shared global state or something on the database, this is a good place to clear global things that this room has possibly created. In order for the clients to join this room, you need to expose this to the matchmaker. You see that there is no actual room being created at this point. Rooms are only created when the client requests to join or create them. On this example, it's the client requesting to join a game room and providing some information about himself, such as the name. For the matchmaking request, this is how the flow looks like. The client makes an HTTP request to ask for a seat reservation. The server is going to query for possible rooms that already exist. If it doesn't exist, it tries to create one and returns the room ID and session ID, which is the session reservation. After he got the session reservation, it tries to actually connect through web sockets. This is how the flow looks like from the server side perspective. First it tries to validate the user during on-off. This is totally custom and based on your own requirements. If that succeeds, it tries to call on join. At any point, you could throw an error here and the client would hit the catch block here. Yes, you could throw an error from the server and here it would go in the client. No error has happened during this process, the connection is established, and after the connection is established, the first thing is the client receives the full room state, so the client can already build the visual representation that that room has on the server and start exchanging messages and more state patches and more messages, and then it's regular web socket and bidirectional stuff.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
In this talk, we'll build our own Jarvis using Web APIs and langchain. There will be live coding.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.