Hey, We are developing a multiuser collaboration designer dashboard similar to Canva. In that, we are dealing with large JSON data for our canvas. If one user performs any change then the difference is sent to the backend via socket. Backend does apply the update to the existing Ydoc available on backend using Y.applyUpdate() and then we emit the update to all the other clients.
Sometimes it works fine and merges the update (difference sent from one client) to the backend Ydoc and sometimes it fails to merge, once it fails then it fails repeatedly. We must restart or kill the server Ydoc to make it work again.
We tried: Y.applyUpdate(), Y.mergeUpdates() & Y.diffUpdate() for applying the update but nothing seems to be working as expected. How we can perform Udo/Redo on this I am trying to do that but facing issues with origin tracking, it’s not working properly.
Below is the Frontend & Backend code, How are we sending the update & applying update ?
// Client Side
const doc = new Y.Doc();
const stateVector1 = Y.encodeStateVector(doc);
let ymapJSON = doc.getMap('json');
doc.transact(() => {
ymapJSON.set('data', designer.data);
}, uniqueId);
const diff1 = Y.encodeStateAsUpdate(doc, stateVector1);
currentSocket.emit('update', {update: diff1, Id: id});
//Server Side
socket.on('update', async ({update, Id}) => {
// doc is defined earlier while I loaded the presentation the first time
const ymap = doc.getMap('json');
doc.transact(() => {
Y.applyUpdate(doc, update,);
});
let updatedJson = ymap.get('data');
await redis.set(redis_key, JSON.stringify(data))
})}