/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [countdown, setCountdown] = useState(""); const [isRunning, setIsRunning] = useState(false); const [eventCount, setEventCount] = useState(0); const textareaRef = useRef(null); const startCountdown = () => { setIsRunning(true); setCountdown(""); const eventSource = new EventSource("https://rozek-gdi_sseservice.web.val.run/"); setEventCount(0); eventSource.onmessage = (event) => { setCountdown((prev) => prev + event.data + "\n"); setEventCount((count) => count + 1); }; eventSource.onerror = () => { eventSource.close(); setIsRunning(false); if (eventCount.current < 10) { setCountdown((prev) => prev + "Error: Connection closed prematurely.\n"); } }; }; useEffect(() => { if (textareaRef.current) { textareaRef.current.scrollTop = textareaRef.current.scrollHeight; } }, [countdown]); return (

Server-Sent Events (SSE)

Events received: {eventCount}

    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SSE Countdown</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
    `,
    {
      headers: {
        "content-type": "text/html",
      },
    }
  );
}

const css = `
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    background-color: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  h1 {
    margin-top: 0;
    color: #333;
  }
  button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 5px;
  }
  button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
    font-family: monospace;
  }
`;</article></body></html>

GDI_SSE