Skip to content

Instantly share code, notes, and snippets.

@2color
Last active May 17, 2024 10:51
Show Gist options
  • Save 2color/56d79480ab65fe658e06189f7b6ae873 to your computer and use it in GitHub Desktop.
Save 2color/56d79480ab65fe658e06189f7b6ae873 to your computer and use it in GitHub Desktop.

Sequence diagram for universal connectivity app

sequenceDiagram
    participant a as Browser1
    participant cr as Bootstrapper & Relay
    note over cr: With CircuitRelayV2 subscribed to GossipSub discovery, and messages topic
    participant b as Browser2
    participant stun as STUN Server


    b->>cr: Establish Connection and create circuit relay reservation
    note over cr,b: WebSockets, WebTransport, or WebRTC-direct
    a->>cr: Establish Connection and create circuit relay reservation
    note over cr,a: WebSockets, WebTransport, or WebRTC-direct


    b-->>a: Publishes message with Browser 2 multiaddress to the discovery topic
    a-->>b: Publishes message with Browser 1 multiaddress to the discovery topic
    note over a,b: GossipSub messages relayed by bootstrapper (no direct connection yet between browsers)


    a->>b: Establishes relayed connection to Browser 2 using discovered webrtc multiaddr
    a-->>a: Creates RTCPeerConnection with STUN server config, init DataChannel and SDP offer
    a->>b: Initiates libp2p /webrtc-signaling/0.0.1 protocol stream over relayed conection and sends SDP
    b-->>b: Creates RTCPeerConnection with STUN server config, sets Browser1's SDP offer, and creates SDP answer
    b->>a: Sends SDP answer over signaling stream
    a-->>a: Set SDP answer with RTCPeerConnection.setRemoteDescription
    a->>+stun: What's my public IP and port
    stun->>-a: Browser 1 observed ip and port: 8.8.8.1:63333
    b->>+stun: What's my public IP and port
    stun->>-b: Browser 2 observed ip and port: 6.6.6.1:52222
    b->a: exchange ICE candidates over signalling stream pass to RTCPeerConnection.addIceCandidate()
    b->a: Establish direct connection
    
Loading

Sequence diagram of the libp2p WebRTC Spec

Spec

sequenceDiagram
    participant a as Browser1
    participant cr as CircuitRelayV2Peer
    participant b as Browser2
    participant stun as STUN Server
    b->>cr: Establish Relayed Connection (WebTransport, WebRTC)
    b->>a: Shares its own relayed webrtc multiaddress (out of band)
    a->>b: Establishes a relayed connection to Browser 2
    a-->>a: Creates RTCPeerConnection with STUN server config, init DataChannel and SDP offer
    a->>b: Initiates libp2p /webrtc-signaling/0.0.1 protocol stream over relayed conection and sends SDP
    b-->>b: Creates RTCPeerConnection with STUN server config, sets Browser1's SDP offer, and creates SDP answer
    b->>a: Sends SDP answer over signaling stream
    a-->>a: Set SDP answer with RTCPeerConnection.setRemoteDescription
    a->>+stun: What's my public IP and port
    stun->>-a: "Browser 1 observed ip and port: 8.8.8.1:63333"
    b->>+stun: What's my public IP and port
    stun->>-b: "Browser 2 observed ip and port: 6.6.6.1:52222"
    b->a: exchange ICE candidates with RTCPeerConnection.addIceCandidate()
    b->a: Establish direct connection
Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment