Watch the wire: real-time web protocols
Five ways to move data in real time. SSE and WebSockets keep a connection open between a browser and a server. SIP and WebRTC set up calls, and RTP carries the audio and video once a call is up. Press the buttons, watch what travels, and click messages to read them in full.
Browser
Server
Nothing is connected yet. Press Connect to create an EventSource and open the stream.
Browser
Server
Network
On the wire
Raw HTTP and event-stream text
What your JavaScript sees
EventSource events and handlers
Browser
Server
Nothing is connected yet. Press Connect to start the WebSocket handshake.
Browser
Server
Network
On the wire
HTTP handshake, then WebSocket frames
What your JavaScript sees
WebSocket events and handlers
Two browsers want a video call. Step through how they find each other, agree on media, get through their home routers, and start sending encrypted audio and video directly to each other.
Steps
Network
Pick this before the ICE step. The strict option forces the TURN relay fallback.
During the call
Message inspector
No message selected
What the app code does
JavaScript running in each browser
Sender
Receiver
Press Start to send audio as a stream of RTP packets. Then turn on packet loss and jitter, and watch how the receiver copes.
Receiver's jitter buffer
Packets wait here, sorted by sequence number, until it's their turn to play.
What the listener hears
One square per 20 ms of audio, oldest first.
Sender
Network
Receiver
Packet inspector
Shows the latest packet. Click a packet in the jitter buffer to inspect it.
No packets yet.
Events
Loss, reordering, concealment and feedback
Alice wants to call Bob. Both phones use the same SIP proxy at example.com. Start by registering Bob's phone, or try calling first to see what happens when the proxy doesn't know where Bob is.
Alice's phone
Bob's phone
Message inspector
No message selected
What each side does
Phones and proxy, behind the scenes
This is a simulation for learning. Timings are slowed down a lot (real audio sends 50 RTP packets per second), frame and message details are simplified, and real WebSocket frames are binary but are shown here as readable descriptions. Addresses are from the ranges reserved for documentation.