To help you get started, we've collected the most common ways that eventsource is being used within popular public projects.

brigadecore / brigade / v2 / brigadier-polyfill / src / jobs.ts View on Github

eventSource.addEventListener("error", (e: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
        if (e.status) { // If the error has an HTTP status code associated with it...
          eventSource.close()
          reject(new Error(`Received ${e.status} from the API server when attempting to open job "${this.name}" log stream`))
        } else if (eventSource.readyState == EventSource.CONNECTING) {
          // We lost the connection and we're reconnecting... nbd
          this.logger.debug("Reconnecting to log stream")
        } else if (eventSource.readyState == EventSource.CLOSED) {
          // We disconnected for some unknown reason... and presumably exhausted
          // attempts to reconnect
          reject(new Error(`Encountered unknown error receiving job "${this.name}" log stream`))
        }
      })
      eventSource.addEventListener("done", () => {

View more ways to use eventsource

EventSource

This library is a pure JavaScript implementation of the EventSource client. The API aims to be W3C compatible.

You can use it with Node.js or as a browser polyfill for browsers that don't have native EventSource support.

Install

npm install eventsource

Example

npm install
node ./example/sse-server.js
node ./example/sse-client.js    # Node.js client
open https://localhost:8080      # Browser client - both native and polyfill
curl https://localhost:8080/sse  # Enjoy the simplicity of SSE

Browser Polyfill

Just add example/eventsource-polyfill.js file to your web page:

<script src=/eventsource-polyfill.js></script>

Now you will have two global constructors:

window.EventSourcePolyfill
window.EventSource // Unchanged if browser has defined it. Otherwise, same as window.EventSourcePolyfill

If you're using webpack or browserify you can of course build your own. (The example/eventsource-polyfill.js is built with webpack).

Extensions to the W3C API

Setting HTTP request headers

You can define custom HTTP headers for the initial HTTP request. This can be useful for e.g. sending cookies or to specify an initial Last-Event-ID value.

HTTP headers are defined by assigning a headers attribute to the optional eventSourceInitDict argument:

var eventSourceInitDict = {headers: {'Cookie': 'test=test'}};
var es = new EventSource(url, eventSourceInitDict);

Allow unauthorized HTTPS requests

By default, https requests that cannot be authorized will cause the connection to fail and an exception to be emitted. You can override this behaviour, along with other https options:

var eventSourceInitDict = {https: {rejectUnauthorized: false}};
var es = new EventSource(url, eventSourceInitDict);

Note that for Node.js < v0.10.x this option has no effect - unauthorized HTTPS requests are always allowed.

HTTP status code on error events

Unauthorized and redirect error status codes (for example 401, 403, 301, 307) are available in the status property in the error event.

es.onerror = function (err) {
  if (err) {
    if (err.status === 401 || err.status === 403) {
      console.log('not authorized');
    }
  }
};

HTTP/HTTPS proxy

You can define a proxy option for the HTTP request to be used. This is typically useful if you are behind a corporate firewall.

var es = new EventSource(url, {proxy: 'https://your.proxy.com'});

License

MIT-licensed. See LICENSE