HTML5 Multiplayer Games over UDP (client/server) using geckos.io

logo-256

geckos.io

I just wanted to share a library I built a while ago. I read a lot, even in newer posts, that networking over UDP is not possible in the browser. But it is possible. WebRTC’s DataChannel can send unordered and unreliable message via UDP (SCTP). But WebRTC does not only work in browsers. It works, amongst other things, on Node.js. So if you want to network your multiplayer game over UPD, use WebRTC on the browser and on node.js.

That’s exactly what my library does. Sending client/server messages via UDP between browser and node.js. Take a look! I’m sure some of you can use it :slight_smile:


logo

Snapshot Interpolation

Also take a look at my snapshot-interpolation library for easily adding Snapshot Interpolation (also called Entity Interpolation or Buffer Interpolation) to your Games.

  • Snapshot Interpolation
  • Client-Side Prediction and Server Reconciliation
  • Lag Compensation
15 Likes

Hey amazing work!
So by using your library, one could build a real-time co-op game?!

Can I ask, since you’re using WebRTC, If you use a server to do the handshaking, then connect directly the 2 clients and let them exchange data in real-time?If so how is the latency looking like?

Since you’re using the DataChannel and unordered message over UDP, I bet that in a local environment, those are the best conditions to have as less latency as possible.

This is all of great interest for me as I am thinking of letting my player play my game on his tv/pc and use a phone as a controller, all of this connected through WebRTC.

I guess, simply put, my question is how is the real-time feel when using WebRTC and what’s the exact role of the server?

Anyways great to see your work!

Glad you like it :smiley:

Yes :slight_smile:

It was designed to be used on a server, but you can of course use it locally as well.

You mean using the tv/pc as server? You can run geckos.io in electron. So yes, if you ship your game with electron, it could host a @geckos.io/server instance.

Geckos.io does the exact same thing as socket.io, but instead of using TCP it uses UDP. The gameplay feels a lot smoother via UDP. Of course if make a real-time multiplayer game, you will experience some lag due to package loss and others. But there is also a solution for this called @geckos.io/snaphot-interpolation.

1 Like

Looking nice. I’ll make sure to give it a try.
It’s been a while since I played with WebRTC. Back then, there were issues with both Firefox and Chrome, resulting in only reliable connections being established at times. And the reliable configuration was not nearly as performant as WebSockets. On top of that, there were no precompiled versions for NodeJS, so installation on different environment varied and was at times tedious.
Do you have any idea of the performance of running wrtc on NodeJS compared to WebSockets?

I don’t have any numbers. Users tell me that the benchmarks they made are excellent.

I will try make a simple 3d scene to compare WebSockets with geckos.io. I will publish it here in the next days.

I just made a one to one comparison between geckos.io and socket.io. Hope it helps :smiley:

5 Likes

@yannick, this is groundbreaking! Thanks so much for creating the first working JS example (I’ve seen) inspired by Glenn’s UDP vs. TCP article’s examples.

Suppose we are using WebRTC and have no interest in peer-to-peer connections, but are only interested in client-to-dedicated-server connections (for a server-authoritative game). Since the dedicated servers will have public IPv4 addresses, will there be zero need for STUN and TURN servers? And Signaling servers are always required, but the dedicated server can also act as the Signaling server using WebSockets to communicate with clients?

Would be thankful for any guidance you could provide on this, @yannick :smiley:

Hey @yannick - got a question - How well does Geckos scale across multiple cores and servers?

Just curious :slight_smile:

I never made it work without a STUN server (there are many free once available). I have no idea if there are scenarios where a TURN server is needed. I would add a TURN server, track if someone needs it, and shut it down if it is not needed.

Yes, geckos.io handles the signaling itself (on port 9208 by default). It does not use WebSockets for the signaling. It uses http.

1 Like

Thank you so much, @yannick!

1 Like

I do not know if and how well it uses multiple cors. If we assume a multiplayer game with 16 players, I do not know if it make more sense to spin up a new geckos instance per game, or if it is the best to run only one geckos instance and use it for 10 games with a total of 160 players.

I really have not done any benchmarks of this kind yet. And really only a active multiplayer game will tell us which settings/options are the best.

I will, however, invest some time in the future to figure all of this out.

Hope it helps :slight_smile:

2 Likes

I just uploaded 2 videos for the Snapshot Interpolation library. A short and a long video. Hope you like it :slight_smile:

3 Likes

Amazing, thank you for your demo videos :smiley:

1 Like

Hey yannick,
Sorry for having been long to reply, my macbook died one day, all of a sudden, in the countryside of mexico while we were in the middle of a pandemic… But now it’s back.

No! Apart from serving the files when my player downloads my game, my aim is to use no server at all and instead building everything thaught out for offline usage.

So basically if you play on a phone, you use touch controls and then if you happen to have a PC or a smart TV, you can either use a gamepad or use the very same phone as a controller connected by webrtc. Kind of the nintendo switch of the poors :sweat_smile:

And so as long as the PWA or the website is opened on both device, the communication can happen, online or not. everything remains local. As signs of encouragements in this direction, I’ve stumbled across a few github projects that make WebRTC work without a signaling server:


Anyways, just wanted to share and thank you for the clues you’ve given here :sunglasses:

Cheers!

@wwwonka, hopefully our expert @yannick can offer some insight on this :smiley:

I read briefly through the second repo webrtc-without-signaling-server. It seems this demo did not require a signaling server, since the caller (user creating offer) and callee (user answering offer) both live on the same web browser index.html page. This would not work in either peer-to-peer or client-server situations. I think some form of signaling (some options being HTTP requests as mentioned by yannick, WebSocket, or even by pigeon mail :stuck_out_tongue: ) is required for both of these scenarios.

Yes you are right.
I have been digging around those past few days and it seems like the signaling part is what’s gonna kill it. In the context of a local network, it seems all examples I have been able to find (and there’s not alot), the way of getting around without a server is to exchange ice candidates manually, or make use of qr codes.

And this is a multiple steps process. As in:

  1. the first client acts as the initiator and sends its ice credentials (by pigeon!) to the 2nd client
  2. the 2nd client pastes this in its browser, and sends back an answer containing his own ice credentials.
  3. the initiator then pastes the answer on his side.
  4. the connexion can occur.

This is very sad. I am really craving for a alternative and more elegant solution to this problem because even though this would technically work and, from my understanding, could even persist cross-sessions (meaning that it would only have to occur once per pair of device), it just murders the first impression. Even with QR codes this process would mean having to scan 2 of them, and one from each device. Big ugly ones as well.

Kind of off-topic but thaught I would share, in case someone has an insight about it.

1 Like

Awesome work!

This is one of the most beneficial libraries I’ve seen for browser games. An additional feature that may be beneficial for even outside of gaming is to add a clean way to implement UDP voice chat for Node.

Again, great work! I look forward to working with this in the near future!

Geckos.io sends all traffic through a server, which will add latency to your audio and it is not cheap. A better option for voice chat would be a P2P WebRTC library (like https://peerjs.com/ for example).

1 Like