Feature: Passing custom headers

[paolodina]

Hello, I noted that the polyfill allows to pass custom headers.

const es = new EventSourcePolyfill('/events', {
  headers: {
    'X-Custom-Header': 'value'
  }
});

Is this feature supported by vue-sse?

I tried registering VueSSE as follows but with no results:

Vue.use(VueSSE, {
  format: "json",
  polyfill: true,
  url: `${process.env.SERVER_API}/events/`,
  withCredentials: true,
  headers: {
    "X-Custom-Header": "value",
  },
})

I'd need to pass an auth token to the server and passing it with something like

url: `${process.env.SERVER_API}/events/?token=123456`

is not an option.

Eventually, could it technically be added as a new feature? In this case, if you don't want to implement it and maybe with some help, I could try.

[tserkov]

I could definitely include a polyfillOptions: { ... } option that gets passed directly to the polyfill's constructor quite easily.

The problem is that it would only apply when { polyfill: true } is set, and the browser's native EventSource does not exist. It would require a { forcePolyfill: true } option to tell me to forcibly set the browser's native EventSource to the polyfill (to not break backwards compatibility, since the polyfill only gets set when there is no native).

So a minimal configuration for this to work reliably would look like this:

Vue.use(VueSSE, {
  polyfill: true,
  polyfillOptions: { /* ... */ },
  forcePolyfill: true,
});

If that sounds reasonable, then it shouldn't be a hard addition.

[icheered]

Is this feature still in development? Would love to have it!

[paolodina]

@icheered Hi!

A combination of lack of skills and time caused that I didn't even started working on it. Bad... I forked this repo and somewhat integrated the feature, but definitely it doesn't worth a share.

I'd like to put a highlight on your now closed ticket as relevant #24.

[tserkov]

Released in v2.3.0!

Sorry for the delay, I recently moved countries. :)

[icheered]

Awesome @tserkov, Thanks for your help!