Using UDP in the Browser for faster Client/Server Connections

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.

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.

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.

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.

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.