javascript autoupdate when a sql record is changed (or equals some specific value)

Question

Is it possible for javascript to update automatically if a mySQL field is modified? I'm assuming this basically translates to some kind of a constant query of a specific SQL record.

For an example, lets suppose I'm making a simple /multiplayer/ tic-tac-toe using PHP and jquery with a mySQL background.

I want the tic-tac-toe page to be powered by jquery so that the user does not have to do a page refresh.

Two users get hooked up and the game begins. User 2 waits while user 1 thinks about where to put an X. When User 1 clicks a square to include an X, I'd like for user 2 to have their screen automatically changed to reflect - without having to press any buttons to check for updates.

this!! http://stackoverflow.com/questions/333664/simple-long-polling-example-code — jeremy, Apr 18 '11 at 22:57

score 0 · Answer 1 · answered Apr 18 '11 at 18:19

You have two main solutions, polling or websockets(which isn't fully supported in all browsers btw), both involve communicate with the backend. I'm not going to cover websockets, however it is an up and coming technology that keeps an open connections from the frontend to the backend. Another option is using something like Comet, which allows you to keep an HTTP connection open for a long time.

The other solution you have is polling, in which you make an ajax request every x seconds to "poll" for changes.

score 0 · Answer 2 · answered Apr 18 '11 at 18:19

This could be done using Ajax (use JQuery Ajax). It could refresh every couple of seconds to update the page with the latest content from the database. This approach is fine on a small scale with a low a number users but is very draining on your server's resources as it is constantly sending and receiving data even if new data is not available.

A better option may be to use node.js and socket.io to support large scale real time processes.

score 0 · Accepted Answer · answered Apr 18 '11 at 18:21

You could poll the server every X seconds (say 10 seconds) via AJAX to check if it's changed. Theres no (easy) way of pushing data to the client side.

Example code:

function checkStatus() {
    setTimeout('checkStatus()',10000);
    $.ajax({
        url: "checkStatus.php",
        success: function(data){
            //Code to handle change goes here
        }
    });
}
setTimeout('checkStatus()',10000);

score 0 · Answer 4 · answered Apr 18 '11 at 18:23

Yes - one way is to use a long-polling comet. Essentially, this works by making an asynchronous (typically with AJAX) request from the server and waiting for the response. The wait can be for an hour, say. When it receives a response, it 'completes' the request and then sends another request in the same way.

There are lots of other ways though - check out 'push technology'.

score 0 · Answer 5 · answered Jun 13 '11 at 17:35

I'd been trying to use setTimeout but had no success. I used setInterval and it seems to work like a charm.

Code follows:

function waitForMsg(){

    $.ajax({
        url: "tictac_code1.php",
        type: 'POST',
        data: 'longpoll=1',

        async: true, /* If set to non-async, browser shows page as "Loading.."*/
        cache: false,
        timeout:10000, /* Timeout in ms */

        success: function(data){ /* called when request to barge.php completes */

            $('#loggedinnames').empty();
            $('#loggedinnames').append(data);
            setInterval(waitForMsg, 10000);
            //setTimeout(
            //    'waitForMsg()', /* Request next message */
            //    1000 /* ..after 1 seconds */
            //);

        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            //alert("error in waitformsg.");
            addmsg("error", textStatus + " (" + errorThrown + ")");
            setInterval(waitForMsg, 10000);


            //setTimeout(
              //  'waitForMsg()', /* Try again after.. */
              //  "15000"); /* milliseconds (15seconds) */


        }
    });
};

$(document).ready(function(){
    waitForMsg(); /* Start the inital request */
});

javascript autoupdate when a sql record is changed (or equals some specific value)

5 Answers5