↑ ↓ to move · enter to open

C03 · Computers · packets · routing · TCP · DNS

how the internet moves data

Every page you load arrives as a stream of small numbered envelopes called packets. Each one travels on its own. Routers pass it along using a map of the network, the two computers at the ends count what arrived and re-send what didn't, and a phone book of names turns visualmath.dev into a number a router can use. Underneath it all, the speed of light sets a hard floor on every reply.

LAB 1

chopping a message into packets

A network moves small chunks more easily than one long blob, and a damaged chunk is cheap to send again. So your computer turns the message into bytes, cuts the bytes into packets and writes a header on each: who it's from, who it's for, its number, its length and a checksum. Packets can take different roads, so they arrive in any order. The receiver sorts them by number and uses the checksum to throw out damaged ones. Type a message, then click a packet card and damage it in transit.

network
8 B
Packet #0 in transit:

How to read this: Each moving dot is one packet, numbered in the order it was cut from the message. Watch them take different routes through the routers (R1 to R5) and arrive out of order. The numbers in the bottom corners are the two addresses: your computer on the left, the server on the right.

  • a packet on its way (number = its place in the message)
  • a packet damaged on the way

Try this: Click packet #0 below, press "Flip one bit", then Send: it gets dropped. Then try "Swap two words": it sneaks through.

Sender · click a packet to inspect or damage it · "sum" = its checksum
Receiver · arrival order
Receiver · sorted by sequence number · green = passed the checksum · red "dropped" = failed it · "wrong!" = damage the checksum missed
—
Message size (UTF-8)
—
Packets · header share
—
Arrived intact
—
Receiver status

Checksum of packet #0RFC 1071

sum = 16-bit words added, carries wrapped checksum = NOT sum

CodePython

Real packets

Real IPv4 and TCP headers are at least 20 bytes each. A standard Ethernet link carries at most 1500 bytes per packet, so a typical TCP packet holds up to 1460 bytes of data. This toy header is 14 bytes, and the addresses are reserved documentation addresses.

IPv4 puts this exact checksum on its header, and TCP and UDP put it on their header plus data. It catches accidents such as a flipped bit. Swapping two words leaves the sum unchanged, so that damage gets through. Each Ethernet or Wi-Fi link also checks frames with a stronger CRC, and stopping deliberate tampering takes a cryptographic hash: see C04 · Encryption & hashing. The bytes themselves come from UTF-8, covered in C00 · Bits & bytes.

LAB 2

finding the way

No router knows the whole road a packet will take. Each one only knows which neighbor to hand it to next. Inside one network, every router learns the full map of links and their costs, then runs Dijkstra's shortest-path algorithm on it to fill in that table. Click a router to set the source or destination. Click a link to change its cost or cut it, and the routes recompute.

network map
Click a router to set
Link — —
step 0 / 0

How to read this: Letters are routers; the number in the box on each link is its cost. The small number beside a router is the cheapest cost found so far from the source (∞ = not reached yet). Step through to watch the search spread out from the source, always finishing the closest router first.

  • not reached yet
  • reached, cost not final yet
  • being handled this step
  • cheapest cost is final
  • on the winning route
  • link being tried this step (faded if it didn't help)
  • part of the best-routes tree
  • thick gold: the final route
  • cut link (×)

Try this: Press Run Dijkstra, click a gold link on the route and press "Cut link". Watch a new gold route appear.

—
Cheapest path cost
—
Route
—
Settled routers
—
Frontier

This step

dist[v] = min( dist[v], dist[u] + cost(u, v) )

Forwarding table at Adestination · next hop · cost

CodePython

Between networks it's policy

Inside one network, link-state protocols such as OSPF and IS-IS flood every link and its cost to every router. Each router runs Dijkstra on that shared map, exactly as here. OSPF often sets a link's cost from its bandwidth, so faster links look cheaper.

The internet as a whole is tens of thousands of separately run networks. Between them, routers speak BGP: each network announces which address blocks it can reach and the list of networks along the way. Each network then chooses by its own policy, usually business first (routes through paying customers, then free peers, then paid providers), with a shorter network list only as a tiebreaker. So the path between networks is often not the shortest one. More on shortest paths in 002 · Graphs.

LAB 3

reliable delivery over an unreliable network

Packets get lost. When more packets reach a router than its outgoing link can carry, its queue fills and it has to drop some. TCP builds a reliable stream on top anyway. It numbers every byte, the receiver replies with an acknowledgment (ACK) naming the next byte it needs, and the sender re-sends anything that stays unacknowledged too long. A sliding window lets several packets be in flight at once, so the sender doesn't sit idle for a whole round trip after each one.

sender → receiver
Sender · gold underline = window · green acked · amber sent, waiting
Receiver · green delivered in order · amber held out of order
6 15%
0 ms

How to read this: Each slanted arrow is one packet crossing the network; it slopes because the trip takes time. The sender re-sends a packet after a "timeout" (no ACK for too long) or after "3 dup acks" (the receiver asked for the same missing byte three times).

  • data
  • ACK back: "I have everything up to byte N"
  • ending in ×: lost on the way
  • "re": a re-send
  • SYN / SYN-ACK: the opening handshake

Try this: Set Packet loss to 30%, press Play, and follow a red × until its amber dashed re-send appears.

—
Throughput · no-loss run
—
Delivered in order
—
Lost · data / ACKs
—
Re-sent · timeouts

First, a handshakeSYN · SYN-ACK · ACK

Each side picks a random 32-bit starting number, so stray packets from an old connection are unlikely to fit the new one and outsiders can't easily guess the numbers. Each side acknowledges the other's number plus one. After that the diagram counts bytes from 1, as packet tools like Wireshark do.

Now

throughput ≤ window ÷ round-trip time

Each packet here holds 1000 bytes, takes 10 ms to put on the wire and 50 ms to cross, so a round trip is 110 ms. A window of 6 can push at most 6000 bytes per 110 ms. A window of 11 or more keeps the wire busy all the time.

CodePython

Same rules as the diagram. Python's random numbers differ from the page's, so the individual losses differ.

What's simplified

The ACKs are cumulative, as in real TCP: "ack 4001" means every byte before 4001 arrived. The receiver holds out-of-order packets, and the sender re-sends only the oldest unacknowledged one, either when its timer runs out or after three duplicate ACKs (fast retransmit).

The window here is fixed. Real TCP also runs congestion control, which grows the window while things go well and cuts it after a loss. Real timeouts come from measured round-trip times and double after each expiry. The standard (RFC 6298) recommends a floor of 1 s, though Linux uses 200 ms. This one is fixed at 300 ms. The handshake is shown without loss.

LAB 4

names to numbers, and the speed limit

Packets carry numeric addresses, but you type names. The Domain Name System (DNS) finds the address by asking a chain of servers, from the root down to the one that knows the name, and every answer is cached for a set time called its TTL. Then physics takes over: no reply can come back faster than light can make the round trip.

dns lookup
Clock 0 s

How to read this: Your computer asks a resolver, which asks each server in turn until one knows the address. "Cached" under the resolver means it remembered the answer, so no trip is needed.

  • a question going out
  • a reply coming back
  • the final answer delivered to you

Try this: Look up twice in a row, then press "+3 days" and look up again.

Resolver cache · green = still remembered · red = expired (its TTL ran out)
the speed of light
great circle · no coastlines

How to read this: A flat map of the world with no coastlines drawn; dim dots are cities. The gold curve is the shortest path over the globe between your two cities (a "great circle"). It looks curved only because the round globe is flattened.

—
Lookup time (illustrative)
—
Round trips · cache hits
—
Great-circle distance
—
Minimum RTT in fiber

The walk

    How caching changes it

    The resolver (run by your internet provider or a public service) starts with the root servers' addresses built in. The root only knows who runs .dev, the .dev servers only know who runs visualmath.dev, and that server has the answer. Each reply comes with a TTL, so a second lookup soon after costs one short trip. The root zone really does give its top-level domains a 2-day TTL (172,800 s). The other TTLs, the delays and the address 192.0.2.44 are illustrative.

    Light in glass

    d = 2R·asin √( sin²(Δφ/2) + cos φ₁ cos φ₂ sin²(Δλ/2) )
    RTTmin = 2d ÷ v, v ≈ 200,000 km/s ≈ ⅔ c

    This is a floor. Real cables don't follow great circles, and every router adds a little delay, so measured ping times run higher. The formula treats Earth as a sphere of radius 6,371 km, good to about 0.5%.

    CodePython