Fixes the build: In-Browser UDP
Author: Jacob Langworthy
This was initially going to be a talk proposal for !!Con, but thanks to the magic of procrastination and power outages here it is in blog form!
I’ve been thinking a lot about netcode.io, which is “A simple protocol for creating secure client/server connections over UDP“. It was proposed by Glenn Fiedler as a standard to integrate into web browsers, which more or less exclusively use TCP communications with servers. You can read his thoughts on this subject here but I wouldn’t recommend it because it’ll make this post look worse.
If you feel like you’ve got a basic handle on why we use UDP in games, feel free to skip the next section. Wow that is a lot of hyperlinks.
What’s wrong with TCP anyways?
Not much, as long as you need ordered, reliable data. It’s great for things like static web pages where you need all the content of a file in-order. TCP is what the web has been using pretty successfully for years.
Now when we look at games, TCP has a problem called head-of-line blocking. This happens when I send you packets 1 > 2 > 3 > 4 and you receive 1 > 2 > 4, you will wait to receive packet 3 before you process packet 4. The head of the line is packet 3, and you will block until you receive it.
This means your character will sit at their current position until receiving packet 3, and then either process all remaining packets very quickly or be very behind.
For games, if we think about data transmission a little differently we’re able to keep more up to date. The general idea is to treat your game data more like a data stream, where you’re constantly sending and receiving the most up to date state. We don’t want that data that’s just getting older and older, we want to throw it on the floor when it gets here and just use the most recent info we’ve got.
So this is where UDP comes in. On its own, UDP is unordered and unreliable. Typically games will build ordering into their packets, because we do need to know what data is the most recent data. Now when I get packet 4, I move my character to their new position instead of waiting on packet 3.
Aren’t there extensions or add-ins or something that could do this?
Sure, but that’s a terrible option. I can count the number of Chrome extensions I have installed or I’m willing to install on… anything, because it’s 0. I know my opinion is anecdotal, however web browsers are one of the most installed pieces of software in the world, and web browser extension attach rate doesn’t approach the same numbers. Chrome is estimated at 2 billion downloads, and the most popular extension I could find was Grammarly for Chrome, at 10mil+ users. That’s roughly 0.5%, and it’s a good attach rate.
These statistics wouldn’t hold up in court, but the point is that functionality in the base install of Chrome will be adapted by a wider audience than an extension required for using your web app.
Ok so we add UDP into Chrome or whatever, now what?
The most obvious answer is that you can make games in-browser even better, like http://agar.io/ or https://manygolf.club/.
Maybe less obviously, you could have a web app that spectates games in-progress. You could even interact with those games in real-time, dropping bonus pickups or obstacles. You could have an asymmetric game of console players vs. the web.
You could have FaceTime in your browser.
You could stream elements into your DOM as they arrive instead of waiting for them in-order.
You could monitor sensor data in real-time, say for heavy or sensitive machinery.
Perhaps you could control a robot or fly a drone from your browser.
Maybe you could get really creative and…
Well, what would you do with a real-time data stream from server <-> browser?