Wire the Browsers Together

Last lesson ended with a seat and a signaling URL — where to reach the other browsers. But knowing where to reach them is not the same as reaching them: you can have two tabs, each with a room code, and still send zero bytes between them. This lesson opens the channel.

There is no scene change this time. All the mesh code lives in P2PNetwork.transport.ts, reachable only through the MeshConnection contract from lesson 2. The Net entity and its System come later; everything here is the transport behind the System's injectable factory.

The capability check before the live code

Before it does anything, the transport asks one question. RTCPeerConnection and fetch exist in a browser tab and not in a Node test runner, so the live code runs only after a capability check passes.

From the transport:

export function browserHasWebRTC(): boolean {
  return (
    typeof window !== 'undefined' &&
    typeof RTCPeerConnection !== 'undefined' &&
    typeof fetch !== 'undefined'
  );
}

Sometimes this returns false — during SSR, or in a vitest worker — and then the System never opens a real mesh; it injects a fake one instead, which is lesson 6's whole subject. That is why the WebRTC code lives in its own file: it needs the DOM, so it stays out of the renderer-agnostic System.