How to syncronise two browsers

Question

I have a little problem and because my WEB development skills are not the sharpest I hope you can help me.

The problem is that I am working on a digital SCRUM task board and one of the core functionality would be that browsers having the same project taskboard open would have to show the same picture. So that if person A moves a task person B should see this in his browser without having to manual refresh the web page.

I know that up to the millisecond synchronization is impossible because that would just kill the network connection. But once every 30 seconds would be nice. Except if you could push the messages.

The representation of an item move is not the question because I can make it blink quite easily. I need the help on the browser server-communication. How does the browser of person B know that something was changed. Is it really as simple as having a timer and idiotically query the JSON service for any changes. Or is there a way to push the changes to the browser?

Answer 1

You want to look into Comet.

In web development, Comet is a neologism to describe a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it.

This will get you the near instant response you desire. There are several JavasScript frameworks with built-in support for it - which you choose depends on what you are already using, your familiarity with each, etc. Dojo is one that I have used before, and it worked very well.

Answer 2

Yes, this is standard AJAX practice - the A is 'asynchronous', meaning that you fire off an XMLHttpRequest in the background to check on the status and then update the page if necessary.

You cannot 'push' to the browser.

Answer 3

It's possible to have a pull connection open that effectively allows you to push content to the browser, but the polling idea is the simplest.

Your poll just needs to see when the last update was, if it's more recent than the one it knows about, then it can download the entire update.

Keep it simple. You won't go too far wrong.

Answer 4

Assuming that person A moving a task means the change is reflected in the database, you simply need to set a JavaScript interval ( setInterval( function, timeInMs ) ) to poll a backend script, using AJAX, that will return the new state.

Answer 5

There are three techniques to achieve this:

• short polling: browsers sends ajax request every x seconds and immediately gets response
• long polling: browser sends ajax request and wait response while not timeout, then send another request
• flash socket: use flash app for persistent with server-side application