I'm going to use SSE to implement real-time notifications. Please look at my method and tell me what the problem is and how to solve it.
in vuex login action method
// SSE EvnetSource Connect
let url = process.env.VUE_APP_API_URL + "subscribe";
let eventSource = new EventSource(url, {
withCredentials: true
});
eventSource.addEventListener("notification", function (event) {
console.log(event.data);
commit('setNotification', event.data) // => set event's data to vuex 'notification' state as array
});
and then
in top nav component's watch method
watch: {
notification(val) {
if(val) {
const notiData = JSON.parse(val)
if(notiData.id) {
// show notification alert component
this.$notify("info filled", "notification", notiData.content, null, {
duration: 7000,
permanent: false
});
}
}
}
}
This is my current situation.
And this is my questions.
Currently, when logging in through vuex, I create an EventSource, but how to delete the EventSource when logging out? (EventSource is not defined globally, so I don't know how to approach it when logging out).
How to reconnect EventSource after page refresh? (I think main.js can handle it.)
Is there a way to put in Custom Header when creating EventSource?
As any other event bus, EventSource needs to be unsubscribed when events shouldn't be received. This requires to keep a reference to listener function. If a listener uses Vuex context that is available inside an action, it should be defined inside login action and stored in a state:
const notificationListener = (event) => {...};
eventSource.addEventListener("notification", notificationListener);
// can be moved to a mutation
state._notificationEventSource = eventSource;
state._notificationListener = notificationListener;
Inside logout action:
let { _notificationEventSource: eventSource, _notificationListener: notificationListener } = state;
eventSource.removeEventListener("notification", notificationListener);
It's no different when a page is initially loaded and reloaded.