change values in html based on database input

Question

I'm trying to develop an application in which it is very important to detect changes in a database in real time. I have devised a method to detect the changes now by running an ajax function and refreshing the page every 3 seconds, but this is not very efficient at all, and on high stress levels it dosen't seem like an effective solution.

Is there any way I can detect if some change has been made in the database instantly without having to refresh the page? The sample code is attached. I'm using php as my server side language, with html/css as the front end.

$(document).ready(function() {

$('#div-unassigned-request-list').load("atc_unassigned_request_list.php");
$('#div-driver-list').load("atc_driver_list.php");
$('#div-assigned-request-list').load("atc_assigned_request_list.php");
$('#div-live-trip-list').load("atc_live_trip_list.php");

setInterval(function() {

    $.ajax({url:"../methods/method_get_current_time.php",success:function(result){
        $("#time").html(result);
    }});


}, 1000)

setInterval( function() {

    $.ajax({url:"atc_unassigned_request_list.php",success:function(result){
        $("#div-unassigned-request-list").html(result);
    }});

    $.ajax({url:"atc_driver_list.php",success:function(result){
        $("#div-driver-list").html(result);
    }});

    $.ajax({url:"atc_assigned_request_list.php",success:function(result){
        $("#div-assigned-request-list").html(result);
    }});

} ,2000);

});

Please help!

have a look at the websocket-protocol! With that you can push updates from the server to the browser when db changes. — Jeff
– Jeff, Commented Aug 10, 2015 at 13:59
you can use also Server Sent Events if browser compatibility is not a big issue. Read these links-> w3schools.com/html/html5_serversentevents.asp & developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/… — Hirdesh Vishwdewa
– Hirdesh Vishwdewa, Commented Aug 10, 2015 at 14:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

For me, the best solution is

On the server side write a service that identify the changes
On the client, check this service with websockets preferencially (or ajax if you can not use websockets), then if there have changes, download it, This way you have, economy and velocity with more funcionality

Examples Updated

Using ajax

function downloadUpdates(){
    setTimeout(function(){
        $.ajax({
            url: 'have-changes.php'
            success:function(response){
                if(response == 'yes'){
                    // ok, let`s download the changes
                    ...
                    
                    // after download updates let`s start new updates check (after success ajax method of the update code)
                    downloadUpdates(); 
                }else{
                    downloadUpdates();
                }
            }
        });
    }, 3000);
}
downloadUpdates();

Using websockets

var exampleSocket = new WebSocket("ws://www.example.com/changesServer");
exampleSocket.onmessage = function(event) {
  if(event.data != "no"){
        // ok here are the changes
        $("body").html(event.data);
    }
}
exampleSocket.onopen = function (event) {
    // testing it
    setInterval(function(){
        exampleSocket.send("have changes?");
    }, 3000)
}

Here (I have tested it ) and Here some examples of how to use websocokets on php, the problem is you will need to have shell access

Collectives™ on Stack Overflow

change values in html based on database input

1 Answer 1

For me, the best solution is

Examples Updated

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

For me, the best solution is

Examples Updated

Comments

Your Answer

Sign up or log in

Post as a guest

Related