public/owltide
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactor to persist and reliably deliver events

Browse source 
Store events that are to be broadcasted in the database, and fetch
events to serve in the /api/event stream to the client from the
database.  This ensures that events are not lost if the operation to
open the stream takes longer than usual, or the client was not connected
at the time the event was broadcast.

To ensure no events are lost in the transition from server generating
the page to the client hydrating and establishing a connection with the
event stream, the /api/last-event-id endpoint is first queried on the
server before any other entities is fetched from the database.  The
client then passes this id when establishing the event stream, and
receives all events greater than that id.
This commit is contained in:
Hornwitser 2025-09-20 20:11:58 +02:00
parent 0a0eb43d78
commit 753da6d3d4
18 changed files with 326 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

44
composables/event-source.ts
View file

@ -2,12 +2,12 @@
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
*/
import type { ApiEvent } from "~/shared/types/api";
import type { ApiEvent, ApiEventStreamMessage } from "~/shared/types/api";
interface AppEventMap {
"open": Event,
"message": MessageEvent<string>,
"update": MessageEvent<ApiEvent>,
"message": MessageEvent<ApiEventStreamMessage>,
"event": MessageEvent<ApiEvent>,
"error": Event,
"close": Event,
}
@ -18,12 +18,11 @@ class AppEventSource extends EventTarget {
#forwardEvent(type: string) {
this.#source!.addEventListener(type, event => {
if (type === "open" || type === "message" || type === "error") {
console.log("AppEventSource", event.type, event.data);
console.log("AppEventSource", event.type, event.data);
if (type === "open" || type === "error") {
this.dispatchEvent(new Event(event.type));
} else {
const data = event.data ? JSON.parse(event.data) as ApiEvent : undefined;
console.log("AppEventSource", event.type, data);
} else if (type === "message") {
const data = event.data ? JSON.parse(event.data) as ApiEventStreamMessage : undefined;
if (data?.type === "connected") {
this.#sourceSessionId = data.session?.id;
}
@ -34,17 +33,27 @@ class AppEventSource extends EventTarget {
source: event.source,
ports: [...event.ports],
}));
} else {
const data = event.data ? JSON.parse(event.data) as ApiEvent : undefined;
this.dispatchEvent(new MessageEvent(event.type, {
data,
origin: event.origin,
lastEventId: event.lastEventId,
source: event.source,
ports: [...event.ports],
}));
}
});
}
open(sessionId: number | undefined) {
open(sessionId: number | undefined, lastEventId: number) {
console.log("Opening event source sid:", sessionId);
this.#sourceSessionId = sessionId;
this.#source = new EventSource("/api/events");
const query = new URLSearchParams({ lastEventId: String(lastEventId) });
this.#source = new EventSource(`/api/events?${query}`);
this.#forwardEvent("open");
this.#forwardEvent("message");
this.#forwardEvent("update");
this.#forwardEvent("event");
this.#forwardEvent("error");
}
@ -58,20 +67,20 @@ class AppEventSource extends EventTarget {
}
#connectRefs = 0;
connect(sessionId: number | undefined) {
connect(sessionId: number | undefined, lastEventId: number) {
this.#connectRefs += 1;
if (this.#source && this.#sourceSessionId !== sessionId) {
this.close();
}
if (!this.#source) {
this.open(sessionId);
this.open(sessionId, lastEventId);
}
}
reconnect(sessionId: number | undefined) {
reconnect(sessionId: number | undefined, lastEventId: number) {
if (this.#source && this.#sourceSessionId !== sessionId) {
this.close();
this.open(sessionId);
this.open(sessionId, lastEventId);
}
}
@ -113,14 +122,15 @@ export const appEventSource = import.meta.client ? new AppEventSource() : null;
export function useEventSource() {
const sessionStore = useSessionStore();
const eventsStore = useEventsStore();
onMounted(() => {
console.log("useEventSource onMounted", sessionStore.id);
appEventSource!.connect(sessionStore.id);
appEventSource!.connect(sessionStore.id, eventsStore.lastEventId);
})
watch(() => sessionStore.id, () => {
console.log("useEventSource sessionStore.id change", sessionStore.id);
appEventSource!.reconnect(sessionStore.id);
appEventSource!.reconnect(sessionStore.id, eventsStore.lastEventId);
})
onUnmounted(() => {