Voy a usar SSE para implementar notificaciones en tiempo real. Mire mi método y dígame cuál es el problema y cómo resolverlo.
en el método de acción de inicio de sesión de vuex
// 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 });y luego
en el método de vigilancia del componente de navegación superior
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 }); } } }}
Esta es mi situación actual.
Y esta es mi pregunta.
Actualmente, al iniciar sesión a través de vuex, creo un EventSource, pero ¿cómo elimino el EventSource al cerrar la sesión? (EventSource no está definido globalmente, por lo que no sé cómo abordarlo al cerrar la sesión).
¿Cómo volver a conectar EventSource después de actualizar la página? (Creo que main.js puede manejarlo).
¿Hay alguna manera de poner un encabezado personalizado al crear EventSource?
Como cualquier otro bus de eventos, EventSource debe darse de baja cuando no se deben recibir eventos. Esto requiere mantener una referencia a la función de escucha. Si un oyente usa el contexto Vuex que está disponible dentro de una acción, debe definirse dentro de la acción de inicio de sesión y almacenarse en un estado:
const notificationListener = (event) => {...}; eventSource.addEventListener("notification", notificationListener); // can be moved to a mutation state._notificationEventSource = eventSource; state._notificationListener = notificationListener;Acción de cierre de sesión interior:
let { _notificationEventSource: eventSource, _notificationListener: notificationListener } = state; eventSource.removeEventListener("notification", notificationListener);No es diferente cuando una página se carga y recarga inicialmente.