See how the pieces fit together.

import { randomBytes } from 'node:crypto';
import { page, defineApp, BaseHandler, SocketRoute, RedWebSocket, RedWebRequest, LivePageRequestContext } from 'redweb';

// A runnable local demonstration, not a production credential store.
export async function createApp(port = 8181) {
    const token = randomBytes(32).toString('base64url');
    let enabled = true;
    const authenticate = (request: Pick<RedWebRequest, 'headers'>) =>
        enabled && request.headers.authorization === `Bearer ${token}` ? 'alice' : false;

    @page('/', { authorize: context => context.principal === 'alice' })
    class Home {
        render({ principal }: LivePageRequestContext) { return <main><h1>Private workspace</h1><p>{principal}</p></main>; }
    }

    class Join extends BaseHandler {
        constructor() { super('join'); }
        async onMessage(socket: RedWebSocket) {
            socket.sendJson({ joined: await socket.enterRoom!('team'), principal: socket.context!.principal });
        }
    }
    class Team extends SocketRoute {
        constructor() {
            super({ path: '/team', handlers: [Join], allowDuplicateConnections: true, logger: null,
                admission: { authenticate },
                rooms: { authorize: (context, roomId) => enabled && context.principal === 'alice' && roomId === 'team' },
            });
        }
    }

    const app = defineApp({ pages: [Home], sockets: [Team], authenticate, port, bind: '127.0.0.1', logger: null });
    await app.run();
    const team = app.sockets!.routes.find(route => route instanceof Team)!;
    return {
        app, team, token,
        async revoke() {
            enabled = false; // Invalidate credentials and future permissions first.
            team.clients.forEach(socket => team.rooms!.leaveAll(socket));
            await app.revoke('alice');
        },
        shutdown: () => app.shutdown(),
    };
}

if (require.main === module) {
    createApp().then(demo => {
        console.log('Local demo: http://127.0.0.1:8181/ and ws://127.0.0.1:8181/team');
        console.log(`Authorization: Bearer ${demo.token}`); // One fresh local-demo credential per run.
    });
}

import { BaseHandler, defineApp, METHODS, SocketRoute, type RedWebSocket } from 'redweb';

export class Hello extends BaseHandler {
    constructor() { super('hello'); }

    onMessage(socket: RedWebSocket) {
        socket.sendJson({ type: 'hello', message: 'Hello from the server!' });
    }
}

export class ChatRoute extends SocketRoute {
    constructor() {
        super({ path: '/chat', handlers: [Hello], allowDuplicateConnections: true });
    }
}

export const app = defineApp({
    sockets: [ChatRoute],
    port: Number(process.env.PORT ?? 8181),
    bind: '127.0.0.1',
    publicPaths: [],
    httpServices: [{ serviceName: '/health', method: METHODS.GET, function: (_req, res) => res.json({ ok: true }) }],
});

if (require.main === module) void app.run().catch(error => { console.error(error); process.exitCode = 1; });

import { action, defineApp, page, state } from 'redweb';

@page('/', { css: 'app.css', shared: true })
export class CounterPage {
    @state() count = 0;

    @action()
    increment() { this.count += 1; }

    render() {
        return (
            <main class="home">
                <h1>A counter owned by the server</h1>
                <p>Open this page in two tabs. Either button updates both.</p>
                <button rw-click="increment">
                    Count {this.count}
                </button>
            </main>
        );
    }
}

export const app = defineApp({ pages: [CounterPage], port: Number(process.env.PORT ?? 8181), templateRoot: __dirname });

if (require.main === module) void app.run().catch(error => { console.error(error); process.exitCode = 1; });

import { defineSite } from 'redweb'

const site = defineSite({
  origin: 'https://example.com',
  css: 'site.css',
  head: { description: 'Product documentation', image: '/og.png' },
  cache: { maxAge: 300 },
  layout: content => <body><nav>Product</nav><main>{content}</main></body>,
})

@site.page('/docs', { head: { title: 'Documentation' } })
class DocsPage {
  render() { return <h1>Documentation</h1> }
}

await site.export(DocsPage, {
  outDir: 'dist',
  publicDir: 'public',
})

import { BaseHandler, SocketRoute } from 'redweb'

class ChatHandler extends BaseHandler {
  constructor() { super('chat') }

  onMessage(socket, message) {
    socket.broadcast({ type: 'chat', text: message.text })
  }
}

class SnapshotHandler extends BaseHandler {
  constructor() { super('snapshot') }
  onMessage() {}
  acceptsBinary(_socket, buffer) { return buffer.length > 0 }
  onBinaryMessage(socket, buffer) {
    socket.sendJson({ type: 'snapshot:received', bytes: buffer.length })
  }
}

class RealtimeRoute extends SocketRoute {
  constructor() {
    super({
      path: '/realtime',
      handlers: [ChatHandler, SnapshotHandler],
      websocketOptions: { maxPayload: 64 * 1024 },
    })
  }
}

class MatchRoute extends SocketRoute {
  constructor() {
    super({
      path: '/match',
      handlers: [InputHandler],
      admission: {
        origins: ['https://game.example'],
        timeoutMs: 3000,
        authenticate: (request, { signal }) =>
          verifyPlayer(request, signal),
      },
      maxPendingUpgrades: 64,
      limits: {
        maxConnections: 5000,
        maxBufferedBytes: 1024 * 1024,
        maxPendingMessages: 64,
        messageRate: { capacity: 60, refillPerSecond: 30 },
      },
      orderedMessages: true,
      heartbeat: { intervalMs: 30000, timeoutMs: 10000 },
      websocketOptions: { maxPayload: 64 * 1024 },
    })
  }
}

import { randomUUID } from 'node:crypto';
import type { RedWebSocket } from 'redweb';
import { match } from './contract';

class Player {
    readonly session = randomUUID();
    x = 0;
    y = 0;
    constructor(readonly name: string) {}
}

function requireUnjoined(socket: RedWebSocket) {
    if (socket.context?.session) throw new Error('Already joined.');
}

function currentPlayer(socket: RedWebSocket) {
    const session = socket.context?.session as { data?: unknown } | null | undefined;
    if (!(session?.data instanceof Player)) throw new Error('Join or resume first.');
    return session.data;
}

export const Join = match.handler('join', (socket, { name }, message) => {
    requireUnjoined(socket);
    const player = new Player(name);
    if (!socket.createSession?.(player.session, player)) throw new Error('Session capacity reached.');
    return match.send(socket, 'state', player, { requestId: message.requestId });
});

export const Move = match.handler('move', (socket, { x, y }, message) => {
    const player = currentPlayer(socket);
    player.x = x;
    player.y = y;
    return match.send(socket, 'state', player, { requestId: message.requestId });
});

export const Resume = match.handler('resume', (socket, { session }, message) => {
    requireUnjoined(socket);
    if (!(socket.resumeSession?.(session) instanceof Player)) throw new Error('Session expired or unknown.');
    return match.send(socket, 'state', currentPlayer(socket), { requestId: message.requestId });
});

import { FixedStepService, SocketRoute } from 'redweb'

class Simulation extends FixedStepService {
  constructor() {
    super('simulation', 50, 3, 250)
  }

  async onTick(stepMs, tick) {
    await authoritativeGame.update(stepMs, tick)
  }

  onLagDropped(milliseconds) {
    console.warn('Simulation lag discarded', { milliseconds })
  }
}

class SimulationRoute extends SocketRoute {
  constructor() {
    super({
      path: '/simulation',
      handlers: [InputHandler],
      services: [Simulation],
    })
  }
}

import { SocketRoute } from 'redweb'

class ProtocolRoute extends SocketRoute {
  constructor() {
    super({
      path: '/match',
      handlers: [MoveHandler],
      protocol: {
        versions: ['2', '1'],
        binary: {
          maxBytes: 64 * 1024,
          encode: (state) => codec.encode(state),
          decode: (bytes) => codec.decode(bytes),
        },
      },
    })
  }
}

// Browser entry (bundle separately from server code)
import { ProtocolClient, ERROR_CODES } from 'redweb/client'
const socket = new WebSocket(
  'wss://game.example/match?redwebVersion=2'
)
const client = new ProtocolClient(socket, '2')

socket.addEventListener('message', (event) => {
  try {
    const message = client.parse(event)
    if (message.error?.code === ERROR_CODES.RATE_LIMITED) backOff()
  } catch (error) {
    console.error('Invalid server envelope', error)
  }
})

socket.addEventListener('open', () => {
  client.send('move', { x: 4, y: 2 }, { sequence: 17 })
})

import { SocketRoute } from 'redweb'

class DistributedMatchRoute extends SocketRoute {
  constructor() {
    super({
      path: '/match',
      handlers: [JoinMatchHandler, MoveMatchHandler, ResumeMatchHandler],
      rooms: true,
      distribution: {
        adapter: brokerAdapter,
        channel: 'matches',
        nodeId: process.env.INSTANCE_ID,
        required: true,
        maxEventBytes: 64 * 1024,
        maxConcurrentPublishes: 32,
        onEvent(event, route) {
          route.rooms.broadcast(event.payload.roomId, {
            type: event.type,
            payload: event.payload,
          })
        },
      },
    })
  }
}

// From a connected socket:
await socket.publishEvent('match:update', update)

import { defineApp, METHODS } from 'redweb'
import { MatchRoute } from './MatchRoute.js'

const app = defineApp({
  sockets: [MatchRoute],
  httpServices: [{
    serviceName: '/ready',
    method: METHODS.GET,
    function: (_request, response) => response.sendStatus(app.sockets?.isReady() ? 200 : 503),
  }],
})
await app.run()

// A deployment controller can invoke this; normal signals use app shutdown.
async function retireNode() {
  app.sockets?.beginDrain()
  await stopExternalPlacement()
  await app.shutdown()
}