npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fetch-event-stream

v0.1.5

Published

A tiny (736b) utility for Server Sent Event (SSE) streaming via `fetch` and Web Streams API

Downloads

909

Readme

fetch-event-stream CI licenses

A tiny (736b) utility for Server Sent Event (SSE) streaming via fetch and Web Streams API

  • Allows any HTTP method
  • Built with native Web Streams API
  • Works with browser, Node.js, Cloudflare Workers, Deno, and Bun
  • Supports WebWorker or Service Worker environments
  • Accepts AbortController for cancellable streams

Why?

  1. Even though EventSource exists in browsers (and Deno!), it only sends GET requests and does not allow for custom HTTP headers. Most APIs (eg, Anthropic, OpenAI) require POST requests with an Authorization header and a JSON payload.

  2. Web Streams are new, not very well understood, and are sometimes confused with NodeJS Streams. Because of this, many other libraries embed large polyfills or manually reconstruct desired behaviors through non-standard approaches. These polyfills are generally not necessary anymore, but still make large impacts on SDK size; for example, openai is 17kB (gzip).

Install

Available on JSR, npm, and deno.land

$ npm install --save fetch-event-stream

Usage

import { events, stream } from 'fetch-event-stream';
// or
import { events, stream } from 'https://deno.land/x/fetch_event_stream';

API

events(res, signal?)

Convert a Response body containing Server Sent Events (SSE) into an Async Iterator that yields ServerSentEventMessage objects.

Example

// Optional
let abort = new AbortController();

// Manually fetch a Response
let res = await fetch('https://...', {
  method: 'POST',
  signal: abort.signal,
  headers: {
    'api-key': 'token <value>',
    'content-type': 'application/json',
  },
  body: JSON.stringify({
    stream: true, // <- hypothetical
    // ...
  }),
});

if (res.ok) {
  let stream = events(res, abort.signal);
  for await (let event of stream) {
    console.log('<<', event.data);
  }
}

res

Type: Response

The Response to consume. Must contain a body that follows the Server-Sent Event message protocol.

signal

Type: AbortSignal

Optional. Use the AbortController interface to stop iteration. The stream will be destroyed.

stream(input, init?)

Convenience function that will fetch with the given arguments and, if ok, will return the events async iterator.

Note: Accepts the same arguments as fetch but does not return a Response!

Important: Will throw the Response if received non-2xx status code.

Example

// NOTE: throws `Response` if not 2xx status
let events = await stream('https://api.openai.com/...', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer <token>',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    stream: true,
    // ...
  }),
});

for await (let event of events) {
  console.log('<<', JSON.parse(event.data));
}

input

Type: Request | URL | string

Refer to fetch#resource documentation.

init

Type: RequestInit

Refer to fetch#options documentation.

License

MIT © Luke Edwards