CODEWITHSUNDEEP
phpjqueryhtml
darkCoffy
darkCoffy

Reputation: 187

change values in html based on database input

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!

Upvotes: 1

Views: 90

Answers (1)

deFreitas
deFreitas

Reputation: 4448

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

Upvotes: 2

Related Questions