Realtime & AsyncAPI#

Litestar supports WebSockets, event broadcasting via ChannelsPlugin, and Server-Sent Events (SSE).

litestar-vite connects these server-side endpoints with frontend code:

  • AsyncAPI Export: Exports the registered AsyncAPIPlugin document as asyncapi.json.

  • TypeScript Channel Contracts: Generates channel definitions (channels.ts) for frontend clients.

  • Client Streams & Composables: Connects to channels and event feeds with typed React hooks, Vue composables, and Svelte stores.

WebSockets

Build full-duplex interactive WebSocket endpoints using @websocket and websocket_listener.

WebSockets
Channels & Fan-Out

Publish and subscribe across channels using ChannelsPlugin with Memory, Redis, or Postgres backends.

Channels & Fan-Out
Server-Sent Events

Stream lightweight unidirectional event feeds to web clients using ServerSentEvent handlers.

Server-Sent Events
AsyncAPI & TypeGen

Export AsyncAPI specifications and emit type-safe TypeScript channel interfaces.

AsyncAPI Export & Type Generation
Browser Helpers

Bind generated channel contracts to browser streams and link onward to the full helper reference.

Browser Helpers
Framework Composables

Integrate real-time streams with React (hooks), Vue 3 (composables), and Svelte 5 (stores).

UI Frameworks

Mental Model#

Realtime in litestar-vite operates on a unified contract pipeline:

        flowchart LR
    subgraph Backend ["Litestar Backend"]
        WS["@websocket / listener"]
        CH["ChannelsPlugin"]
        SSE["ServerSentEvent"]
    end

    subgraph Pipeline ["Contract Pipeline"]
        GEN["Registered AsyncAPIPlugin"]
        SCHEMA["asyncapi.json"]
        TS["channels.ts"]
    end

    subgraph Frontend ["Frontend Consumer"]
        HELPERS["createChannelsStream"]
        UI["React / Vue / Svelte"]
    end

    WS --> GEN
    CH --> GEN
    SSE --> GEN
    GEN --> SCHEMA
    SCHEMA --> TS
    TS --> HELPERS
    HELPERS --> UI

  1. Schema ownership: Configure realtime contracts in litestar-asyncapi and register its AsyncAPIPlugin.

  2. Schema Emission: With channel generation enabled, litestar assets build (or generate-types) exports that plugin’s document as asyncapi.json. Without the plugin, no realtime document is exported.

  3. TypeScript Generation: TypeGen emits strongly typed TypeScript contracts (channels.ts) directly into your frontend sources.

  4. Client Consumption: Browser helpers and UI framework composables bind directly to the emitted types.