Real-Time Features

// app/api/notifications/stream/route.ts
import { NextRequest } from "next/server"

export async function GET(request: NextRequest) {
  const stream = new ReadableStream({
    start(controller) {
      // Send a message every 3 seconds
      const interval = setInterval(() => {
        const data = JSON.stringify({
          id: crypto.randomUUID(),
          message: `Update at ${new Date().toISOString()}`,
          type: Math.random() > 0.7 ? "alert" : "info",
        })
        controller.enqueue(new TextEncoder().encode(`data: ${data}\n\n`))
      }, 3000)

      request.signal.addEventListener("abort", () => {
        clearInterval(interval)
        controller.close()
      })
    },
  })

  return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  })
}

"use client"
import { useEffect, useState } from "react"

export function NotificationFeed() {
  const [notifications, setNotifications] = useState<string[]>([])

  useEffect(() => {
    const eventSource = new EventSource("/api/notifications/stream")

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data)
      setNotifications((prev) => [data.message, ...prev].slice(0, 50))
    }

    eventSource.onerror = () => {
      console.error("SSE connection error — retrying...")
      // EventSource auto-reconnects
    }

    return () => eventSource.close()
  }, [])

  return (
    <ul className="space-y-2">
      {notifications.map((msg, i) => (
        <li key={i} className="rounded bg-gray-100 p-2 text-sm">
          {msg}
        </li>
      ))}
    </ul>
  )
}

// server.ts — custom Next.js server
import { createServer } from "http"
import { parse } from "url"
import next from "next"
import { Server } from "socket.io"

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = createServer((req, res) => {
    const parsedUrl = parse(req.url!, true)
    handle(req, res, parsedUrl)
  })

  const io = new Server(server)

  io.on("connection", (socket) => {
    console.log("Client connected:", socket.id)

    socket.on("message", (data) => {
      // Broadcast to all connected clients
      io.emit("message", { userId: socket.id, text: data })
    })

    socket.on("disconnect", () => {
      console.log("Client disconnected:", socket.id)
    })
  })

  server.listen(3000)
})

"use client"
import { useEffect, useState } from "react"
import { io, Socket } from "socket.io-client"

export function ChatRoom() {
  const [socket, setSocket] = useState<Socket | null>(null)
  const [messages, setMessages] = useState<string[]>([])

  useEffect(() => {
    const s = io()
    setSocket(s)
    s.on("message", (data: { userId: string; text: string }) => {
      setMessages((prev) => [...prev, `${data.userId}: ${data.text}`])
    })
    return () => {
      s.close()
    }
  }, [])

  function send(text: string) {
    socket?.emit("message", text)
  }

  return (
    <div>
      <MessageList messages={messages} />
      <MessageInput onSend={send} />
    </div>
  )
}

"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"

interface Todo {
  id: string
  text: string
  completed: boolean
}

export function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
  const [todos, setTodos] = useState(initialTodos)
  const router = useRouter()

  async function toggle(todo: Todo) {
    // Optimistic update — flip immediately
    setTodos((prev) =>
      prev.map((t) =>
        t.id === todo.id ? { ...t, completed: !t.completed } : t
      )
    )

    try {
      const res = await fetch(`/api/todos/${todo.id}`, {
        method: "PATCH",
        body: JSON.stringify({ completed: !todo.completed }),
      })
      if (!res.ok) throw new Error("Failed to update")
      router.refresh() // Server re-render to confirm state
    } catch {
      // Rollback on failure
      setTodos((prev) =>
        prev.map((t) =>
          t.id === todo.id ? { ...t, completed: todo.completed } : t
        )
      )
    }
  }

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <label className={todo.completed ? "line-through" : ""}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggle(todo)}
            />
            {todo.text}
          </label>
        </li>
      ))}
    </ul>
  )
}