FluxyChat

Cookbook

Transport fallback (WebSocket → SSE → polling)

`useChat` and `createFluxyRoomSession` automatically degrade transport when the room WebSocket cannot stay connected.

Transport fallback (WebSocket → SSE → polling)

useChat and createFluxyRoomSession automatically degrade transport when the room WebSocket cannot stay connected.

Order

  1. WebSocketFluxyChatRoomConnection with exponential backoff reconnect (default 6 attempts in useChat).
  2. SSEGET /rooms/:id/stream when reconnect attempts are exhausted and a member JWT is present.
  3. Polling — REST GET /api/messages every 4s if SSE is unavailable.

When WebSocket reconnects, SSE/polling stops and live delivery resumes on the socket.

UI

Use connectionState from the SDK (not raw connectionStatus alone):

const { connectionState } = useChat({ roomId });

if (connectionState.status === "reconnecting" && connectionState.nextRetryAt) {
  const seconds = Math.max(
    0,
    Math.ceil((new Date(connectionState.nextRetryAt).getTime() - Date.now()) / 1000),
  );
  return <span>Reconnecting in {seconds}s…</span>;
}

if (connectionState.transport === "sse") {
  return <span>Live updates via SSE</span>;
}

if (connectionState.status === "degraded-http" || connectionState.transport === "polling") {
  return <span>Live socket blocked. Updating over HTTP.</span>;
}

Corporate proxies and some browser extensions block WebSockets. CORS must allow your app origin on the Worker. Custom domains need the same CORS list as 127.0.0.1. There is no screenshot in this page; the status string above is what you show in the product.

Vanilla (no React)

import { createFluxyRoomSession } from "@fluxy-chat/sdk";

const { store, stop } = createFluxyRoomSession({
  roomId: "my-room",
  client,
});

store.subscribe((state) => {
  console.log(state.connectionState);
});

// later: stop();

On this page