I am working on a real time Vue project, that uses ckeditor5 as a text editor. Pusher is a realtime API that uses websocket, to broadcast events to other Pusher instances real time. This is Pusher
In the ckeditor config, I pass a set callback. This set callback, fires on any text change, and I use it to trigger pusher events, broadcasting the text
value to other pusher instances.
The problem emerges when the other pusher instance on their side recieves the event, and after processing it, Vue updates the text value in the DOM reactively, thus fireing the above mentioned set callback, that triggers the event again. In a realtime environment it messes up the value update, and ends in a text flickering.
In the callback, I only get a string value, and I can't find out what initiated the callback, thus can't stop the execution.
Is there a way to prevent ckeditor5 to fire the callback?
This can be a problem existent on every websocket based project.
The problem is that when a change triggers a broadcast and a Pusher client receives and applies it then it becomes broadcasted as the clients change. When the original broadcaster receives the change it cannot determine whether it is its own change and applies it again.
After I had a few failed attempts to create a ckeditor plugin which filters out the incoming changes which have been initialized be the ckeditor instance itself, I decided to make a workaround to tackle this issue.
I created a cache which before broadcasting the initialized changes it stores them for a few seconds. When a change is getting received from a Pusher client the change only gets applied if it is not present in the cache therefore it is initialized by another client.
This workaround works in most times but there can be still be issues with a very slow internet connection with low response time (it depends on the caching time).