@statewalker/webrun-streams-webrtc 0.1.5 → 0.3.0

package/src/connect-serve.ts

@@ -1,5 +1,6 @@
 import type { Connect, Duplex, Serve } from "@statewalker/webrun-streams";
-import { duplexOverDataChannel } from "./duplex-over-data-channel.js";
+import { duplexOverDataChannel, holdEvents, markAnswering } from "./duplex-over-data-channel.js";
+import { PORT_LABEL_PREFIX } from "./port-mux.js";
 
 export interface WebRtcParams {
   /** Open `RTCPeerConnection`. Signalling, auth, and connection setup are the caller's responsibility. */
@@ -31,6 +32,7 @@ export const connect: Connect<WebRtcParams> = async ({ pc }) => {
     }
     const label = `webrun/${Date.now().toString(36)}/${(counter++).toString(36)}`;
     const dc = pc.createDataChannel(label);
+    holdEvents(dc); // the responder may answer before our stream starts listening
     open.add(dc);
     dc.addEventListener("close", () => open.delete(dc));
     return (async function* () {
@@ -62,13 +64,27 @@ export const connect: Connect<WebRtcParams> = async ({ pc }) => {
 export const serve: Serve<WebRtcParams> = async ({ pc }, handler: Duplex) => {
   const onChannel = (ev: RTCDataChannelEvent): void => {
     const dc = ev.channel;
+    if (dc.label.startsWith(PORT_LABEL_PREFIX)) return; // a port's channel: `webrtcPortMux`'s
+    holdEvents(dc);
+    markAnswering(dc); // the caller closes the channel once the call is over
     let inputFromPeer: PeekInput | null = null;
     void (async () => {
       await waitForOpen(dc);
-      inputFromPeer = peekInput(dc);
-      const out = handler(inputFromPeer.input);
+      const peek = peekInput(dc);
+      inputFromPeer = peek;
+      // Once the handler's output ends (or throws) the handler is done with its input: what the
+      // peer still sends is dropped, so its upload finishes instead of waiting for credit.
+      const handlerOutput = handler(peek.input);
+      const out = (async function* () {
+        try {
+          yield* handlerOutput;
+        } finally {
+          peek.release();
+        }
+      })();
+      // the next chunk is pulled (and its credit returned) only once the handler took this one
       for await (const chunk of duplexOverDataChannel(dc, out)) {
-        inputFromPeer.deliver(chunk);
+        await inputFromPeer.deliver(chunk);
       }
       inputFromPeer.done();
     })().catch(() => {
@@ -137,8 +153,11 @@ function toAsyncIterable(
 
 interface PeekInput {
   input: AsyncGenerator<Uint8Array>;
-  deliver(chunk: Uint8Array): void;
+  /** resolves once the handler has taken the chunk (or stopped reading) */
+  deliver(chunk: Uint8Array): Promise<void>;
   done(): void;
+  /** the handler is finished: pending and later chunks are dropped */
+  release(): void;
 }
 
 /**
@@ -152,7 +171,8 @@ interface PeekInput {
  * the handler's input queue.
  */
 function peekInput(_dc: RTCDataChannel): PeekInput {
-  const slots: Array<{ type: "value"; value: Uint8Array } | { type: "done" }> = [];
+  const slots: Array<{ type: "value"; value: Uint8Array; taken: () => void } | { type: "done" }> =
+    [];
   let wake: (() => void) | null = null;
   let closed = false;
   const input = (async function* () {
@@ -168,23 +188,32 @@ function peekInput(_dc: RTCDataChannel): PeekInput {
         const slot = slots.shift();
         if (!slot) continue;
         if (slot.type === "done") return;
+        slot.taken();
         yield slot.value;
       }
     } finally {
-      closed = true;
+      release();
     }
   })();
+  function release(): void {
+    closed = true;
+    for (const s of slots.splice(0)) if (s.type === "value") s.taken();
+    wake?.();
+  }
   return {
     input,
-    deliver(chunk: Uint8Array): void {
-      if (closed) return;
-      slots.push({ type: "value", value: chunk });
-      wake?.();
+    deliver(chunk: Uint8Array): Promise<void> {
+      if (closed) return Promise.resolve();
+      return new Promise<void>((taken) => {
+        slots.push({ type: "value", value: chunk, taken });
+        wake?.();
+      });
     },
     done(): void {
       if (closed) return;
       slots.push({ type: "done" });
       wake?.();
     },
+    release,
   };
 }

package/src/duplex-over-data-channel.ts

@@ -8,13 +8,71 @@ import {
 const TYPE_DATA = 0x00;
 const TYPE_END = 0x01;
 const TYPE_ERROR = 0x02;
+const TYPE_CREDIT = 0x03;
 
 const DC_MTU = 16 * 1024; // conservative across browsers
+
+/**
+ * Send-side backpressure: a sender waits while the DataChannel holds more than this many bytes
+ * unsent (`bufferedAmount`), until it drains to {@link LOW_WATER_MARK} (`bufferedamountlow`).
+ * Without it a fast producer fills the browser's send queue (Chrome fails `send` past 16 MiB).
+ */
+export const HIGH_WATER_MARK = 1024 * 1024;
+export const LOW_WATER_MARK = 256 * 1024;
+/**
+ * Receive-side backpressure: a sender may have at most this many payload bytes outstanding that
+ * the receiving consumer has not yet pulled. The receiver returns credit (`CREDIT` frames) as its
+ * consumer pulls, half a window at a time. A DataChannel delivers every message as it arrives,
+ * whether or not anyone reads, so without credit a slow reader's queue grows without bound. The
+ * window is larger than the send buffer's high-water mark so a long round trip does not throttle a
+ * fast link: the buffer limit is what bounds the sender's memory.
+ */
+export const RECEIVE_WINDOW = 4 * 1024 * 1024;
 const FRAME_OVERHEAD = 1; // 1-byte type tag
 
 const textEncoder = new TextEncoder();
 const textDecoder = new TextDecoder();
 
+/**
+ * Messages (and a close) that arrive on a channel before its stream starts listening. A generator
+ * runs only on its first `next()`, so without this a peer that answers at once (a handler that
+ * throws, a reply with no input to wait for) can be faster than our listener: its frames are
+ * dropped and the call hangs or reports a bare close.
+ */
+const held = new WeakMap<RTCDataChannel, { events: Event[]; listener: (ev: Event) => void }>();
+
+/**
+ * Channels this side answers (from `datachannel`). A finished call is closed by its caller only,
+ * once it has the responder's `END` or `ERROR`: a responder that closed right after sending them
+ * could lose them in flight (Chrome delivers the close first), turning an error into a bare close.
+ */
+const answering = new WeakSet<RTCDataChannel>();
+export function markAnswering(dc: RTCDataChannel): void {
+  answering.add(dc);
+}
+
+/** starts holding a channel's events until {@link duplexOverDataChannel} takes them */
+export function holdEvents(dc: RTCDataChannel): void {
+  if (held.has(dc)) return;
+  dc.binaryType = "arraybuffer";
+  const events: Event[] = [];
+  const listener = (ev: Event): void => {
+    events.push(ev);
+  };
+  dc.addEventListener("message", listener);
+  dc.addEventListener("close", listener);
+  held.set(dc, { events, listener });
+}
+
+function takeHeld(dc: RTCDataChannel): Event[] {
+  const h = held.get(dc);
+  if (!h) return [];
+  held.delete(dc);
+  dc.removeEventListener("message", h.listener);
+  dc.removeEventListener("close", h.listener);
+  return h.events;
+}
+
 /**
  * Drive one `Duplex` over one `RTCDataChannel`. The DataChannel hosts a tiny
  * in-band framing protocol:
@@ -23,7 +81,9 @@ const textDecoder = new TextDecoder();
  *
  * Types are `DATA` (0x00, body bytes), `END` (0x01, signals half-close — the
  * sender is done emitting; the channel stays open for the other direction),
- * and `ERROR` (0x02, followed by a serialised `Error`).
+ * `ERROR` (0x02, followed by a serialised `Error`) and `CREDIT` (0x03, a
+ * big-endian u32: payload bytes the receiver's consumer has pulled, which the
+ * sender may now send again; see {@link RECEIVE_WINDOW}).
  *
  * `RTCDataChannel` has no native half-close, so `END` is emitted by the
  * sender once its input iterator exhausts; the channel is only physically
@@ -46,8 +106,52 @@ async function* runStream(
   let peerEnded = false;
   let localEnded = false;
 
+  // flow control: what the peer still lets us send, and what our consumer has pulled
+  let credit = RECEIVE_WINDOW;
+  let pulled = 0;
+  let wakeSender: (() => void) | null = null;
+  const nudge = (): void => {
+    const w = wakeSender;
+    wakeSender = null;
+    w?.();
+  };
+  const stalled = (): Promise<void> =>
+    new Promise<void>((r) => {
+      wakeSender = r;
+    });
+  dc.bufferedAmountLowThreshold = LOW_WATER_MARK;
+  const sendRaw = (bytes: Uint8Array): void => {
+    (dc as unknown as { send: (data: Uint8Array) => void }).send(bytes);
+  };
+  /** set when this call is abandoned (cancelled, or the peer failed): the sender stops waiting */
+  let aborted = false;
+  /** waits for credit for `n` bytes and room in the send buffer; false once the call is over */
+  const room = async (n: number): Promise<boolean> => {
+    while (
+      !aborted &&
+      dc.readyState === "open" &&
+      (credit < n || dc.bufferedAmount > HIGH_WATER_MARK)
+    )
+      await stalled();
+    return !aborted && dc.readyState === "open";
+  };
+  /** returns credit for what our consumer pulled, half a window at a time */
+  const consumed = (n: number): void => {
+    pulled += n;
+    if (pulled < RECEIVE_WINDOW / 2 || dc.readyState !== "open") return;
+    const frame = new Uint8Array(5);
+    frame[0] = TYPE_CREDIT;
+    new DataView(frame.buffer).setUint32(1, pulled);
+    pulled = 0;
+    try {
+      sendRaw(frame);
+    } catch {
+      /* closing */
+    }
+  };
+
   const maybeClose = (): void => {
-    if (peerEnded && localEnded) {
+    if (peerEnded && localEnded && !answering.has(dc)) {
       try {
         dc.close();
       } catch {
@@ -74,6 +178,9 @@ async function* runStream(
       peerEnded = true;
       incoming.done();
       maybeClose();
+    } else if (type === TYPE_CREDIT && payload.byteLength >= 4) {
+      credit += new DataView(payload.buffer, payload.byteOffset, 4).getUint32(0);
+      nudge();
     } else if (type === TYPE_ERROR) {
       let err: Error;
       try {
@@ -88,6 +195,7 @@ async function* runStream(
   };
 
   const onClose = (): void => {
+    nudge();
     if (!peerEnded) {
       incoming.done(new TransportClosedError());
       peerEnded = true;
@@ -96,16 +204,33 @@ async function* runStream(
 
   dc.addEventListener("message", onMessage);
   dc.addEventListener("close", onClose);
+  dc.addEventListener("bufferedamountlow", nudge);
+  // what arrived before we listened, in order
+  for (const ev of takeHeld(dc)) {
+    if (ev.type === "message") onMessage(ev as MessageEvent);
+    else onClose();
+  }
+  if (dc.readyState === "closed") onClose();
+  // The listeners stay until both halves are done: after the peer's END our own sending may still
+  // wait for the peer's CREDIT frames (a reply larger than the window, sent after the input ended).
+  let inboundFinished = false;
+  const detach = (): void => {
+    if (!inboundFinished || !localEnded) return;
+    dc.removeEventListener("message", onMessage);
+    dc.removeEventListener("close", onClose);
+    dc.removeEventListener("bufferedamountlow", nudge);
+  };
 
   // Outbound pump runs in parallel with inbound iteration.
   const outbound = (async () => {
     try {
       for await (const chunk of toChunks(DC_MTU - FRAME_OVERHEAD)(input)) {
-        if (dc.readyState !== "open") return;
+        if (!(await room(chunk.byteLength))) return;
+        credit -= chunk.byteLength;
         const framed = new Uint8Array(chunk.byteLength + 1);
         framed[0] = TYPE_DATA;
         framed.set(chunk, 1);
-        (dc as unknown as { send: (data: Uint8Array) => void }).send(framed);
+        sendRaw(framed);
       }
       if (dc.readyState === "open") {
         const end = new Uint8Array([TYPE_END]);
@@ -127,6 +252,7 @@ async function* runStream(
     } finally {
       localEnded = true;
       maybeClose();
+      detach();
     }
   })();
 
@@ -134,13 +260,15 @@ async function* runStream(
   try {
     for await (const chunk of incoming.iterate()) {
       yield chunk;
+      consumed(chunk.byteLength); // pulled: the peer may send that much again
     }
     inboundDrained = true;
   } finally {
-    dc.removeEventListener("message", onMessage);
-    dc.removeEventListener("close", onClose);
-    // Wait for outbound to settle so an early exit doesn't truncate in-flight
-    // sends — but ONLY on an early exit.
+    inboundFinished = true;
+    detach();
+    // On an early exit, stop the outbound pump (it may be waiting for credit
+    // the peer will never send now), close the channel, then let the pump
+    // settle — but ONLY on an early exit.
     //
     // Awaiting it unconditionally deadlocks a responder. `serve` feeds the
     // handler from the values this generator yields and closes the handler's
@@ -154,7 +282,8 @@ async function* runStream(
     // there is nothing of theirs left to truncate; outbound keeps running on
     // its own and `maybeClose` still closes the channel once both halves end.
     if (!inboundDrained) {
-      await outbound.catch(() => {});
+      aborted = true;
+      nudge();
       // The consumer walked away mid-response (`.return()` on the generator),
       // or the peer errored. Either way this call is over while the peer may
       // still be producing, and a DataChannel has no half-close to say so —
@@ -164,11 +293,14 @@ async function* runStream(
       // `onClose` then ends its inbound queue, which closes the handler's
       // input and runs the handler's `finally`. Without this, cancellation is
       // silently local and the handler leaks until the connection drops.
+      // The close comes before waiting on the pump: a pump stalled on credit
+      // would otherwise hold the cancellation back.
       try {
         dc.close();
       } catch {
         /* already closing */
       }
+      await outbound.catch(() => {});
     }
   }
 }

package/src/index.ts

@@ -1,2 +1,13 @@
 export { connect, serve, type WebRtcParams } from "./connect-serve.js";
 export { duplexOverDataChannel } from "./duplex-over-data-channel.js";
+export {
+  type DataChannelPort,
+  DEFAULT_PORT_MAX_FRAME_BYTES,
+  DEFAULT_PORT_MAX_MESSAGE_SIZE,
+  PORT_DRAIN_LOW_WATER,
+  PORT_LABEL_PREFIX,
+  type ValueCodec,
+  type WebRtcPortMux,
+  type WebRtcPortMuxOptions,
+  webrtcPortMux,
+} from "./port-mux.js";

package/src/port-mux.ts

@@ -0,0 +1,288 @@
+/** The label prefix of a port's data channel: channels without it are someone else's. */
+export const PORT_LABEL_PREFIX = "webrun-port/";
+
+/**
+ * The largest message a data channel delivers between any two browsers (Firefox to Chrome cuts
+ * off at 16 KiB). A post past it fails the port with a `RangeError` rather than vanishing.
+ */
+export const DEFAULT_PORT_MAX_FRAME_BYTES = 16 * 1024;
+
+/** What one message on a port may carry before the stream tier chunks: 256 bytes under the frame limit (spec D10). */
+export const DEFAULT_PORT_MAX_MESSAGE_SIZE = DEFAULT_PORT_MAX_FRAME_BYTES - 256;
+
+/** `whenDrained` resolves once the channel's `bufferedAmount` is at most this. */
+export const PORT_DRAIN_LOW_WATER = 256 * 1024;
+
+/**
+ * How a port's messages become bytes and back: any value the stream tier posts. `webrun-msgpack`'s
+ * `{ encode: serialize, decode: deserialize }` fits.
+ */
+export interface ValueCodec {
+  encode(value: unknown): Uint8Array;
+  decode(bytes: Uint8Array): unknown;
+}
+
+type Listener = (event: MessageEvent) => void | Promise<void>;
+
+/** One port: a data channel as a `MessageTarget` of values, with its close signal on it. */
+export interface DataChannelPort {
+  addEventListener(type: "message", listener: Listener): void;
+  removeEventListener(type: "message", listener: Listener): void;
+  /** Sends one message. `RangeError`, failing the port, past `maxFrameBytes`. */
+  postMessage(message: unknown): void;
+  close(): Promise<void>;
+  readonly bufferedAmount: number;
+  whenDrained(): Promise<void>;
+  /** Aborts when the channel closes or errs, the connection fails, or the port is closed here. */
+  readonly closeSignal: AbortSignal;
+}
+
+export interface WebRtcPortMuxOptions {
+  /** A connected `RTCPeerConnection` with SCTP negotiated. Signalling is the caller's. */
+  pc: RTCPeerConnection;
+  /** Encodes each message; both ends must agree. */
+  codec: ValueCodec;
+  /**
+   * Called for each port the peer opens (an inbound channel with the port label). `false` refuses
+   * it. A mux without `onPort` (a caller's) ignores inbound ports, leaving them to the serving
+   * mux on the same connection; of several serving muxes on one connection, the first takes each.
+   */
+  onPort?: (port: DataChannelPort) => boolean | undefined;
+  /** Reported as `maxMessageSize`. Default {@link DEFAULT_PORT_MAX_MESSAGE_SIZE}. */
+  maxMessageSize?: number;
+  /** Default {@link DEFAULT_PORT_MAX_FRAME_BYTES}. */
+  maxFrameBytes?: number;
+}
+
+/** A `webrun-rpc` `PortMux` by shape; this package imports nothing from it. */
+export interface WebRtcPortMux {
+  openPort(meta?: unknown, options?: { signal?: AbortSignal }): Promise<DataChannelPort>;
+  close(reason?: unknown): Promise<void>;
+  readonly maxMessageSize: number;
+}
+
+let counter = 0;
+/** Inbound port channels a serving mux has taken: on one connection, each port is answered once. */
+const claimed = new WeakSet<RTCDataChannel>();
+
+/**
+ * Native MessagePorts over WebRTC: every port is its own `RTCDataChannel` (ordered, reliable),
+ * labelled `webrun-port/…`. Hand it to `webrun-rpc` as a port source and its stream tier runs one
+ * call per port, with its backpressure: a producer stays one confirmed chunk ahead of its
+ * consumer, where this package's `connect` / `serve` allow a 4 MiB window.
+ *
+ * ```ts
+ * const codec = { encode: serialize, decode: deserialize }; // webrun-msgpack
+ * await serve({ mux: overPorts((onPort) => webrtcPortMux({ pc, codec, onPort })) }, handler);
+ * const { call } = await connect({ mux: overPorts(() => webrtcPortMux({ pc, codec })) });
+ * ```
+ *
+ * Messages that arrive before a port's first listener are held for it and delivered after that
+ * tick, to every listener added by then.
+ */
+export async function webrtcPortMux(options: WebRtcPortMuxOptions): Promise<WebRtcPortMux> {
+  const { pc, codec, onPort } = options;
+  const maxFrameBytes = options.maxFrameBytes ?? DEFAULT_PORT_MAX_FRAME_BYTES;
+  const maxMessageSize = options.maxMessageSize ?? DEFAULT_PORT_MAX_MESSAGE_SIZE;
+  const live = new Set<DataChannelPort>();
+  let closed = false;
+
+  const connectionGone = new AbortController();
+  const onConnectionState = () => {
+    if (pc.connectionState === "failed" || pc.connectionState === "closed")
+      connectionGone.abort(
+        new Error(`webrun-streams-webrtc: the connection is ${pc.connectionState}`),
+      );
+  };
+  pc.addEventListener("connectionstatechange", onConnectionState);
+  onConnectionState(); // a connection that has failed already
+
+  const wrap = (dc: RTCDataChannel): DataChannelPort => {
+    dc.binaryType = "arraybuffer";
+    dc.bufferedAmountLowThreshold = PORT_DRAIN_LOW_WATER;
+    const life = new AbortController();
+    const end = (reason: Error) => {
+      if (!life.signal.aborted) life.abort(reason);
+    };
+    const listeners = new Set<Listener>();
+    let held: unknown[] | undefined = [];
+    const deliver = (data: unknown) => {
+      if (closeSignal.aborted) return;
+      const event = new MessageEvent("message", { data });
+      for (const l of [...listeners]) {
+        try {
+          Promise.resolve(l(event)).catch(() => undefined);
+        } catch {}
+      }
+    };
+    const onMessage = (ev: MessageEvent) => {
+      if (closeSignal.aborted) return;
+      let data: unknown;
+      try {
+        const raw = ev.data;
+        data = codec.decode(raw instanceof ArrayBuffer ? new Uint8Array(raw) : (raw as Uint8Array));
+      } catch (err) {
+        end(
+          new Error("webrun-streams-webrtc: a frame the port's codec cannot decode", {
+            cause: err,
+          }),
+        );
+        return;
+      }
+      if (held) held.push(data);
+      else deliver(data);
+    };
+    const onClose = () => end(new Error("webrun-streams-webrtc: the data channel closed"));
+    const onError = (ev: Event) =>
+      end(
+        new Error(
+          `webrun-streams-webrtc: the data channel failed: ${(ev as unknown as { error?: { message?: string } }).error?.message ?? "unknown"}`,
+        ),
+      );
+    dc.addEventListener("message", onMessage);
+    dc.addEventListener("close", onClose);
+    dc.addEventListener("error", onError);
+    if (dc.readyState === "closing" || dc.readyState === "closed") onClose();
+    const closeSignal = AbortSignal.any([life.signal, connectionGone.signal]);
+    const cleanUp = () => {
+      live.delete(port);
+      dc.removeEventListener("message", onMessage);
+      listeners.clear();
+      held = undefined;
+      if (dc.readyState !== "closed") dc.close();
+    };
+    const port: DataChannelPort = {
+      closeSignal,
+      get bufferedAmount() {
+        return dc.bufferedAmount;
+      },
+      whenDrained() {
+        if (closeSignal.aborted || dc.bufferedAmount <= PORT_DRAIN_LOW_WATER)
+          return Promise.resolve();
+        return new Promise<void>((resolve) => {
+          const done = () => {
+            dc.removeEventListener("bufferedamountlow", done);
+            closeSignal.removeEventListener("abort", done);
+            resolve();
+          };
+          dc.addEventListener("bufferedamountlow", done);
+          closeSignal.addEventListener("abort", done);
+        });
+      },
+      postMessage(message) {
+        if (closeSignal.aborted || dc.readyState !== "open") return; // `closeSignal` says so
+        const bytes = codec.encode(message);
+        if (bytes.byteLength > maxFrameBytes) {
+          const err = new RangeError(
+            `webrun-streams-webrtc: a ${bytes.byteLength}-byte message exceeds maxFrameBytes (${maxFrameBytes})`,
+          );
+          end(err);
+          throw err;
+        }
+        try {
+          dc.send(bytes as Uint8Array<ArrayBuffer>);
+        } catch (err) {
+          // a send queue full, or a channel closing meanwhile: the port is broken
+          end(err instanceof Error ? err : new Error(String(err)));
+        }
+      },
+      addEventListener(_type, listener) {
+        listeners.add(listener);
+        if (held) {
+          // delivered after this tick, as a MessagePort dispatches its queue: every listener
+          // added meanwhile (the stream tier adds two in a row) gets the held messages
+          const pending = held;
+          held = undefined;
+          queueMicrotask(() => {
+            for (const data of pending) deliver(data);
+          });
+        }
+      },
+      removeEventListener(_type, listener) {
+        listeners.delete(listener);
+      },
+      async close() {
+        end(new Error("webrun-streams-webrtc: port closed"));
+      },
+    };
+    live.add(port);
+    // a port whose channel or connection was gone already: an abort listener would never fire
+    if (closeSignal.aborted) cleanUp();
+    else closeSignal.addEventListener("abort", cleanUp, { once: true });
+    return port;
+  };
+
+  const onChannel = (ev: RTCDataChannelEvent) => {
+    const dc = ev.channel;
+    if (!dc.label.startsWith(PORT_LABEL_PREFIX)) return; // someone else's channel
+    // A mux that accepts no ports (a caller's) leaves inbound ports to the serving mux on the
+    // same connection; of several serving muxes, the first takes each port.
+    if (!onPort || closed || claimed.has(dc)) return;
+    claimed.add(dc);
+    const port = wrap(dc);
+    let accepted = false;
+    try {
+      accepted = onPort(port) !== false;
+    } catch {
+      accepted = false;
+    }
+    if (!accepted) void port.close();
+  };
+  pc.addEventListener("datachannel", onChannel);
+
+  return {
+    maxMessageSize,
+    async openPort(_meta, opts) {
+      if (closed) throw new Error("webrun-streams-webrtc: port mux closed");
+      const signal = opts?.signal;
+      signal?.throwIfAborted();
+      if (connectionGone.signal.aborted) throw connectionGone.signal.reason;
+      const dc = pc.createDataChannel(`${PORT_LABEL_PREFIX}${(counter++).toString(36)}`, {
+        ordered: true,
+      });
+      const port = wrap(dc);
+      await new Promise<void>((resolve, reject) => {
+        if (port.closeSignal.aborted) return reject(port.closeSignal.reason);
+        if (dc.readyState === "open") return resolve();
+        const settle = () => {
+          dc.removeEventListener("open", done);
+          port.closeSignal.removeEventListener("abort", fail);
+          signal?.removeEventListener("abort", cancel);
+        };
+        const done = () => {
+          settle();
+          resolve();
+        };
+        const fail = () => {
+          settle();
+          reject(port.closeSignal.reason);
+        };
+        const cancel = () => {
+          settle();
+          void port.close();
+          reject(signal?.reason);
+        };
+        dc.addEventListener("open", done);
+        port.closeSignal.addEventListener("abort", fail, { once: true });
+        signal?.addEventListener("abort", cancel, { once: true });
+      });
+      if (signal) {
+        const onAbort = () => void port.close();
+        signal.addEventListener("abort", onAbort, { once: true });
+        port.closeSignal.addEventListener(
+          "abort",
+          () => signal.removeEventListener("abort", onAbort),
+          { once: true },
+        );
+      }
+      return port;
+    },
+    async close() {
+      if (closed) return;
+      closed = true;
+      pc.removeEventListener("datachannel", onChannel);
+      pc.removeEventListener("connectionstatechange", onConnectionState);
+      await Promise.allSettled([...live].map((p) => p.close()));
+    },
+  };
+}