--- title: "Computer Networks overview" description: "Watch the stack a packet actually climbs — how OSI names seven jobs and TCP/IP wraps three headers — then the conversations behind every page load: DNS, the TCP open and close, TLS, HTTP/1.1 vs HTTP/2 vs HTTP/3, and the routing protocols that fill a next-hop table, each animated with code synced beat by beat." source: https://vizlearn.app/cs/networks --- # Networking Visualizations Networking visualizations show the stack under every web page, message, and download. A request is not one blob: it is a note in a box in a crate, and each hop only unwraps as far as it has to. Before your browser can send a single byte to a site, that crate still has to find an address, agree on a connection, and prove who is on the other end. This collection animates the map first, then those conversations, each beat synced to the code that produced it. The internet underneath is unreliable and decentralised on purpose. Packets can be lost, duplicated, or arrive out of order; no single machine holds the map of every name; and no router promises otherwise. Every protocol here exists to build something dependable on top of that — and the most revealing moments are the beginnings and the ends, where two parties who can only shout into the dark have to establish shared state. ## How a Request Gets Off the Ground Eight questions, and each has a lesson. Start with the map — what a layer is allowed to see — then the conversations that run on it, then how the files share the channel, then how hard the sender may push, then the control plane that tells a packet which neighbor to take: - **What even is a layer?** The OSI / TCP-IP model is the map. On a typical Ethernet + IP + TCP path, encapsulation adds three lower-layer headers — TCP, IP, Ethernet — not seven. Session and Presentation do not add envelopes. A router unwraps only to Network and never speaks HTTP, which is why the split exists. - **Where is it?** DNS resolution turns `www.example.com` into an IP address by walking a hierarchy — root, then the top-level domain, then the zone's own nameserver. Only the last one actually answers; the others hand back referrals. Caching is what keeps that from costing eight messages every time. - **Can we talk?** The TCP handshake takes three messages, not one hello. Each side has to confirm it can both send *and* receive, and both have to agree on the sequence numbers that keep the byte stream in order. - **Who is on the other end?** The TLS handshake gives both sides a shared key without ever transmitting one, then makes the server prove it holds the private key its certificate names. The proof is a signature over this connection's transcript, not the certificate itself — and an on-path attacker who copies a genuine certificate dies on exactly that step. - **How do the files share the connection?** HTTP/1.1 can have one request in flight per socket, so extras queue. HTTP/2 interleaves those files as frames on one TCP connection — the waterfall bars overlap — but a lost TCP segment freezes every stream. HTTP/3 keeps the frames and recovers loss per stream. - **Are we done?** Closing is independent in each direction. One side can be finished sending while the other still has data to deliver, so the close is a pair of FIN/ACK exchanges — and the side that closes last waits in TIME_WAIT so a straggler cannot corrupt the next connection. - **How hard may we send?** Congestion control is the sender probing a pipe it cannot see. Slow Start doubles `cwnd` every RTT until `ssthresh`, Congestion Avoidance adds one MSS per RTT, and a drop halves the window (AIMD). A timeout is the same overload with a worse answer: `cwnd` goes back to 1. - **Which way is dest?** Routing protocols fill a next-hop table. Distance vector exchanges one number with each neighbor and can count to infinity when a link dies; link state floods the topology and every router runs Dijkstra on the same map. Forwarding only reads next-hop — that is why a stale number becomes a loop. The conversations are the same idea wearing different clothes: confirmation that survives a channel where any individual message might vanish — or might be rewritten. The layer map is why each of those conversations can ignore everything above it. Routing is the missing control plane: without a next-hop, none of those packets leave the first box. ## What Each Exchange Costs | Exchange | Count or order | Why that many | |---|---|---| | OSI / TCP-IP wrap (direct) | 3 headers | TCP, IP, Ethernet around one GET — Session and Presentation add none | | DNS lookup (cold cache) | 8 | one round trip per level of the name, plus the stub's question and its answer | | DNS lookup (cached answer) | 2 | the resolver replies from memory; the hierarchy is never contacted | | Open (TCP handshake) | SYN → SYN-ACK → ACK | both sides must confirm send + receive and sync sequence numbers | | Secure it (TLS 1.3, full) | 7 displayed transfers | one public key share each way, a certificate, a signature over the transcript, a Finished from each side, and the first request; EncryptedExtensions is not shown | | Secure it (TLS 1.3, resumed) | 5 displayed transfers | a session ticket replaces the certificate flight, so this model verifies no certificate signature | | Fetch the page (HTTP/1.1, toy 4-file) | 6 RTT | TCP + TLS + HTML + three extras, one at a time | | Fetch the page (HTTP/2) | 4 RTT | same setup, extras share one DATA RTT | | Fetch the page (HTTP/3) | 3 RTT | QUIC is one setup RTT, then the same multiplex | | Close (TCP teardown) | FIN → ACK, then FIN → ACK | each direction closes on its own; TIME_WAIT guards the next connection | | Send (Reno AIMD) | `cwnd` 1 → 2 → 4 → 8, then +1 to 13 | first drop at `C+B = 12`; Reno halves to 6 and stays in CA | | DV converge (A—B—C) | 2 writes + a packet | C's cost walks one neighbor at a time, then next-hop forwarding | | LS converge | 2 LSAs + one Dijkstra | the map fills, then every table appears together | | Contrast (default) | fill + deliver, then stale advert vs one LSA | DV loops A↔B, then LS drops at A; both endings stay | ## A Recommended Learning Order Start with the **OSI / TCP-IP model**, because every lesson after it assumes you can see a packet as nested envelopes. Watch Presentation light up and the onion stay the same size, then watch a router stop at Network, and the rest of this collection stops being a pile of protocols. Then **DNS resolution**, because it happens first on a real page load and because it is the clearest example in networking of a system that works by *not* knowing the answer. Watch the root server hand back a referral instead of an address and the whole design of the namespace falls out of that one packet. Then the **TCP handshake** — the three-way SYN, SYN-ACK, ACK that opens every connection. Its real payoff is the question in its own heading: *why three messages?* Watching each one land answers it, because you see exactly which fact each side still needs confirmed before it can trust the channel. Then the **TLS handshake**, which runs on top of that fresh connection and answers a question TCP never asks: not whether the bytes arrive, but who is receiving them. Its on-path-attacker run is the sharpest thing in this collection — she gets a working key with each side and forwards a real certificate, and is stopped by one signature. Then **HTTP / HTTP/2 / HTTP/3**, because a secured channel still has to carry more than one file: watch the same four-file page queue on HTTP/1.1, overlap on HTTP/2, and keep JS moving when CSS drops on HTTP/3. Then **TCP teardown**, the mirror image: closing is not just "hang up," because each direction must drain its own data first, and the FIN/ACK pairs plus the TIME_WAIT pause show why a clean close is more careful than the open. Before you leave the connection, **Congestion Control** is the data plane's other question: once the handshake has said you may send, how hard? Watch Slow Start double, Congestion Avoidance creep, and one overflow cut the window in half — that sawtooth is AIMD. Finish with **Routing Protocols** if you want the control plane: the same line of three routers under distance vector and link state, and the B—C failure that turns a stale number into a loop. Take them in that order and a page load stops being a black box: the stack names the envelopes, a name resolves, a connection opens, the channel is secured, bytes move without flooding the path, the connection closes — and each hop knew which neighbor to take because a routing protocol filled the table. ## All Networking Visualizations Pick a lesson below to open its interactive player — step the wraps or the packets, and watch the code highlight move in lockstep.