Sveltekit Directus Websockets Demo

+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';

	const url = 'ws://localhost:8055/websocket';
	const access_token = 'your key';
	const collection = 'posts';

	onMount(() => {
		const connection = new WebSocket(url);
		connection.addEventListener('open', function () {
			console.log({ event: 'onopen' });
			connection.send(
				JSON.stringify({
					type: 'auth',
					access_token
				})
			);
		});

		connection.addEventListener('message', function (message) {
			// Message is type of "MessageEvent" so cannot parse to JSON
			const data = JSON.parse(message.data);
			console.log({ event: 'onmessage', message: data });
			//{type: 'auth', status: 'ok'}
			if (data.type === 'auth' && data.status === 'ok') {
				subscribe();
			}
		});

		connection.addEventListener('close', function () {
			console.log({ event: 'onclose' });
		});

		connection.addEventListener('error', function (error) {
			console.log({ event: 'onerror', error });
		});
		function subscribe() {
			connection.readyState;
			connection.send(
				JSON.stringify({
					type: 'subscribe',
					collection: collection,
					query: { fields: ['*'] }
				})
			);
		}
		//
	});
</script>