I am trying to create a cobrowsing in-browser JavaScript application from scratch. I am now dealing with sending data. I solved the communication between the two sides by using signalR, checking for changes on the side that sends the data using MutationObserver. The app basically works, I am able to send a complete html page and display it on the other side.
The main problem is that in order for it to work, the entire data has to be sent again every time something changes on the page, and that is not very ideal for the server.
I tried to create several html diffs but none of them work efficiently. Yes, I can detect the difference in percentages between pages without any problems, but I can no longer tell what exactly has changed on the page, or rather I can, but it is often very imprecise and it does not always include all changes.
I saved the old page (already "submitted" once) and compared it with the new page. I tried splitting the page into several blocks and then counting the changes in the blocks, I tried going through the whole page and comparing similar elements and determining which elements are new, changed or deleted. But all inaccurate!
I have already seen several very functional Cobrowsing applications (e.g. https://cobrowse.io/ ). That's why I ask how?
How to ensure a functional page comparison and not overload the server? Or do I have to have google servers? Or am I misunderstanding the whole thing and doing it wrong?
I will be glad for any help and opinion, Thanks