⚡ Realtime Streams

app.get("/realtime/:id", (_req, _info, params) => {
  const shortCode = params?.pathname.groups["id"];
  
  // Setup KV watch reader
  const shortLinkKey = ["shortlinks", shortCode];
  const shortLinkStream = kv.watch([shortLinkKey]).getReader();

  // Create stream response body
  const body = new ReadableStream({
    async start(controller) {
      // Fetch initial data if needed
      // const initialData = await getShortLink(shortCode);
      // controller.enqueue(new TextEncoder().encode(`data: ${JSON.stringify({ clickCount: initialData.clickCount })}\n\n`));

      while (true) {
        const { done } = await stream.read();
        if (done) {
          return;
        }
        const shortLink = await getShortLink(shortCode);
        const clickAnalytics = shortLink.clickCount > 0 &&
          await getClickEvent(shortCode, shortLink.clickCount);

        controller.enqueue(
          new TextEncoder().encode(
            `data: ${
              JSON.stringify({
                clickCount: shortLink.clickCount,
                clickAnalytics,
              })
            }\n\n`,
          ),
        );
        console.log("Stream updated");
      }
    },
    cancel() {
      stream.cancel();
    },
  });

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

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('realtime script loaded')
    const pathParts = window.location.pathname.split('/');
    const shortCode = pathParts[pathParts.length - 1]; 
    const eventSource = new EventSource('/realtime/' + shortCode);

    eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log(data)
        document.getElementById('clickCount').innerText = data.clickCount
    };

    eventSource.onerror = (error) => {
        console.error('EventSource failed:', error);
        eventSource.close();
    };
});