If you follow tailscale you may have seen they introduced a new feature called funnel. You can read here about the details of how this works internally.
If you enable funneling, TS sets a public DNS record for your node.tailnet.ts.net MagicDNS. That records points to public IP address of servers that TS controls. Similar to their DERP servers. Then they add the funnel server that handles the public side of the funnel to your tailnet. The server only offers a TCP connection that your node can reject or accept. You can set that up via the TS client. Admittedly, this part is a bit magical and I am waiting to see a follow up post on this.
But the reason of this post is not to talk about the funnel feature but about a nice visualization that TS has been using on their funnel related materials.
We can take a look at the javascript code. At the high level, the snippet uses a 2D physics engine called Matter.js. What is a physics engine you may ask? It is a piece software that allows you to define a world (2D world in this case). To define a world means to instantiate objects in the world via calls to this library. You also define parameters on how those objects should interact with your world: friction, air friction, density and many others. Once you have your world defined and the parameters set, you can tell the engine to render your world (in a canvas element in this case). The engine then computes the expected behavior of your objects in the world given the parameters you have defined. It basically computes the "scene" of the world in the 2d plain and renders it in the canvas at every frame.
To create the funnel illusion, the world consists of four rectangle objects. Then we also have circles that are added every certain amount of time. Those circles start at the top of the plane/world so they fall as they would to in the real world. Eventually they hit the walls of the funnel (rectangles) or other circles.
Awesome right?
When I saw the visualization I thought: what would happen if map actual funnel requests to the creation of those circles?
Mapping funnel requests to our physics world.
What I did is to setup a websocket between the javascript code and the server that answers the funnel requests. When a new requests comes, we send a message to the client over the websocket and the javascript code adds a new circle to the world.
Now the data in the visualization is mapped to the actual funnel requests. Nice.