EventSource : EventTarget

constructor

EventSource allows listening to events pushed from the server. Similar to a WebSocket except it is a one way connection.

Spec

Constructors

new EventSource(url : String, [init : Object]) : EventSource

init : {

withCredentials :

Boolean

}

Creates an EventSource.

Example:

<form>
  <label>message: <textarea name="message">my message</textarea></label><br>
  <label>event: <input name="event" type="checkbox"></label><br>
  <input type="submit">
</form>

<script>
  const guid = [...crypto.getRandomValues(new Uint32Array(4))].map(x => x.toString(16).padStart(2, '0')).join('');
  const echoUrl = `https://sse-echo.javascripture.com/?g=${guid}`;

  const eventSource = new EventSource(echoUrl);
  eventSource.onmessage = (event) => {
    console.log('message data:', event.data);
  }

  eventSource.addEventListener('my-event', (event) => {
    console.log('event data:', event.data);
  });

  // Send a message to the server that it echos back to eventSource
  const form = document.querySelector('form');
  form.onsubmit = async (e) => {
    e.preventDefault();
    let url = echoUrl;
    if (form.event.checked) {
      url += '&event=my-event';
    }
    await fetch(url , { method: 'POST', body: form.message.value });
  };
</script>

Run

Results:

Spec

Instance Properties

readyState : Number readonly

The current connection state. Will be one of CONNECTING, OPEN, or CLOSED.

Example:

const guid = [...crypto.getRandomValues(new Uint32Array(4))].map(x => x.toString(16).padStart(2, '0')).join('');
const echoUrl = `https://sse-echo.javascripture.com/?g=${guid}`;

const names = new Map([
  [EventSource.CONNECTING, 'CONNECTING'],
  [EventSource.OPEN, 'OPEN'],
  [EventSource.CLOSED, 'CLOSED']]);

const eventSource = new EventSource(echoUrl);
console.log('after construction. readyState:', names.get(eventSource.readyState));

eventSource.onopen = (event) => {
  console.log('in onopen. readyState:', names.get(eventSource.readyState));

  eventSource.close();
  console.log('after close. readyState:', names.get(eventSource.readyState));
};

Run

Results:

Spec

url : String readonly

The url this is connected to.

Example:

const guid = [...crypto.getRandomValues(new Uint32Array(4))].map(x => x.toString(16).padStart(2, '0')).join('');
const echoUrl = `https://sse-echo.javascripture.com/?g=${guid}`;
const eventSource = new EventSource(echoUrl);
console.log(eventSource.url);

Run