owltide/composables/schedule.ts

import type { Schedule } from '~/shared/types/schedule';

let source: EventSource | null = null;
let sourceRefs = 0;
let sourceSessionId: number | undefined = undefined;
export const useSchedule = () => {
	const sessionStore = useSessionStore();
	const requestFetch = useRequestFetch();
	const asyncData = useAsyncData<Schedule>(
		'schedule',
		() => requestFetch("/api/schedule"),
		{ default: () => ({ events: [], locations: [] }) },
	)
	const { data: schedule } = asyncData;

	function connect() {
		console.log("Opening event source sid:", sessionStore.id);
		sourceSessionId = sessionStore.id;
		source = new EventSource("/api/events");
		source.addEventListener("message", (message) => {
			console.log("Message", message.data);
		});
		source.addEventListener("update", (message) => {
			const updatedSchedule: Schedule = JSON.parse(message.data);
			console.log("Update", updatedSchedule);
			schedule.value = updatedSchedule;
		});
	}

	function disconnect() {
		console.log("Closing event source")
		source!.close();
		source = null;
	}

	onMounted(() => {
		console.log("useSchedule onMounted", sourceRefs);
		sourceRefs += 1;
		if (sourceRefs !== 1) {
			console.log("Event source already open");
			return;
		}
		connect();
	})

	watch(() => sessionStore.id, () => {
		if (sourceSessionId === sessionStore.id) {
			return;
		}
		sourceSessionId = sessionStore.id;
		console.log("Session changed, refetching schedule")
		$fetch("/api/schedule").then(
			data => { schedule.value = data; },
			err => { console.error(err); schedule.value = { locations: [], events: []}},
		)
		if (source && sourceRefs > 0) {
			console.log("Restarting event stream")
			disconnect();
			connect();
		}
	})

	onUnmounted(() => {
		console.log("useSchedule onUnmounted", sourceRefs);
		sourceRefs -= 1;
		if (source && sourceRefs === 0) {
			disconnect();
		}
		if (sourceRefs < 0) {
			throw Error("Source reference count below zero");
		}
	});

	return asyncData.then(({ data }) => data);
}