Server Events Example

import { endpoint, get, prefix, VovkIteration } from 'vovk';
import { z } from 'zod';
 
const eventNames = [
  'foo',
  'bar',
  'baz',
  'qux',
  'quux',
  'corge',
  'grault',
  'garply',
  'waldo',
  'fred',
  'plugh',
  'xyzzy',
  'thud',
] as const;
 
@prefix('events')
export default class EventsController {
  @get()
  static streamEvents = endpoint({
    validateEachIteration: true,
    iteration: z.object({
      event: z.enum(eventNames).meta({ description: 'Event name' }),
      payload: z.object({
        timestamp: z.iso.datetime().meta({ description: 'Event timestamp' }),
        message: z.string().meta({ description: 'Event message' }),
      }),
    }),
    async *handle() {
      for (const event of eventNames) {
        yield {
          event,
          payload: {
            timestamp: new Date().toISOString(),
            message: `This is a message for event "${event}"`,
          },
        } satisfies VovkIteration<typeof EventsController.streamEvents>;
        await new Promise((resolve) => setTimeout(resolve, 2000));
      }
    },
  });
}

'use client';
import { useCallback, useRef, useState } from 'react';
import { EventsRPC } from '@/client';
import type { VovkIteration, VovkOutput } from 'vovk';
 
export default function EventsExample() {
  const [eventPayload, setEventPayload] = useState<VovkIteration<typeof EventsRPC.streamEvents>['payload'] | null>(null);
  const [eventName, setEventName] = useState<VovkIteration<typeof EventsRPC.streamEvents>['event'] | null>(null);
  const abortRef = useRef<() => void | null>(null);
 
  const streamEvents = useCallback(async () => {
    abortRef.current?.();
      while (true) {
        using events = await EventsRPC.streamEvents();
        abortRef.current = events.abortWithoutError;
        for await (const { event, payload } of events) {
          setEventName(event);
          setEventPayload(payload);
        }
      }
  }, []);
 
  return (
    <div>
      <button onClick={streamEvents}>Stream Events</button>
      <br /><br />
      <h2>Latest Event:</h2>
      <pre>{eventName || 'No event yet'}</pre>
      <br />
      <h2>Event Payload:</h2>
      <pre>{eventPayload ? JSON.stringify(eventPayload, null, 2) : 'No payload yet'}</pre>
    </div>
  );
}