Is it possible to run a cleanup function on layout/page load functions that runs whenever the layout/page is unloaded?

[kran6a]

Currently found this problem where I create a ws client instance in a +layout.ts file.
The ws client sends a ping every 60s via a setInterval.
I would like to stop pinging and destroy the client when the user navigates outside the corresponding layout but since the client is being held by the setInterval closure, it is not destroyed. There is also no way to clear the interval.

Is there a clean way to do this other than setting the ping interval in the +layout.svelte file and destroying the client and the interval there? I don't really want to resort to passing "useless" props to my layouts just because I cannot clean them up in a +layout.ts file.

[david-plugge]

First of, what is the reason you use ws inside load functions?

[kran6a]

First of, what is the reason you use ws inside load functions?

I am using adapter-static so the load functions is only run on the browser. Also there is a whole bunch of pages using ws (every page under the layout that initiates the ws connection) so it is a great way to make it available to all those pages. Also, all my other services are passed through +layout.ts load functions for the same reason but only ws needs a cleanup function.

[brunnerh]

There are various hooks, you probably could use either onMount or onDestroy.

onDestroy runs on client and server, so if you want to only run cleanup on the client, you could use the browser flag from $app/environment.
The function passed to onMount can return a cleanup function that runs on unmount, so it behaves essentially the same as onDestroy but it only runs on the client.

[kran6a]

I cannot use onMount or onDestroy since the ws is initialized inside the +layout.ts load function and those hooks are only available inside components. I am looking for something similar but for load functions.

Currently the best approach I have found is returning the cleanup function so that I can call onMount on the +layout.svelte file and clean the ws up on unmount but it looks ugly and makes code hard to understand and refactor (ws is initialized in a file and cleaned up in another one).

[brunnerh]

Web socket implementations usually have a way to react to them being disconnected. So if you disconnect on the client, handling cleanup on the server should be possible via some event.

Actually, I don't think one should inititialize a web socket in the load function at all. Why is that not done in onMount in the layout page?

[kran6a]

I just found this problem again when trying to use Server Sent Events.

There are a few reasons to initialize websockets / SSE in the load function rather than in a svelte file.

Note that I use svelte-kit only with adapter-static so these do not apply to SSR adapters.

Mainly:

• The WS is available to all child pages and layouts
• The subscription can be invalidated via invalidate or invalidateAll, causing it to resubscribe
• The HTTP call can be preloaded if you are preloading the target page so the perceived latency is quite lower.

[brunnerh]

Maybe open a feature request for additional hooks that can be used directly in load, e.g.

export function load({ onDestroy, onNavigate }) {
  onDestroy(() => { /* cleanup */ });
}

onDestroy should then be pretty analogous to Svelte's lifecycle function and onNavigate could somewhat mirror the existing onNavigate and provide additional information about the navigation being performed.