Event Stream data not showing in Chrome console

Question

I have an EventSource listener on my frontend calling a complicated backend scheme. This code block is written in Typescript.

import * as EventSource from 'eventsource';      

private streamData() {
    let source = new EventSource('http://localhost:3000/websocket/server/stream');

    source.onopen = (e) => {

    };

    source.onmessage = (e) => {
      console.log('id: ' + (<any>e).lastEventId + '; type: ' + e.type + ' data: ' + e.data);
    };
  }

And I send back the following response to my server :

res.write('id: ' + this.messageId++ + '\n');
res.write('type: message\n');
res.write('data: ' + message + '\n\n');
res.flush();

---

Now, on the Chrome console, I get all the data needed.

However, on the xhr monitor, I cannot see the EventStream data.

I get the info on my frontend, so this is not a blocking issue for me, but may pose some problems later in debugging.

Fornix

In the WS tab on the browser, can't you see the stream ? – Tonnage

No, it is empty. I can only see the stream on the XHR tab. – Fornix

I cannot help you unfortunately, since I can't seem to get my head around the problem, but this is a well written and refreshing question from a new user, congrats – Karie

did you find an answer to this problem ? i am having the exact same issue. – Burmeister

Do you use npmjs.com/package/eventsource ? I have the same problem – Encrata

You've probably figured this out by now, but the spec uses the string "event: " not "type: " – Leukoderma

Same for me, I am using sse.js – Barkley

Answer 1

I had the same issue. The data does not show up when you are using the eventsource polyfill only when you use the built in browser implementation of the EventSource class.

Isentropic

This is actually correct, when I switch to political chrome stopped showing the messages – Cung

Answer 2

unfortunately, this problem is relevant for all non native SSE clients. https://github.com/Azure/fetch-event-source/issues/3

Consider using window.EventSource if it fits your use case.

Wavell

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Rutger