Vue3/SyncedStore reactivity?

1

I’ve just started using Y.js with Vue3 and SyncedStore, using the Y-WebRTC, but I’m not fully understanding how/where/who reactivity is handled. I think the idea is that the SyncedStore provides reactivity?

I see that WebrtcProvider extends an Observable. But I can’t find much information on what an “Observable”, seems to be part of lib0 (same author?). But then, is SyncedStore wrapping this?

The very first thing I wanted to see from Y-WebRTC is simply if I’m connected or not. When I check the provider, I can see the correct connected value, but for the life of me can’t seem to wrap that in a computed function:

<script setup lang="ts">
    import { ref, computed} from 'vue'
    import { WebrtcProvider } from 'y-webrtc'
    import type { ComputedRef } from 'vue'

    import * as Vue from "vue"
    import { enableVueBindings } from "@syncedstore/core"
    import { syncedStore, getYjsDoc } from "@syncedstore/core"

    let message = ref("")
    localStorage.log = 'true'
    enableVueBindings(Vue);
    type ChatMessage = { sender: string, message: string }
    const store = syncedStore({ msgs: [] as ChatMessage[], fragment: "xml" })
    const ydoc = getYjsDoc(store)
    const webrtcProvider = new WebrtcProvider("syncedstore-chat", ydoc, { signaling: ['ws://localhost:4444'] })

    console.log('WebrtcProvider',WebrtcProvider)
    console.log('webrtcProvider',webrtcProvider, webrtcProvider.connected)

    const isConnected: ComputedRef<boolean> = computed((): boolean => {
        if (!webrtcProvider) {
            return false
        }
        return webrtcProvider.connected
    })

    function debug() {
        console.log('webrtcProvider',webrtcProvider, webrtcProvider.connected, isConnected.value)
        console.log(typeof webrtcProvider.connected)
    }
</script>

It’s very likely something very dumb :stuck_out_tongue:

2

provider.connected is not observable, but you might be able to make a computed property out of the peers event.

:warning: This is untested and I have no idea if it works. I just looked at the source code and saw a peers event you might be able to use :)

// create a reactive ref
const peersCount = ref(0)

// subscribe to peers event
webrtcProvider.on('peers', ({ webrtcPeers }) => {
  peersCount.value = webrtcPeers.size
})
1 Like
3

I’m so used to everything being reactive in Vue. But at least I won’t be chasing after this connected thing anymore. By the way, very close: :smile:

    // create a reactive ref
    let peersCount = ref(0)

    // subscribe to peers event
    webrtcProvider.on('peers', ({ webrtcPeers }) => {
        peersCount.value = webrtcPeers.length
    })

And thanks for the insight, I didn’t know these emits worked like that. Unfortunately this is not accurate enough for detecting if we’re connected or not. I’ll raise a feature request @ y-webrtc to see if perhaps an emit on connection can be added as well.

Thanks.

4

Glad it helped :).

Hmmm, yes I guess just adding peers does not mean they are necessarily connected yet.

provider.connected looks like this:

  get connected () {
    return this.room !== null && this.shouldConnect
  }

shouldConnect is set immediately on connect which is called when the provider is constructed, however I’m not sure when the room is set. Seems a bit buried. Ideally an event would be emitted when the room is set.

1 Like
5

Indeed. Well, I raised an “enhancement” request. Let’s see what happens, can’t say this is critical to have, but it would definiatly be nice. :wink:

It seems to otherwise be working pretty well :slight_smile: