I am currently trying to setup a realtime list using SSE. Everything is working as expected except when it comes to querying data that needs authentication. I am using JWTs and have an axios interceptor for all my other requests sitewide that works great.
Here is my observable
return new Observable<Api.MyType>((subscriber) => {
const eventSource = new EventSource(url)
const eventListener = (event: MessageEvent<string>) => {
try {
const item: Api.MyType = JSON.parse(event.data)
subscriber.next(item)
} catch (error) {
subscriber.error(error as Error)
}
}
eventSource.addEventListener('event-name', eventListener)
eventSource.onerror = (_: Event) => {
subscriber.error(new Error('EventSource failed'))
eventSource.close()
}
return () => {
eventSource.removeEventListener('event-name', eventListener)
eventSource.close()
}
})
I tried using event-source-polyfill
but could not get it working with my event listener – also in the repos readme (despite having 500k weekly downloads) in russian it says “dont use this crap library”.
Long story short, I need a way to pass my token with my request in order to successfully connect to my stream
const eventSource = new EventSource(url, {
headers: {
authorization: `Bearer ${token from cookies}`
}
})