moonfetch

ShowCase · two demonstrations

Watch it write a request, then lose one.

Nothing on this page describes what moonfetch would do: the same package, built to JavaScript and loaded here, does it while you type.

01The anatomy of a request

Change the method, the address, a field or the body. The panels are produced by moonfetch compiled to JavaScript and running in this page — the same wire and frames a program calls.

Requestwritten as you type
⌘ ↵
HTTP/1.1 —
HTTP/2 —
What goes out
The same, in frames
nothing sent
Send it makes the request described above for real, from this page, through the browser host of the same library. It asks a public echo service, so it can be slow, and it can be refused.

02Convoy

One client, one server, ten requests, and a packet lost every few seconds. Switch the transport and watch what one loss costs the others: on HTTP/2 the streams are meant to be independent, but they share a connection, which is why HTTP/3 exists.

The octets in the score line are the library's own count: every delivery costs what wire or frames says the request weighs, so switching transports changes the arithmetic as well as the traffic.

03What the page shows

aField order The head carries the host, then what the caller gave, then the defaults a request needs. Nothing is reordered to look tidy.
bFraming HTTP/1.1 declares a length when the body has one and chunks it when it does not; HTTP/2 says the same thing with END_STREAM.
cField sections The HEADERS frame is HPACK, so its octets are not text: the hex is what goes out on a first request, against the static table alone.
dLoss A lost packet is recovered by the transport, not the library; what the library chooses is how many exchanges share one connection.