There are ways around this issue, like entity versioning or extensive literature on the topic of distributed consensus. Nevertheless, let’s stick to a simple solution and see how we can notify the user when a change has been made so that at the very least (s)he can get a chance to deal with the situation. As soon as the content has been changed in the database, the user can decide what is the best course of action to take: overwrite or reload.

    To start with, we need to add an message div in the page. But we want it to show-up only when the pageModified scope variable is set to true.

    Now, must be set to true when this page is saved. Let’s register an event bus handler for the page.saved address:

    1. We do not want to print the warning if we modified the content ourselves so we need a client identifier.

    2. The callback will be invoked when a message is received on the page.saved address.

    4. Check that we are not the origin of the changes.

    5. Since the event bus client is not managed by AngularJS, wraps the callback to perform proper scope life cycle.

    6. Set pageModified to true.

    Eventually we have to push messages when the content of a page is saved in the database:

    1. The message contains the page identifier.

    2. The message contains the client identifier.

    3. The event is published on the address.

    If we open the application in two tabs inside the same browser (or different browsers), select the same page on both, and update the content in one, the warning message is printed: