JSONLines Streaming with Response Object

import type { JSONLinesResponse } from 'vovk';
 
export type Token = { message: string };
 
export default class JSONLinesResponseService {
  static async streamTokens(resp: JSONLinesResponse<Token>) {
    const tokens: Token[] = [
      { message: 'Hello,' },
      { message: ' World' },
      { message: ' from' },
      { message: ' JSONLines' },
      { message: ' Endpoint' },
      { message: ' that' },
      { message: ' uses' },
      { message: ' JSONLines' },
      { message: 'Response' },
      { message: ' instance' },
      { message: '!' },
    ];
 
    for (const token of tokens) {
      resp.send(token);
      await new Promise((resolve) => setTimeout(resolve, 300));
    }
 
    await resp.close();
  }
}
 

import { prefix, get, operation, JSONLinesResponse } from 'vovk';
import StreamService, { type Token } from './JSONLinesResponseService.ts';
 
@prefix('jsonlines-response-object')
export default class JSONLinesResponseController {
  @operation({
    summary: 'Stream tokens using Response object',
    description: 'Stream tokens to the client using Response object',
  })
  @get('tokens', { cors: true }) // CORS for OPTIONS Next.js route handler
  static async streamTokens(req: Request) {
    const response = new JSONLinesResponse<Token>(req, {
      headers: {
        // CORS for GET
        'Access-Control-Allow-Origin': 'https://vovk.dev',
        'Access-Control-Allow-Methods': 'GET',
        'Access-Control-Allow-Headers': 'Authorization',
      },
    });
 
    void StreamService.streamTokens(response);
 
    return response;
  }
}
 

'use client';
import { useState } from 'react';
import { JSONLinesResponseRPC } from '@/client';
import type { VovkYieldType } from 'vovk';
 
export default function StreamExample() {
  const [tokens, setTokens] = useState<VovkYieldType<typeof JSONLinesResponseRPC.streamTokens>[]>([]);
 
  return (
    <>
      <button
        onClick={async () => {
          setTokens([]);
          using stream = await JSONLinesResponseRPC.streamTokens();
          for await (const token of stream) {
            setTokens((tokens) => [...tokens, token]);
          }
        }}
      >
        Get JSON Lines response
      </button>
      <div>
        {tokens.map(({ message }, i) => (
          <span key={i}>{message}</span>
        ))}
      </div>
    </>
  );
}