Using UDP in the Browser for faster Client/Server Connections

Rate this content
Bookmark
21 min
28 Sep, 2023

AI Generated Video Summary

This talk introduces geckos.io, a real-time client-server communication library using UDP and WebRTC. The speaker discusses the benefits of UDP for real-time multiplayer games and explains how geckos.io enables UDP connections between browsers and Node.js servers. The deployment process for geckos.io involves opening UDP ports and handling signaling through an HTTP request. The speaker demonstrates how geckos.io works with Docker and showcases the ability to host multiple servers on the same machine. Overall, this talk provides an overview of geckos.io and its applications in real-time communication.

1. Introduction to geckos.io and My Background

Short description:

Hello and welcome to my talk about geckos.io. I will quickly tell you about myself and then show you more about geckos and make a demo using it. I did a lot of software and DevOps in the past. Now I'm working as a web dev teacher at a school. I have published several libraries, including geckos.io, Enable3D, EnableJS, Fiveserver, and html2app.dev. Currently, I'm teaching WebDev and maintaining some commercial products. The only library I use a lot is Nano.jsx. Let me quickly show you Enable2D, Nano.jsx, and HTML2 app.

Okay, so hello and welcome to my talk about geckos.io. My name is Janik and this here is my GitHub profile, in case you're interested. I will quickly tell you some things about me and then I will show you more about geckos and make a demo using geckos.

Okay, so I did a lot of software and DevOps in the past. Now I'm working as a web dev teacher at a school very close to where I live. It's a lot of fun, a lot of students. I have around 80 students. It takes a lot of time but it's really fun. I did a lot of free and open source work in the past. The one, my first big library I published was geckos.io, which I will talk about today. Then we have Enable3D which is a wrapper around 3js and AmmoJS. Then another EnableJS, a very simple JSX library. Then we have Fiveserver, which is a fork of the Live Server NPM package, which I then also published to the vscode multiplier. Then we have html2app.dev, which is a free service for now, which converts your html apps to native apps using capacitive. At the moment, it uses capacitive version 4. I haven't had time to update to the latest version. Then now, as I said before, I'm teaching WebDev, mostly Javascript, HTML, CSS, SQL. Then I do still maintain some commercial products. And because of all of that I don't have much time to work on open source. I do try to keep them up to date, maintain them, but it's not that easy if you don't have much time. The only library that I use right now a lot is Nano.jsx, but it is pretty stable, so I don't have to make a lot of updates unless there are new features I want to add. I guess I will quickly show you those things. Let's see. Here is Enable2D. It looks like that. We just have three.js and some physics. Then Nano.jsx, a simple JSX library. It's isomorphic, so you can use it on the server and the client and mix it. Then here is HTML2 app, which converts your HTML5 objects to capacity-based mobile apps. Here FiveServe.

2. Introduction to Geckos.io and UDP

Short description:

It's like a better live server with more features and kind of an improvement over the old one. Some of my bigger projects. Geckos.io is a real-time client-server communication over UDP using WebRTC and node.js. UDP is used in real-time multiplayer games for its speed and reliability. I built Geckos to enable UDP connections between browsers and Node.js servers using WebRTC. The initial version used the WRTC library, but later I found the Node data channel library to be much better.

It's like a better live server with more features and kind of an improvement over the old one. I guess that's it. Some of my bigger projects.

Then let's go to geckos.io, which I will go into a detail here. Very detailed here. Let's go to its website. We have that. Let's go to its website. It says it's a real time client server communication over UDP using WebRTC and node.js. What does that mean? First we have to know what is UDP, what is TCP. I will not go into very detailed things here. You can just like say. So most real time or kind of all real time multiplayer games you install on your desktop or your Playstation, your console use UDP for real time connections because it's unreliable and unordered or you can set it, that you want it unreliable and unordered and that makes it perfect for multiplayer games. The theory about that you can read it yourself I guess you already know it since you are watching this video and I kind of skipped why I did it. Well I was doing multiplayer games, I was reading a lot and figured out that UDP was much faster but UDP wasn't available in the browser, at least not for client server connections. If you know WebRTC, there you can use UDP for peer-to-peer, so client-to-client connections, but client-to-server connections was something that the browser couldn't do or there wasn't really a thing or some people did it with other libraries. But in Node.js, at least as far as I know, it wasn't possible, so I tried to build it. So, I built Geckos. Let's go to the repository. Here you have the repository.

The version 1 of Geckos was built on the library WRTC, which is like a huge binary. It was slow. Connections were slow. And it wasn't useful, but it did work. So, you could make a browser to Node.js server UDP connections using WebRTC. So, the server itself would handle the signaling between itself and the client. Then you had to make server IP public, so the client could directly connect to the server via WebRTC data channels. And then later I've found that the Node data channel library was much better. And it was designed. This here is the repo.

3. Geckos.io and UDP

Short description:

It's nodejs-bindings for libdata-channel. It uses WebRTC connections from the browser to the server. The server IP has to be public for the client to connect directly. You have to open UDP ports on the server and handle signaling through an HTTP request. Users often get stuck at deployment. Here is a video comparing UDP and TCP.

It's nodejs-bindings for libdata-channel. And it was built by Murat. And the libdata-channel itself is written in C, C++. And it's very lightweight and is developed by Paul-Louis Agneau. Okay. And still a lot of commits every week. And it works pretty fast, and it's pretty lightweight. And, yeah, it's pretty... Never had issues so far with it. So thank you both for developing it.

Okay, now. So where was I? How does it work? Okay, so as I said, it uses WebRTC connections, WebRTC data channel connections from the browser to the server and the signaling is also done on the server and the server IP has to be public for the client directly to connect to that server. Most people, I guess, struggle if they have a load balancer in front. Let's assume you have an NGINX server here and then here is like Docker server or Docker swarm and the WebRTC connections do not go through the NGINX servers, through the load balancer. Only the data, HTTP and so on goes to the load balancer but the client has to connect directly to the server itself. So that's why you have to open these UDPs ports on the server itself but all the signaling goes through a HTTP request. A lot of people who use Kekos kind of get stuck there. And also since it uses UDP, I mean, you can use TCP if you want but that's kind of nonsense because you have better things that use TCP, like WebSockets. You have to have the kind of knowledge about how to set up a server, how to install these things, how to forward these ports. You can't just host gatecost.io app on services like Heroku. And I see a lot of users who use Geckos, they get stuck at the deployment. Therefore I go quickly over those steps. Let's see. Change log times to dock. Let's see. Yeah, there is no problem where was it? OK, first, here is a very nice video that compares UDP and TCP. Here you will see it demonstrates package loss. With normal landline Internet connections you would not really experience package loss, but if you have an Internet connection that is very bad, or maybe you have something, a satellite Internet connection with a lot of package loss and huge latency, there you would see things like in this video. Just have a look if you are interested. And another video quickly.

4. Geckos.io, Deployment, and Docker

Short description:

This video provides a good overview of how WebRTC works, including signaling, STUN, and turn services. For Geckos deployment, you need to open UDP ports, with the default signaling port being 9208. Geckos is ideal for real-time multiplayer games, but for turn-based games like chess, socket.io or simple HTTP requests are sufficient. I will now demonstrate how Geckos works with Docker, using a simple example with an express server and Geckos initialization.

This one is also very useful video, if you have not enough knowledge about WebRTC. I quickly open it here. It's a very good talk about how all works, how the signaling works, and about STUN and turn service and so on. I encourage you to watch this video here.

I want to go through the ports you have to open. Let's see. Ah, here, deployment. So, for the deployment you have to open these UDP ports, because it uses one of these ports. And by default, it uses 9208 for the signaling, but you can define that in your application. You will find that in the documentation. But since here you have to open UDP port and services like Heroku or other services that include all-in-one service for node deployments, you can't use it.

Then, quickly here, when you should use or should not use the deployment Geckos, Geckos really shines when you have real-time multiplayer games with an authoritative server. A real-time shooter, for example. If you just want to make a chess game, round turn-based chess game, there is no need for Geckos. You can simply use socket.io or even simple HTTP requests. Okay, I guess that's it.

Now I will go and show you how it works with Docker. I have built an example. If you start with Geckos, you should first read this example. It's very simple. You have a server.js file. It uses express server. Then here is some Geckos initialization and very simple code. And I have also published that app as a docker file on docker container and I will just show you how it works. Let's see. I will connect to a server. I have installed Ubuntu and docker. You can see that it's running on EC2 instance and it should work out of the box. Let's see. If I install that, you can see the, I open, I forward port 3000 TCP where the server and signaling is done in case of this app here and I forward UDP port range between 10,000 and 10,007 because I limited in this application I have limited the port range between these two and it then uses multiplex so you can use multiple UDP connections on the same port.

5. Connecting via WebRTC and Hosting Multiple Servers

Short description:

We are now connected on port 3000 via WebRTC, allowing communication between clients through the server. This example demonstrates the use of multiple KCOS servers on the same server with different port ranges. By forwarding the app to port 3001 and setting the min and max UDP ports to 1001, multiple containers can be hosted on the same server.

Okay that is running. Now I just have to grab the IP. Okay and let's see on port 3000 we are now connected so you can write anything, open new window and then talk to each other just like a simple chat app. And this is now all done via WebRTC and it goes from one client to the server and then to the other client. And what's so neat about this example here uh where is this client yeah is that it shows you how you can use multiple different uh stock KCOS server on the same server with different port ranges. So here I forward the app to 3001 and I open just one port and set that to min and max UDP port to 1001 and so you can host multiple of these containers on the same server. Yes.

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
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. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
React Advanced Conference 2021React Advanced Conference 2021
168 min
How to create editor experiences your team will love
Workshop
Content is a crucial part of what you build on the web. Modern web technologies brings a lot to the developer experience in terms of building content-driven sites, but how can we improve things for editors and content creators? In this workshop you’ll learn how use Sanity.io to approach structured content modeling, and how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. It’s intended for web developers who want to deliver better content experiences for their content teams and clients.