Port application from Next.js to Nuxt

Nuxt is based on Vue.js and I find their building blocks to be much
neater compared to the React based Next.js.

server/api/create-event.post.ts

@@ -0,0 +1,31 @@
+import { Schedule } from "~/shared/types/schedule";
+import { readFile, writeFile } from "node:fs/promises";
+import { broadcastUpdate } from "~/server/streams";
+import { sendPush } from "~/server/web-push";
+
+export default defineEventHandler(async (event) => {
+	const formData = await readFormData(event);
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+	const start = formData.get("start") as string;
+	const end = formData.get("end") as string;
+	const location = formData.get("location") as string;
+	schedule.events.push({
+		name,
+		id,
+		description,
+		slots: [
+			{
+				id: `${id}-1`,
+				start: start + "Z",
+				end: end + "Z",
+				locations: [location],
+			}
+		]
+	});
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+	await sendPush("New event", `${name} will start at ${start}`);
+});

server/api/delete-event.post.ts

@@ -0,0 +1,16 @@
+import { Schedule } from "~/shared/types/schedule";
+import { readFile, writeFile } from "fs/promises";
+import { broadcastUpdate } from "~/server/streams";
+
+export default defineEventHandler(async (event) => {
+	const formData = await readFormData(event);
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const index = schedule.events.findIndex(event => event.id === id);
+	if (index === -1) {
+		throw Error("No such event");
+	}
+	schedule.events.splice(index, 1);
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+});

server/api/events.ts

@@ -0,0 +1,31 @@
+import { addStream, deleteStream } from "~/server/streams";
+
+export default defineEventHandler(async (event) => {
+	const encoder = new TextEncoder();
+	const source = event.headers.get("x-forwarded-for");
+	console.log(`starting event stream for ${source}`)
+	const stream = new TransformStream<string, Uint8Array>({
+		transform(chunk, controller) {
+			controller.enqueue(encoder.encode(chunk));
+		},
+		flush(controller) {
+			console.log(`finished event stream for ${source}`);
+			deleteStream(stream.writable);
+		},
+		// @ts-expect-error experimental API
+		cancel(reason) {
+			console.log(`cancelled event stream for ${source}`);
+			deleteStream(stream.writable);
+		}
+	})
+	addStream(stream.writable);
+	return new Response(
+		stream.readable,
+		{
+			headers: {
+				"Access-Control-Allow-Origin": "*",
+				"Content-Type": "text/event-stream",
+			}
+		}
+	);
+});

server/api/modify-event.post.ts

@@ -0,0 +1,37 @@
+import { Schedule } from "~/shared/types/schedule";
+import { readFile, writeFile } from "fs/promises";
+import { broadcastUpdate } from "~/server/streams";
+import { sendPush } from "~/server/web-push";
+
+export default defineEventHandler(async (event) => {
+	const formData = await readFormData(event);
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+	const start = formData.get("start") as string;
+	const end = formData.get("end") as string;
+	const location = formData.get("location") as string;
+	const index = schedule.events.findIndex(event => event.id === id);
+	if (index === -1) {
+		throw Error("No such event");
+	}
+	const timeChanged = schedule.events[index].slots[0].start !== start + "Z";
+	schedule.events[index] = {
+		name,
+		id,
+		description,
+		slots: [
+			{
+				id: `${id}-1`,
+				start: start + "Z",
+				end: end + "Z",
+				locations: [location],
+			}
+		]
+	};
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+	if (timeChanged)
+		await sendPush(`New time for ${name}`, `${name} will now start at ${start}`);
+});

server/api/schedule.ts

@@ -0,0 +1,6 @@
+import { readFile } from "node:fs/promises";
+import { Schedule } from "~/shared/types/schedule";
+
+export default defineEventHandler(async (event) => {
+	return JSON.parse(await readFile("schedule.json", "utf-8")) as Schedule;
+})

server/api/subscribe.post.ts

@@ -0,0 +1,29 @@
+import { readFile, writeFile } from "node:fs/promises";
+
+export default defineEventHandler(async (event) => {
+	const body: { subscription: PushSubscriptionJSON } = await readBody(event);
+	let subscriptions: PushSubscriptionJSON[];
+	try {
+		subscriptions = JSON.parse(await readFile("push-subscriptions.json", "utf-8"));
+	} catch (err: any) {
+		if (err.code !== "ENOENT") {
+			throw err;
+		}
+		subscriptions = [];
+	}
+	const existingIndex = subscriptions.findIndex(sub => sub.endpoint === body.subscription.endpoint);
+	if (existingIndex !== -1) {
+		subscriptions[existingIndex] = body.subscription;
+	} else {
+		subscriptions.push(body.subscription);
+	}
+	await writeFile(
+		"push-subscriptions.json",
+		JSON.stringify(subscriptions, undefined, "\t"),
+		"utf-8"
+	);
+	if (existingIndex !== -1) {
+		return { message: "Existing subscription refreshed."};
+	}
+	return { message: "New subscription registered."};
+})

server/api/unsubscribe.post.ts

@@ -0,0 +1,26 @@
+import { readFile, writeFile } from "fs/promises";
+
+export default defineEventHandler(async (event) => {
+	const body: { subscription: PushSubscriptionJSON } = await readBody(event);
+	let subscriptions: PushSubscriptionJSON[];
+	try {
+		subscriptions = JSON.parse(await readFile("push-subscriptions.json", "utf-8"));
+	} catch (err: any) {
+		if (err.code !== "ENOENT") {
+			throw err;
+		}
+		subscriptions = [];
+	}
+	const existingIndex = subscriptions.findIndex(sub => sub.endpoint === body.subscription.endpoint);
+	if (existingIndex !== -1) {
+		subscriptions.splice(existingIndex, 1);
+	} else {
+		return { message: "No subscription registered."};
+	}
+	await writeFile(
+		"push-subscriptions.json",
+		JSON.stringify(subscriptions, undefined, "\t"),
+		"utf-8"
+	);
+	return { message: "Existing subscription removed."};
+})

server/streams.ts

@@ -0,0 +1,47 @@
+import { Schedule } from "~/shared/types/schedule"
+
+function sendMessage(
+	stream: WritableStream<string>,
+	message: string,
+) {
+	const writer = stream.getWriter();
+	writer.ready
+		.then(() => writer.write(message))
+		.catch(console.error)
+		.finally(() => writer.releaseLock())
+	;
+}
+
+const streams = new Set<WritableStream<string>>();
+
+let keepaliveInterval: ReturnType<typeof setInterval> | null = null
+export function addStream(stream: WritableStream<string>) {
+	if (streams.size === 0) {
+		console.log("Starting keepalive")
+		keepaliveInterval = setInterval(sendKeepalive, 4000)
+	}
+	streams.add(stream);
+}
+export function deleteStream(stream: WritableStream<string>) {
+	streams.delete(stream);
+	if (streams.size === 0) {
+		console.log("Ending keepalive")
+		clearInterval(keepaliveInterval!);
+	}
+}
+
+export function broadcastUpdate(schedule: Schedule) {
+	const id = Date.now();
+	const data = JSON.stringify(schedule);
+	const message = `id: ${id}\nevent: update\ndata: ${data}\n\n`
+	console.log(`broadcasting update from ${process.pid} to ${streams.size} clients`);
+	for (const stream of streams) {
+		sendMessage(stream, message);
+	}
+}
+
+function sendKeepalive() {
+	for (const stream of streams) {
+		sendMessage(stream, "data: keepalive\n\n");
+	}
+}

server/web-push.ts

@@ -0,0 +1,56 @@
+import { readFile, writeFile } from "node:fs/promises";
+import webPush from "web-push";
+
+webPush.setVapidDetails(
+	"mailto:webmaster@hornwitser.no",
+	process.env.NUXT_PUBLIC_VAPID_PUBLIC_KEY!,
+	process.env.NUXT_VAPID_PRIVATE_KEY!,
+)
+
+export async function sendPush(title: string, body: string) {
+	const payload = JSON.stringify({ title, body });
+	let subscriptions: PushSubscriptionJSON[];
+	try {
+		subscriptions = JSON.parse(await readFile("push-subscriptions.json", "utf-8"));
+	} catch (err: any) {
+		if (err.code !== "ENOENT") {
+			console.log(`Dropping "${payload}", no push subscribers`);
+			return;
+		}
+		subscriptions = [];
+	}
+	console.log(`Sending "${payload}" to ${subscriptions.length} subscribers`);
+	const removeIndexes = [];
+	for (let index = 0; index < subscriptions.length; index += 1) {
+		const subscription = subscriptions[index];
+		try {
+			await webPush.sendNotification(
+				subscription as webPush.PushSubscription,
+				payload,
+				{
+					TTL: 3600,
+					urgency: "high",
+				}
+			)
+		} catch (err: any) {
+			console.error("Received error sending push notice:", err.message, err?.statusCode)
+			console.error(err);
+			if (err?.statusCode >= 400 && err?.statusCode < 500) {
+				removeIndexes.push(index)
+			}
+		}
+	}
+	if (removeIndexes.length) {
+		console.log(`Removing indexes ${removeIndexes} from subscriptions`)
+		removeIndexes.reverse();
+		for (const index of removeIndexes) {
+			subscriptions.splice(index, 1);
+		}
+		await writeFile(
+			"push-subscriptions.json",
+			JSON.stringify(subscriptions, undefined, "\t"),
+			"utf-8"
+		);
+	}
+	console.log("Push notices sent");
+}