Client Fetch-Based SSE Listener

fetch-event-source.ts

class FetchEventSource {
  private url: string
  private headers: HeadersInit
  private controller: AbortController
  private reader?: ReadableStreamDefaultReader<Uint8Array>

  constructor(url: string, headers: HeadersInit) {
    this.url = url
    this.headers = headers
    this.controller = new AbortController()
  }

  async connect(): Promise<void> {
    try {
      const response = await fetch(this.url, {
        signal: this.controller.signal,
        headers: {
          ...this.headers,
          Accept: 'text/event-stream'
        }
      })

      if (response.body === null) {
        throw new Error('Response body is null')
      }

      this.reader = response.body.getReader()
    } catch (error: unknown) {
      const message = error instanceof Error ? error.message : 'Error establishing connection'
      throw new Error(message)
    }
  }

  async listen(callback: (data: string) => void): Promise<void> {
    if (!this.reader) {
      throw new Error('Reader not initialized')
    }

    try {
      // eslint-disable-next-line no-constant-condition
      while (true) {
        const { value, done } = await this.reader.read()
        if (done) {
          break
        }

        const text = new TextDecoder().decode(value)
        callback(text)
      }
    } catch (error: unknown) {
      const message =
        error instanceof Error && error.name !== 'AbortError'
          ? error.message
          : 'Error reading the stream'
      throw new Error(message)
    }
  }

  close(): void {
    this.controller.abort()
    this.reader?.cancel()
  }
}