Adding real-time functionality to V0 apps using WebSockets

// No real-time updates — data only loads on page refresh

// app/api/events/route.ts — Server-Sent Events endpoint
export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    start(controller) {
      const interval = setInterval(() => {
        const data = JSON.stringify({
          time: new Date().toISOString(),
          message: "Live update",
        });
        controller.enqueue(
          encoder.encode(`data: ${data}\n\n`)
        );
      }, 3000);
      // Clean up on close
      setTimeout(() => {
        clearInterval(interval);
        controller.close();
      }, 30000); // 30s max for Vercel
    },
  });
  return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

// No real-time — polling every 5 seconds
setInterval(() => {
  fetch("/api/messages").then(r => r.json()).then(setMessages);
}, 5000);

// app/api/messages/route.ts — trigger Pusher event
import Pusher from "pusher";
import { NextResponse } from "next/server";
const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.NEXT_PUBLIC_PUSHER_KEY!,
  secret: process.env.PUSHER_SECRET!,
  cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER!,
  useTLS: true,
});
export async function POST(request: Request) {
  const body = await request.json();
  await pusher.trigger("chat", "new-message", body);
  return NextResponse.json({ success: true });
}

// Missing cleanup — leaks subscriptions on unmount
"use client";
import Pusher from "pusher-js";
export function ChatMessages() {
  useEffect(() => {
    const pusher = new Pusher(key, { cluster });
    const channel = pusher.subscribe("chat");
    channel.bind("new-message", (data) => {
      setMessages(prev => [...prev, data]);
    });
    // No cleanup!
  }, []);

"use client";
import { useEffect, useState } from "react";
import Pusher from "pusher-js";
interface Message {
  id: string;
  text: string;
  user: string;
  timestamp: string;
}
export function ChatMessages() {
  const [messages, setMessages] = useState<Message[]>([]);
  useEffect(() => {
    const pusher = new Pusher(
      process.env.NEXT_PUBLIC_PUSHER_KEY!,
      { cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER! }
    );
    const channel = pusher.subscribe("chat");
    channel.bind("new-message", (data: Message) => {
      setMessages(prev => [...prev, data]);
    });
    return () => {
      channel.unbind_all();
      channel.unsubscribe();
      pusher.disconnect();
    };
  }, []);
  return (
    <div className="space-y-2">
      {messages.map((msg) => (
        <p key={msg.id} className="text-sm">
          <strong>{msg.user}:</strong> {msg.text}
        </p>
      ))}
    </div>
  );
}

// Static data — only loads once
const { data } = await supabase.from("messages").select("*");

"use client";
import { useEffect, useState } from "react";
import { createBrowserClient } from "@supabase/ssr";
export function LiveMessages() {
  const [messages, setMessages] = useState<any[]>([]);
  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
  useEffect(() => {
    // Initial load
    supabase.from("messages").select("*").order("created_at")
      .then(({ data }) => data && setMessages(data));
    // Real-time subscription
    const channel = supabase
      .channel("messages")
      .on("postgres_changes",
        { event: "INSERT", schema: "public", table: "messages" },
        (payload) => setMessages(prev => [...prev, payload.new])
      )
      .subscribe();
    return () => { supabase.removeChannel(channel); };
  }, []);
  return (
    <div className="space-y-2">
      {messages.map((msg) => (
        <p key={msg.id}>{msg.text}</p>
      ))}
    </div>
  );
}