Using UDP in the Browser for faster Client/Server Connections

Rate this content
Bookmark
Yannick
Yannick
21 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in Español

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.

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

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.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
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. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
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

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
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.
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.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
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.
How to create editor experiences your team will love
React Advanced Conference 2021React Advanced Conference 2021
168 min
How to create editor experiences your team will love
Workshop
Lauren Etheridge
Knut Melvær
2 authors
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.