#Astro

// src/lib/live.ts (trimmed: the example builds more on this client)
// Each island is a separate React root, but they all import this module, so they share one
// client (and one socket). It imports `react-websocket/core`, which has no React dependency, so
// the page's plain <script> uses it too. On the server, where Astro renders the islands, nothing
// connects.
import { createWebSocket, createWebSocketState } from 'react-websocket/core';
import { serverMessage, type ClientMessage, type ServerMessage } from './protocol';

// Called before every connection attempt, including reconnects, so each one gets a fresh token.
async function url() {
  const response = await fetch('/api/token');
  if (!response.ok) throw new Error(`Token request failed: HTTP ${response.status}`);
  const { token } = (await response.json()) as { token: string };
  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
  return `${protocol}//${location.host}/ws?token=${encodeURIComponent(token)}`;
}

export const live = createWebSocket<ServerMessage, ClientMessage>(url, {
  json: true,
  // Every message is validated; one that doesn't match is reported to `error` listeners.
  schema: serverMessage,
  // The demo server answers 'heartbeat' with 'heartbeat'. Three quiet seconds after a ping
  // count as a dead connection.
  heartbeat: { interval: 4000, timeout: 3000, message: 'heartbeat', pong: 'heartbeat' },
  // 4003 means the server refused this client: retrying won't help.
  reconnect: { maxDelay: 8000, shouldReconnect: close => close.code !== 4003 },
  queue: { limit: 50 },
  logger: console.debug
});

/**
 * The name the server gave this connection; a new connection gets a new name. Kept here rather
 * than in an island: islands hydrate in no fixed order, so the `welcome` message may arrive
 * before the one that shows it has mounted.
 */
export const me = createWebSocketState(live, {
  initialState: null as string | null,
  reduce: (state, message) => (message.type === 'welcome' ? message.name : state)
});

// astro.config.ts
import node from '@astrojs/node';
import react from '@astrojs/react';
import { defineConfig } from 'astro/config';
import { handleUpgrade } from './demo-server.ts';

export default defineConfig({
  integrations: [
    react(),
    {
      // Astro endpoints can't accept WebSocket upgrades, so in development this attaches the
      // demo's WebSocket server to Astro's dev server. Upgrades for other paths (Vite's hot
      // reload) are left alone. In production, server.ts does the same job.
      name: 'demo-websocket',
      hooks: {
        'astro:server:setup': ({ server }) => {
          server.httpServer?.on('upgrade', handleUpgrade);
        }
      }
    }
  ],
  // Pages are prerendered to static HTML; only /api/token runs on demand. Middleware mode lets
  // server.ts serve the build from its own HTTP server, next to the WebSocket endpoint.
  adapter: node({ mode: 'middleware' })
});

// demo-server.ts (trimmed)
const wss = new WebSocketServer({ noServer: true });

/**
 * Accept a WebSocket upgrade on `/ws` if its token is valid. Returns `false` for other paths,
 * without touching the socket, so another handler can take them.
 */
export function handleUpgrade(request: IncomingMessage, socket: Duplex, head: Buffer): boolean {
  const url = new URL(request.url ?? '/', 'http://localhost');
  if (url.pathname !== '/ws') return false;
  if (!verifyToken(url.searchParams.get('token'))) {
    socket.end('HTTP/1.1 401 Unauthorized\r\nConnection: close\r\n\r\n');
    return true;
  }
  wss.handleUpgrade(request, socket, head, connected);
  return true;
}

// server.ts
// Production: one process serves the built Astro site and the demo's WebSocket endpoint on the
// same port. Astro endpoints can't accept WebSocket upgrades, so this mounts the Node adapter's
// middleware in Express (https://docs.astro.build/en/guides/integrations-guide/node/) and
// handles upgrades itself. In development, astro.config.ts attaches the same handler to
// Astro's dev server.
import express, { type RequestHandler } from 'express';
import { handleUpgrade } from './demo-server.ts';

const port = Number(process.env.PORT ?? 4321);

// Written by `npm run build`.
const entry = new URL('./dist/server/entry.mjs', import.meta.url);
const { handler: astro } = (await import(entry.href)) as { handler: RequestHandler };

const app = express();
app.use(express.static(`${import.meta.dirname}/dist/client`)); // prerendered pages and assets
app.use(astro); // on-demand routes: /api/token

const server = app.listen(port, () => {
  console.log(`> react-websocket Astro demo on http://localhost:${port}`);
});
server.on('upgrade', (request, socket, head) => {
  if (!handleUpgrade(request, socket, head)) socket.destroy();
});

// src/pages/api/token.ts
import type { APIRoute } from 'astro';
import { issueToken } from '../../lib/token';

// Rendered on demand: every request gets a new token. The rest of the site is prerendered.
export const prerender = false;

// The WebSocket URL function fetches a fresh token here before every connection attempt.
// A real app would check the user's session first.
export const GET: APIRoute = () =>
  Response.json({ token: issueToken() }, { headers: { 'Cache-Control': 'no-store' } });