In my html5/javascript application, multiple users can access and view the same set of data simultaneously. To illustrate, let's consider a scenario where they are all on a calendar page.
For instance, user1 is browsing the calendar page while user2 also has it open. If user2 makes changes to the calendar, I want these modifications to be instantly recognized and updated on user1's screen. What would be the most effective approach to achieve this?
My initial idea involves creating a mysql table for active users, storing the current page they are viewing along with a timestamp for the last update. Then, utilizing ajax calls to ping the server at regular intervals to check for any newer timestamps. If an updated timestamp is detected, the new data will be sent and the page will be "reloaded" using a javascript function instead of physically refreshing the browser window. This process is similar to how stack overflow handles updates, but in this case, I aim for it to occur automatically without disrupting user1's workflow on the calendar page.
However, I am concerned if continuously pinging the server with ajax requests every few seconds will lead to significant slowdowns. Is this method flawed? Are there better alternatives to ensure real-time updates for both users? It is crucial for the views on each user's end to remain synchronized, preventing user1 from unknowingly modifying elements that have already been changed by user2.
Update: After exploring web sockets as a potential solution, I realized its limitations. Not only is it incompatible with older browsers (while I need to support ie8+), but I don't require real-time updates for all site users. My website follows an account-based system where one account may involve multiple users, so data synchronization is essential among those specific users only. Any suggestions or alternative approaches would be greatly appreciated.