Yaffle / EventSource

a polyfill for http://www.w3.org/TR/eventsource/
MIT License
2.11k stars 338 forks source link

onmessage event not triggering after connection is opened #196

Closed lgahdl closed 2 years ago

lgahdl commented 2 years ago

Hi guys, I want to know if I'm doing something wrong in my code. I'm using the EventSourcePolyfill because I need to send an Authorization Header with the request, with "curl" my request works good, I'm receiving the messages, but in the browser something works wrong, I don't receive any message and I don't know where is the problem.

Code of my Frontend EventSource:

import { EventSourcePolyfill } from 'event-source-polyfill'

...

export const useSSE = (url) => {
  const eventSource = new EventSourcePolyfill(url, {    headers: {
      Authorization: `Bearer ${localStorage.getItem("TOKEN")}`,
    },
  });
  eventSource.onmessage = (event) => {
    console.log(event)
  }
  eventSource.onerror = (event) => {
    console.log(event)
  }
  eventSource.onopen = (event) => {
    console.log(event)
  }
  eventSource.addEventListener("open", console.log);
  eventSource.addEventListener("message", console.log);
  eventSource.addEventListener("closed", console.log);
  eventSource.addEventListener("retrying", console.log);
  eventSource.addEventListener("end", console.log);
  eventSource.addEventListener("error", console.log);
  return () => {
    eventSource.close()
  }
}

curl: image

chrome dev tools: image

lgahdl commented 2 years ago

PS: The server is using Spring Web Flux and is not providing the Last-Event-ID header, can it be the cause?

lgahdl commented 2 years ago

FOUND IT! my event was "qualifier-events" where it should be "message"

Yaffle commented 2 years ago

The EventSource tab in DevTools is not working with polyfill, may be sone debugging should be added instead.