Блог

У меня есть сервер узла Koa, с которого я пытаюсь отправить события, отправленные сервером. Однако я вижу только EventSource.onerror обратный вызов, вызываемый при поступлении событий.

Вот моя реализация SSE:

 import * as Koa from 'koa';
import { PassThrough } from 'stream';
import { KoaServerSentEvent } from './koaServerSentEvent';

export class KoaServerSentStream {
  private readonly eventStream: PassThrough;
  private readonly retryInterval: number;
  private eventCount: number;
  readonly request: Koa.Request;
  readonly response: Koa.Response;

  constructor( req: Koa.Request, resp: Koa.Response ) {
    this.retryInterval = 10000;
    this.eventCount = 0;
    this.eventStream = new PassThrough();
    this.request = req;
    this.response = resp;
    this.configureLifecycle();
  }

  static buildStreamContext( ctx: Koa.Context ): KoaServerSentStream {
    const stream: KoaServerSentStream = new KoaServerSentStream( ctx.request, ctx.response );
    // order matters here: https://github.com/koajs/koa/issues/1120
    ctx.body = stream;
    ctx.type = 'text/event-stream';
    ///////////////////////////////////////////////////////////////
    return stream;
  }

  private configureLifecycle(): void {
    this.request.req.on( 'close', this.response.res.end );
    this.request.req.on( 'finish', this.response.res.end );
    this.request.req.on( 'error', this.response.res.end );
    this.eventStream.write( `retry: ${this.retryInterval}` );
  }

  queueEvent( event: KoaServerSentEvent ): void {
    const formattedData: string = ( typeof event.data === 'string' ) ? event.data : JSON.stringify( event.data );
    const payload: string = `id: ${this.eventCount}nevent: ${event.name}ndata: ${formattedData}`;
    this.eventStream.write( payload );
    this.eventCount  ;
  }

  publish(): void {
    this.eventStream.write( 'nn' );
  }
}
  

POC RouteHandler:

 export async function handler( ctx: Koa.Context ): Promise<void> {
  const stream: KoaServerSentStream = KoaServerSentStream.buildStreamContext( ctx );
  setInterval( () => {
    stream.queueEvent( {
      name: 'greetings',
      data: {
        french: 'bonjour tout le monde',
        english: 'hello world',
        german: 'hallo welt',
        spanish: 'hola mundo'
      }
    } );
    stream.publish();
  }, 2000 );
}
  

Когда я пытаюсь использовать эти события в браузере с помощью:

             const events = new EventSource( 'http://localhost:3000/v1/helloWorld' );
            events.onmessage = ( e ) => {
              console.log( 'We received an event!', e );
            };

            events.onerror = ( error ) => {
              console.error( 'An error occurred:', error );
              console.info( 'ReadyState', events.readyState.valueOf() );
              // events.close();
            };

            events.onopen = ( opened ) => {
              console.info( 'Opened:', opened );
              console.info( 'ReadyState', events.readyState.valueOf() );
            };
  

Результатом этого является

Открыто: событие {isTrusted: true, тип: «open», цель: EventSource, currentTarget: EventSource, eventPhase: 2, …}

Состояние готовности 1

Произошла ошибка: Событие {isTrusted: true, тип: «ошибка», цель: EventSource, currentTarget: EventSource, eventPhase: 2, …}

Состояние готовности 0

Открыто: событие {isTrusted: true, тип: «open», цель: EventSource, currentTarget: EventSource, eventPhase: 2, …}

Состояние готовности 1

Произошла ошибка: Событие {isTrusted: true, тип: «ошибка», цель: EventSource, currentTarget: EventSource, eventPhase: 2, …}

Состояние готовности 0

…

Я смог успешно начать обработку событий, правильно назначив объект stream объекту Koa ctx.body .

 static buildStreamContext( ctx: Koa.Context ): KoaServerSentStream {
    // ...
    ctx.body = stream;
    ctx.type = 'text/event-stream';
    // ...
  }
  

должно было:

 static buildStreamContext( ctx: Koa.Context ): KoaServerSentStream {
    // ...
    ctx.body = stream.eventStream;
    ctx.type = 'text/event-stream';
    // ...
  }
  

Надеюсь, это может кому-то помочь!