Add EventSource and Streams Standard examples

[guest271314]

Using EventSource https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface we can stream data to the client browser using named events. Streams https://streams.spec.whatwg.org/#rs-class provides a means to send a potentially indefinite stream response to the client.

For example, for and EventSource stream using a ServiceWorker as the server we can do something like

self.addEventListener('fetch', async(e)=>{
  try {
    // Keep ServiceWorker active during stream
    if (e.request.url.includes('stream')) {
      var {readable, writable} = new TransformStream();
      var writer = writable.getWriter();

      e.respondWith(new Response(readable.pipeThrough(new TextEncoderStream()),{
        cache: 'no-store',
        keepalive: true,
        status: 200,
        headers: {
          'Connection': 'keep-alive',
          'Content-Type': 'text/event-stream',
          'Cache-Control': 'no-store',
          'Access-Control-Allow-Credentials': true,
          'Access-Control-Allow-Origin': '*',
        },
      }));
      while (true) {
        crypto.getRandomValues(arr);
        await writer.write(`event: stream\n` + // `retry: 100\n` +
        `id: ${lastEventId}\n` + `data: ${JSON.stringify([...arr])}\n\n`);
        ++lastEventId;
        await new Promise((r)=>setTimeout(r, 100));
        gc();
      }
      writer.abort('aborted');
    }
  } catch (error) {
    console.log(error);
  }
}
);

client side in the browser

class EventSourceStream {
  constructor(url, {withCredentials=false}={}) {
    ({readable: this.readable, writable: this.writable} = new TransformStream());
    this.writer = this.writable.getWriter();
    this.eventSource = new EventSource(url,{
      withCredentials
    });
    this.eventSource.addEventListener(url, (e)=>{
      this.writer.write(new Uint8Array(JSON.parse(e.data)));
    }
    );
    this.eventSource.addEventListener('open', (e)=>{
      console.log(e);
    }
    );
    this.eventSource.addEventListener('error', (e)=>{
      console.log(e);
    }
    );
  }
  close() {
    this.eventSource.close();
    this.writer.close();
  }
}

var es = new EventSourceStream('stream');

var abortable = new AbortController;
var {signal} = abortable;

es.readable.pipeTo(new WritableStream({
  write(v) {
    console.log(v.length);
  },
  close() {
    console.log('close');
  },
  abort(reason) {
    console.log(reason);
  }
}), {signal}).catch(console.warn);

// Later
// abortable.abort('Done streaming');

and to serve a ReadableStream as a response

self.addEventListener('fetch', async(e)=>{
  if (e.request.url.includes('stream')) {
    e.respondWith(
      new Response(new ReadableStream({
        async pull(c) {
          while (true) {
            crypto.getRandomValues(arr);
            c.enqueue(new Uint8Array(arr));
          }
        }
      }), {
        duplex: 'half',
       keepalive: true,
      headers: {
        'Content-Type': 'application/octet-stream',
        'Cross-Origin-Opener-Policy': 'unsafe-none',
        'Cross-Origin-Embedder-Policy': 'unsafe-none',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Private-Network': 'true',
        'Access-Control-Allow-Headers': 'Access-Control-Request-Private-Network',
        'Access-Control-Allow-Methods': 'OPTIONS,POST,GET,HEAD',
      }})
    );
  }
});

client side using fetch

(await fetch('./stream', {signal})).body.pipeTo(
  new WritableStream({
    write(v) {
      console.log(v);
    }, 
   close() {
     console.log('closed');
   }
  })
).catch(console.error);

// Later
// abortable.abort('Done streaming');

[scaprile]

https://mongoose.ws/documentation/tutorials/webui-push/#pushing-live-data-on-http-connections
but instead of mg_http_printf_chunk() use mg_printf():

something like this on match URI

mg_printf(c, "HTTP/1.1 200 OK\r\nContent-Type: text/event-stream\r\n\r\n");

and like this on broadcast message

mg_printf(c, "data: %s\r\n\r\n", yourdatahere);

The frontend is all yours

[guest271314]

On Chromium 114 to handle preflight OPTIONS request (see https://developer.chrome.com/blog/private-network-access-preflight/, https://wicg.github.io/local-network-access/) we can do something like

      char headers[] = 
        "HTTP/1.1 200 OK\r\n"
        "Access-Control-Allow-Origin: *\r\n"
        "Access-Control-Allow-Headers: Cache-Control\r\n"
        "Access-Control-Allow-Private-Network: true\r\n"
        "Content-Type: text/event-stream\r\n\r\n";
      mg_printf(c, headers);

On the front end

var es = new EventSource('http://localhost:8000/api/log/live');
es.onmessage = (e)=>{
  console.log(e.data);
}
es.onclose = (e)=>{
  console.log(e);
}
es.onerror = (e)=>{
  console.log(e);
}