How to use this example with y-webrtc?

[yogesh-sirsat]

I'm having difficulty to use this example with y-webrtc, even though I suppose the changes should be not much looking at the code of this example.

I changed this line with webrtcProvider.

tldraw-yjs-example/src/useYjsStore.ts

Line 57 in ed7d759

room: new WebsocketProvider(hostUrl, roomId, yDoc, { connect: true }),

and removed this lines, since I guessed this lines has to do with websocket provider only.

tldraw-yjs-example/src/useYjsStore.ts

Lines 294 to 320 in ed7d759

	function handleStatusChange({
	status,
	}: {
	status: 'disconnected' | 'connected'
	}) {
	// If we're disconnected, set the store status to 'synced-remote' and the connection status to 'offline'
	if (status === 'disconnected') {
	setStoreWithStatus({
	store,
	status: 'synced-remote',
	connectionStatus: 'offline',
	})
	return
	}
	room.off('synced', handleSync)
	if (status === 'connected') {
	if (hasConnectedBefore) return
	hasConnectedBefore = true
	room.on('synced', handleSync)
	unsubs.push(() => room.off('synced', handleSync))
	}
	}
	room.on('status', handleStatusChange)
	unsubs.push(() => room.off('status', handleStatusChange))

and just called handleSync function, at the end of useEffect().

but it seems to be not working, I can't see remote changes only local changed on tldraw canvas, and In browser console I'm getting this error:
error.js:12 Uncaught (in promise) Error: A Yjs Doc connected to room "example17" already exists!

I guess its creating duplicate rooms with same id, but I'm not sure why and which change is causing it.