// Creating a WebTransport connection
const transport = new WebTransport('https://example.com/game');
 
// Wait for the connection to be ready
await transport.ready;
console.log('WebTransport connected!');
 
// Reliable bidirectional stream
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
const reader = stream.readable.getReader();
 
// Send a reliable message
const encoder = new TextEncoder();
await writer.write(encoder.encode(JSON.stringify({ type: 'chat', text: 'Hello!' })));
 
// Read a reliable message
const { value, done } = await reader.read();
const decoder = new TextDecoder();
console.log(decoder.decode(value));
 
// Unreliable datagram
const dgWriter = transport.datagrams.writable.getWriter();
await dgWriter.write(encoder.encode(JSON.stringify({ x: 100, y: 200 })));
 
// Read datagrams
const dgReader = transport.datagrams.readable.getReader();
const { value: dgValue } = await dgReader.read();
console.log(decoder.decode(dgValue));

import { Http3Server } from '@perbytes/webtransport';
 
const server = new Http3Server({
  host: '0.0.0.0',
  port: 4433,
  secret: 'changeme',
  cert: './cert.pem',
  privKey: './key.pem',
});
 
server.startServer();
 
async function handleSession(session) {
  await session.ready;
 
  // Handle bidirectional streams
  session.on('bidirectionalStream', async (stream) => {
    const reader = stream.readable.getReader();
    const writer = stream.writable.getWriter();
 
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
 
      // Echo back with processing
      const response = processMessage(value);
      await writer.write(response);
    }
  });
 
  // Handle incoming datagrams
  const dgReader = session.datagrams.readable.getReader();
  while (true) {
    const { value, done } = await dgReader.read();
    if (done) break;
    broadcastToRoom(value);
  }
 
  // Send datagrams to client
  const dgWriter = session.datagrams.writable.getWriter();
  setInterval(async () => {
    const gameState = getGameState();
    await dgWriter.write(encode(gameState));
  }, 16); // 60fps
}
 
server.on('session', handleSession);

class GameTransport {
  constructor(url) {
    this.transport = new WebTransport(url);
    this.sequenceNumber = 0;
  }
 
  async connect() {
    await this.transport.ready;
 
    // Reliable channel for critical events
    this.eventStream = await this.transport.createBidirectionalStream();
    this.eventWriter = this.eventStream.writable.getWriter();
    this.eventReader = this.eventStream.readable.getReader();
 
    // Start reading events
    this.readEvents();
 
    // Datagram channel for position updates
    this.dgWriter = this.transport.datagrams.writable.getWriter();
    this.dgReader = this.transport.datagrams.readable.getReader();
 
    // Start reading positions
    this.readPositions();
  }
 
  async sendPosition(x, y, z) {
    const data = new Float32Array([this.sequenceNumber++, x, y, z]);
    await this.dgWriter.write(new Uint8Array(data.buffer));
  }
 
  async sendEvent(event) {
    const encoded = new TextEncoder().encode(JSON.stringify(event) + '\n');
    await this.eventWriter.write(encoded);
  }
 
  async readPositions() {
    while (true) {
      const { value, done } = await this.dgReader.read();
      if (done) break;
      const positions = new Float32Array(value.buffer);
      this.handlePositionUpdate(positions);
    }
  }
 
  async readEvents() {
    const reader = this.eventReader.getReader();
    const decoder = new TextDecoder();
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      const event = JSON.parse(decoder.decode(value));
      this.handleEvent(event);
    }
  }
}

class ResilientTransport {
  constructor(url, options = {}) {
    this.url = url;
    this.maxRetries = options.maxRetries ?? 5;
    this.baseDelay = options.baseDelay ?? 1000;
    this.onMessage = options.onMessage ?? (() => {});
    this.transport = null;
  }
 
  async connect() {
    let attempt = 0;
 
    while (attempt < this.maxRetries) {
      try {
        this.transport = new WebTransport(this.url);
        await this.transport.ready;
 
        this.transport.closed.then(() => {
          console.log('Connection closed, reconnecting...');
          this.connect();
        }).catch((err) => {
          console.error('Connection error:', err);
          this.connect();
        });
 
        this.startReading();
        return;
      } catch (err) {
        attempt++;
        const delay = this.baseDelay * Math.pow(2, attempt - 1);
        console.warn(`Connection failed (attempt ${attempt}), retrying in ${delay}ms`);
        await new Promise(r => setTimeout(r, delay));
      }
    }
 
    throw new Error('Max connection retries exceeded');
  }
 
  async startReading() {
    const reader = this.transport.datagrams.readable.getReader();
    const decoder = new TextDecoder();
 
    try {
      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        this.onMessage(JSON.parse(decoder.decode(value)));
      }
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('Read error:', err);
      }
    }
  }
}

// Client
class LiveDashboard {
  constructor(url) {
    this.url = url;
    this.metrics = new Map();
    this.charts = new Map();
  }
 
  async connect() {
    this.transport = new WebTransport(this.url);
    await this.transport.ready;
 
    // Reliable stream for subscription management
    this.controlStream = await this.transport.createBidirectionalStream();
    this.controlWriter = this.controlStream.writable.getWriter();
 
    // Subscribe to metrics
    await this.subscribe(['cpu', 'memory', 'requests', 'latency']);
 
    // Read datagrams for metric updates
    this.readMetrics();
  }
 
  async subscribe(metrics) {
    const message = JSON.stringify({ type: 'subscribe', metrics }) + '\n';
    await this.controlWriter.write(new TextEncoder().encode(message));
  }
 
  async readMetrics() {
    const reader = this.transport.datagrams.readable.getReader();
    const decoder = new TextDecoder();
 
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
 
      const metric = JSON.parse(decoder.decode(value));
      this.metrics.set(metric.name, metric);
      this.updateChart(metric);
    }
  }
 
  updateChart(metric) {
    const chart = this.charts.get(metric.name);
    if (chart) {
      chart.data.labels.push(new Date().toLocaleTimeString());
      chart.data.datasets[0].data.push(metric.value);
      if (chart.data.labels.length > 60) {
        chart.data.labels.shift();
        chart.data.datasets[0].data.shift();
      }
      chart.update('none');
    }
  }
}

# Server (Python with aioquic)
import asyncio
from webtransport import WebTransportServer
 
class DashboardServer:
    def __init__(self):
        self.subscriptions = {}  # session_id -> set of metrics
        self.latest_metrics = {}
 
    async def handle_session(self, session):
        await session.ready
        session_id = id(session)
 
        # Handle control messages on bidirectional stream
        async for stream in session.bidirectional_streams():
            asyncio.create_task(self.handle_control(session_id, stream))
 
        # Send metric updates via datagrams
        asyncio.create_task(self.send_metrics(session))
 
    async def send_metrics(self, session):
        writer = session.datagrams.writable
        while True:
            metrics = self.collect_metrics()
            for metric in metrics:
                await writer.write(encode(metric))
            await asyncio.sleep(0.5)  # 2 updates per second
 
    def collect_metrics(self):
        return [
            {"name": "cpu", "value": get_cpu_usage()},
            {"name": "memory", "value": get_memory_usage()},
            {"name": "requests", "value": get_request_count()},
            {"name": "latency", "value": get_avg_latency()},
        ]

function isWebTransportSupported() {
  return typeof WebTransport !== 'undefined';
}
 
// Progressive enhancement
async function connectRealtime(url) {
  if (isWebTransportSupported()) {
    return new WebTransportClient(url);
  } else if (typeof WebSocket !== 'undefined') {
    return new WebSocketClient(url);
  } else {
    return new SSEClient(url);
  }
}

class AdaptiveTransport {
  constructor(url) {
    this.url = url;
    this.transport = null;
  }
 
  async connect() {
    if (isWebTransportSupported()) {
      try {
        this.transport = new WebTransportClient(this.url);
        await this.transport.connect();
        console.log('Using WebTransport');
        return;
      } catch (e) {
        console.warn('WebTransport failed, falling back to WebSocket');
      }
    }
 
    this.transport = new WebSocketClient(this.url.replace('https', 'wss'));
    await this.transport.connect();
    console.log('Using WebSocket');
  }
 
  // Unified API regardless of transport
  async send(data) {
    return this.transport.send(data);
  }
 
  onMessage(callback) {
    this.transport.onMessage(callback);
  }
}

# Setting up for contribution
git clone https://github.com/project/repository.git
cd repository
git checkout -b fix/issue-description
 
# Run the project's contribution setup
npm run setup:dev
npm run test  # Ensure tests pass before making changes
 
# Make your changes, then run the full test suite
npm run test:full
npm run lint
npm run build
 
# Submit your contribution
git add -A
git commit -m "fix: description of the fix
 
Closes #1234"
git push origin fix/issue-description