Use a managed realtime provider (recommended inside Lovable) or add a small WebSocket server that you export to GitHub and deploy externally. Below are two ready-to-paste Lovable chat prompts: one that implements Supabase Realtime (no external server or terminal required — only add Secrets in Lovable), and one that scaffolds a self-hosted Node WebSocket server (requires GitHub export and external deploy — terminal outside Lovable).

Supabase Realtime (quick — fully inside Lovable)

Paste this into Lovable’s chat. It will add dependency, create the client module, create a simple realtime component, and tell you to add Secrets via Lovable Secrets UI (SUPABASE_URL and SUPABASE_ANON\_KEY). Lovable will edit files and you can Preview/Publish.

• Prompt to paste into Lovable:

// In Chat Mode please make these file changes to add Supabase Realtime functionality

// 1) update package.json to add dependency
// update package.json: add "@supabase/supabase-js": "^2.0.0" under dependencies

// 2) create src/lib/supabaseClient.ts
// create file with this content:
import { createClient } from '@supabase/supabase-js';

// // Read these values from Lovable Secrets (set SUPABASE_URL and SUPABASE_ANON_KEY)
const supabaseUrl = process.env.SUPABASE_URL!;
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// 3) create src/components/RealtimeChat.tsx
// create file with this content:
import React, { useEffect, useState } from 'react';
import { supabase } from '../lib/supabaseClient';

export default function RealtimeChat() {
  const [messages, setMessages] = useState<any[]>([]);
  const [text, setText] = useState('');

  useEffect(() => {
    // // initial fetch from a "messages" table (expects table exists in Supabase)
    supabase.from('messages').select('*').order('created_at', { ascending: false }).then(({ data }) => {
      if (data) setMessages(data);
    });

    // // realtime subscription
    const subscription = supabase
      .channel('public:messages')
      .on(
        'postgres_changes',
        { event: '*', schema: 'public', table: 'messages' },
        (payload) => {
          // // payload.new contains the new row
          setMessages((m) => [payload.new, ...m]);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(subscription);
    };
  }, []);

  const send = async () => {
    if (!text) return;
    await supabase.from('messages').insert([{ text }]);
    setText('');
  };

  return (
    <div>
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Message" />
        <button onClick={send}>Send</button>
      </div>
      <ul>
        {messages.map((m: any) => (
          <li key={m.id}>{m.text}</li>
        ))}
      </ul>
    </div>
  );
}

// 4) update a page to include the component
// update src/pages/index.tsx (or src/App.tsx) to import and render <RealtimeChat />

// 5) Instructions for you (not code):
// - Open Lovable Secrets UI and add SUPABASE_URL and SUPABASE_ANON_KEY.
// - Ensure your Supabase project has a "messages" table with columns id (uuid/serial), text (text), created_at (timestamp with default now()).
// - Use Preview to test UI. No terminal needed.

Self-hosted WebSocket server (advanced — requires GitHub export + external deploy)

Paste this into Lovable’s chat to scaffold server files. Lovable will create the server code and package.json script, but you must export/sync to GitHub and deploy the server (outside Lovable) to a Node host (e.g., Heroku, Render, Fly, or your VPS). I’ll mark external steps clearly.

• Prompt to paste into Lovable:

// In Chat Mode please add these files to scaffold a WebSocket server that clients can connect to

// 1) update package.json to add dependency "ws": "^8.0.0" and a "start:ws" script "node server/ws-server.js"

// 2) create server/ws-server.js
// create file with this content:
const WebSocket = require('ws');
const port = process.env.WS_PORT || 8080;

// // simple in-memory pub/sub
const wss = new WebSocket.Server({ port });

wss.on('connection', function connection(ws) {
  // // send welcome
  ws.send(JSON.stringify({ type: 'welcome', time: Date.now() }));

  ws.on('message', function incoming(message) {
    // // broadcast to all connected clients
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

console.log('WebSocket server running on port', port);

// 3) create a client hook src/hooks/useWebSocket.ts
// create file with this content:
import { useEffect, useRef, useState } from 'react';

export default function useWebSocket(url: string) {
  const wsRef = useRef<WebSocket | null>(null);
  const [messages, setMessages] = useState<any[]>([]);

  useEffect(() => {
    wsRef.current = new WebSocket(url);

    wsRef.current.onmessage = (e) => {
      setMessages((m) => [JSON.parse(e.data), ...m]);
    };

    return () => {
      wsRef.current?.close();
    };
  }, [url]);

  const send = (data: any) => {
    wsRef.current?.send(JSON.stringify(data));
  };

  return { messages, send };
}

// 4) update a client page to use the hook and connect to ws://YOUR_WS_HOST:PORT

// 5) Important external steps (outside Lovable):
// - Export/sync project to GitHub from Lovable.
// - From your machine or CI deploy server/ws-server.js to a Node host (terminal required).
// - Set WS_HOST for your frontend (in Lovable Secrets or environment) to point to the deployed server.
// - Then Preview the frontend in Lovable; it will connect to the external WebSocket endpoint.

Real-time features in Lovable work best when you treat the realtime transport as a pluggable layer, build robust client-side state with optimistic updates + ack/rollback, centralize queueing/retries/backoff, keep secrets and token minting in Lovable Cloud (Secrets) or server endpoints, and always validate in Lovable Preview before publishing. Implement these patterns using Lovable-native edits, Preview, Secrets UI, and GitHub export only when you need server tooling outside Lovable.

Best-practice checklist (paste these prompts into Lovable to implement)

• Transport abstraction (create pluggable adapter) — Paste this prompt to create src/lib/realtime/transport.ts and a simple in-memory stub adapter so real transports can be swapped without changing app logic.

Make these file changes:

Create file src/lib/realtime/transport.ts with this content:
// Export a Transport interface and a simple stub adapter that other providers implement.
// Do NOT implement provider-specific protocols here — keep it abstract.
export type Message = { id: string; type: string; payload: any; seq?: number; clientId?: string };

export type Transport = {
  connect: () => Promise<void>;
  disconnect: () => Promise<void>;
  send: (msg: Message) => Promise<void>;
  onMessage: (handler: (msg: Message) => void) => void;
  onOpen: (handler: () => void) => void;
  onClose: (handler: () => void) => void;
};

// Example in-memory stub for local testing
export const createStubTransport = (): Transport => {
  const handlers: { msg?: (m: Message) => void; open?: () => void; close?: () => void } = {};
  return {
    connect: async () => { handlers.open?.(); },
    disconnect: async () => { handlers.close?.(); },
    send: async (msg) => { setTimeout(() => handlers.msg?.(msg), 50); },
    onMessage: (h) => { handlers.msg = h; },
    onOpen: (h) => { handlers.open = h; },
    onClose: (h) => { handlers.close = h; },
  };
};

• Centralized client hook with optimistic updates and durable queue — Paste to add src/hooks/useRealtime.ts. This manages local queue, optimistic UI, ACK handling, retry/backoff, and idempotent message IDs.

Make these file changes:

Create file src/hooks/useRealtime.ts with this content:
// Hook manages connection state, optimistic updates, message queue, ack/rollback, and backoff.
// It uses the Transport defined in src/lib/realtime/transport.ts
import { useEffect, useRef, useState } from 'react';
import { createStubTransport, Message, Transport } from '../lib/realtime/transport';

// Simple uuid helper to avoid external deps
const uuid = () => Math.random().toString(36).slice(2) + Date.now().toString(36);

export const useRealtime = (makeTransport: () => Transport = createStubTransport) => {
  const transportRef = useRef<Transport | null>(null);
  const [connected, setConnected] = useState(false);
  const pendingRef = useRef<Record<string, {msg: Message; attempts: number}>>({});

  const connect = async () => {
    const t = makeTransport();
    transportRef.current = t;
    t.onOpen(() => setConnected(true));
    t.onClose(() => setConnected(false));
    t.onMessage(handleIncoming);
    await t.connect();
  };

  const disconnect = async () => {
    await transportRef.current?.disconnect();
    transportRef.current = null;
  };

  const handleIncoming = (msg: Message) => {
    // Example: handle ACK messages by id to remove pending queue and resolve optimistic UI
    if (msg.type === 'ack' && msg.payload?.id) {
      delete pendingRef.current[msg.payload.id];
      // Trigger state updates in your app via event emitters or callbacks (left for implementation)
    }
    // Other incoming types handled by app consumers
  };

  const send = async (type: string, payload: any) => {
    const id = uuid();
    const msg: Message = { id, type, payload, clientId: id };
    // Add to pending for retries & optimistic UI
    pendingRef.current[id] = { msg, attempts: 0 };
    attemptSend(id);
    return id;
  };

  const attemptSend = async (id: string) => {
    const entry = pendingRef.current[id];
    if (!entry || !transportRef.current) return;
    try {
      entry.attempts += 1;
      await transportRef.current.send(entry.msg);
      // wait for ACK; if not received, schedule retry
      scheduleRetry(id, Math.min(30000, 500 * 2 ** entry.attempts));
    } catch (e) {
      scheduleRetry(id, 1000);
    }
  };

  const scheduleRetry = (id: string, delay: number) => {
    setTimeout(() => {
      if (pendingRef.current[id]) attemptSend(id);
    }, delay);
  };

  useEffect(() => {
    connect();
    return () => { disconnect(); };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return { connected, send, transport: transportRef.current };
};

• Secrets & token minting (Lovable Cloud Secrets) — Use Lovable Cloud Secrets UI to store realtime provider keys and create a server endpoint that mints short-lived tokens. Add a note for Lovable Preview testing.

Paste this message into Lovable to create a dev note file:

Create file LOVABLE_NOTES/SECRETS_AND_TOKENS.md with this content:
// Use Lovable Cloud > Secrets to add keys like REALTIME_PROVIDER_KEY and REALTIME_SIGNING_SECRET.
// In your server-side endpoints (serverless functions or API routes), read those secrets and mint short-lived tokens.
// For Preview testing, toggle a dev-secret (e.g., USE_STUB_TRANSPORT=true) to use the stub transport instead of real provider.

• Testing & Preview workflow — Always validate optimistic UI and failure paths in Lovable Preview. Add logging toggles and use the stub transport for deterministic tests.

Paste this to create a small logging utility:

Create file src/lib/realtime/logging.ts with this content:
// Lightweight toggleable logging for Preview vs Production
export const log = (...args: any[]) => {
  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
    // eslint-disable-next-line no-console
    console.log('[realtime]', ...args);
  }
};

Short practical rules (do these as you build)

• Design for idempotency — attach client-generated ids to messages and let the server de-duplicate.
• Use optimistic UI and safe rollback — show pending state and revert if no ack or explicit error.
• Backoff & limit retries — exponential backoff with caps, mark messages failed after N attempts.
• Keep secrets in Lovable Secrets — never hard-code keys in repo; create server endpoints to issue short-lived tokens.
• Preview everything in Lovable — test failure, reconnection, and ordering using the stub transport and logs before Publish.
• When server control is required — use GitHub sync/export to add serverless functions or provider SDKs (outside Lovable: terminal required). Label those changes in your repo so Lovable Preview knows where to point.