Proper design for externally synced state

[hrueger]

Hi all,
I was wondering what the nicest way in Svelte 5 with runes of the following would be:
I have a let myState = $state("some string") which is synced via websocket. When a websocket message is received, the value should be updated. I also want to be able to bind it to an input field. Whenever the user types in the field or some other logic on the UI updates the value, it should be sent to the backend via websocket.
Ideas I have considered:

Using $effect

If I use a $effect(() => sendViaWebsocket(myState), this triggers also after an incoming websocket message and sends the value back, although this is not neccessary :-(

Using a wrapper class with a value copy

untested pseudocode in a something.svelte.ts file:

class MyStateWrapper<T> {
    private readonly state = $state();
    private copy: T;
    constructor(initialValue: T) {
        state = $state("some string");
        copy = initialValue;
        $effect(() => {
            if (copy != state) {
                sendViaWebsocket(state);
                copy = state;
            }
        });
    }
    public updateFromWebsocket(value: T) {
        copy = value;
        state = value;
    }
}

this just feels complicated, and I always have to write wrapper.state instead of state.

Manually sending the websocket message

I could also just use a onchange for the input field, update the state there and also send the websocket message.
However, then I loose the syntactical niceness of bind:value...

---

I think syncing state via websocket is quite a common usecase. Therefore, does anyone have an idea on how to do this properly? Thanks in advance!

[dangodai]

Have you had a look at createSubscriber: https://svelte.dev/docs/svelte/svelte-reactivity#createSubscriber

I haven't used it before, least of all for websockets, but I think you will basically do 1) Set up your websocket, 2) Call create subscriber and call its update function when your websocket receives messages, 3) Create a setter that writes to the websocket, and you should be able to bind to it.

[hrueger]

Thanks a lot for your answer, I had not known about this. I think this is how it works:

<script lang="ts">
	import { getWebsocket, subscribe, setValue } from '$lib/websocket/websocket.svelte';
	import { createSubscriber } from 'svelte/reactivity';

	class SyncedWebsocketState<T> {
		private subscribe: () => void;
		private _value: T;
		private path: string;
		private update?: () => void;

		constructor(path: string, initialValue: T) {
			this.path = path;
			this._value = initialValue;
			this.subscribe = createSubscriber((update) => {
				this.update = update;
				subscribe(path, ({ level }) => {
					// set internal value
					this._value = level;
					// trigger reactivity
					update();
				});
			});
		}

		get value() {
			// This makes the getter reactive, if read in an effect
			this.subscribe();

			// Return the current state of the query, whether or not we're in an effect
			return this._value;
		}

		set value(v: T) {
			this._value = v;
			// send outgoing, triggered by everything except incoming websocket messages
			setValue(this.path, { level: v });
			// trigger reactivity
			this.update?.();
		}
	}

	const myTest = new SyncedWebsocketState<number>('/meter/1', 0);
</script>

<div class="d-flex flex-column">
	<input type="range" min="0" max="100" bind:value={myTest.value} />
</div>

value: {myTest.value}