Refresh data ajax

Door Kevin Hettema op 12-03-2021 18:52 gewijzigd op 12-03-2021 18:58

3.372 views

Beste leden,

Ik wil enkel de data laten refreshen van mijn php pagina.
Volgens mij is dat alleen radioDetails.
Ik heb er weinig kaas van gegeten.
Alle hulp word zeer gewaardeerd!
Dit is wat heb:

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
?>
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>TELLER</title>
    <link rel="stylesheet" href="./style.css">

</head>
 <body>
    <div id="topbuts">
        <a class="btn" href="./index.php">Ververs</a>
		<a class="btn" href="./log_listeners.php" target="_blank">Listeners Updates / Peaks</a>

        <div class="clearfix"></div>
    </div>
    <?php include ('array.php');?>
     <div class="content">
    <br />
        <?php
			$peak = file_get_contents ('peak.txt');
            if ($data['status'] != '1')
			{
                echo '<b>Error: Servers Offline...</b>';
            }
        ?>
        <br />
        
		<div class="box">
            <div class="head"><i class="icon-play-circle"></i> &nbsp; BesteHitsNL - All Icecast & Shoutcast servers</div>
            <div class="box-content">
                <div class="radioLogo">
                    <img src="logo120.png">
                </div>
                <div class="radioDetails">
                    <b>Listeners:</b> <?php echo $data['listeners']; ?> <br />
                    <b>Listener Peak:</b> <?php echo $peak; ?> <br />
                    <b>Total Stream Hits:</b> <?php echo $data['hits']; ?> <br />
                </div>
                <div class="clearfix" style="border-bottom: 1px solid #C8C8C8;"></div>
                <div class="listener">
                    <div class="col">Hostname</div>
                    <div class="col">Useragent (Player)</div>
                    <div class="col">Listen Time</div>
					<div class="col">Server</div>
					<div class="col">Location</div>
                </div>
				
                <div id="listeners">
                    <?php
                        if (is_array($data['listeners-list']))
						{
                            foreach ($data['listeners-list'] as $list)
							{
								$ip = $list['HOSTNAME'];
								if ($ip == '127.0.0.1')
								{
									$LocationString = 'Localhost';
								}
								else
								{
									$ipInfo = grabIpInfo($ip);
									$ipJsonInfo = json_decode($ipInfo);
									$LocationString = $ipJsonInfo->name;
								}
                                echo '<div class="listener">
                                <div class="col">' . $list['HOSTNAME'] . '</div>
                                <div class="col">' . $list['USERAGENT'] . '</div>
                                <div class="col">' . floor($list['CONNECTTIME']/3600)."h ".floor(($list['CONNECTTIME'] / 60) % 60) ."m ".floor($list['CONNECTTIME'] % 60)."s" . '</div>
								<div class="col">' . $list['SERVER'] . '</div>
								<div class="col">' . $LocationString . '</div>
                                </div>';
                            }
                        }
					function grabIpInfo($ip)
					{
						$curl = curl_init();
						curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip);
						curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
						$returnData = curl_exec($curl);
						curl_close($curl);
						return $returnData;
					}
                    ?>
					
                </div>
            </div>
        </div>
		<br /><br />
    </div>
</body>

Dit stukje heb ik zelf erneer gezet!
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> 
<div id="radioDetails">dynamic content ?</div>
<script> 
$(document).ready(function(){
setInterval(function(){
      $("#radioDetails").load(window.location.href + "#radioDetails" );
}, 3000);
});
</script>

K Kevin Hettema

15-03-2021 14:50 gewijzigd op 15-03-2021 14:52

index.php

 
<?php
header("Cache-Control: private, no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>BesteHitsNL - DJ TELLER</title>
    <link rel="stylesheet" href="./style.css">

</head>
 <body>

    <div id="topbuts">
        <a class="btn" href="./index.php">Ververs</a>
		<a class="btn" href="./log_listeners.php" target="_blank">Listeners Updates / Peaks</a>
       server</a>
        <div class="clearfix"></div>
    </div>
    <?php include ('array.php');?>
     <div class="content">
    <br />
        <?php
			$peak = file_get_contents ('peak.txt');
            if ($data['status'] != '1')
			{
                echo '<b>Error: Servers Offline...</b>';
            }
        ?>
        <br />

		<div class="box">
            <div class="head"><i class="icon-play-circle"></i> &nbsp; BesteHitsNL - All Icecast & Shoutcast servers</div>
            <div class="box-content">
                <div class="radioLogo">
                    <img src="logo120.png">
                </div>
                <div class="radioDetails"> 
                     <b>Listeners:</b> <?php echo $data['listeners']; ?> <br />
                    <b>Listener Peak:</b> <?php echo $peak; ?> <br />
                    <b>Total Stream Hits:</b> <?php echo $data['hits']; ?> <br />
                </div>
                <div class="clearfix" style="border-bottom: 1px solid #C8C8C8;"></div>
                <div class="listener">
                    <div class="col">Hostname</div>
                    <div class="col">Useragent (Player)</div>
                    <div class="col">Listen Time</div>
					<div class="col">Server</div>
					<div class="col">Location</div>
                </div>
				
                <div id="listeners">
                    <?php
                        if (is_array($data['listeners-list']))
						{
                            foreach ($data['listeners-list'] as $list)
							{
								$ip = $list['HOSTNAME'];
								if ($ip == '127.0.0.1')
								{
									$LocationString = 'Localhost';
								}
								else
								{
									$ipInfo = grabIpInfo($ip);
									$ipJsonInfo = json_decode($ipInfo);
									$LocationString = $ipJsonInfo->name;
								}
                                echo '<div class="listener">
                                <div class="col">' . $list['HOSTNAME'] . '</div>
                                <div class="col">' . $list['USERAGENT'] . '</div>
                                <div class="col">' . floor($list['CONNECTTIME']/3600)."h ".floor(($list['CONNECTTIME'] / 60) % 60) ."m ".floor($list['CONNECTTIME'] % 60)."s" . '</div>
								<div class="col">' . $list['SERVER'] . '</div>
								<div class="col">' . $LocationString . '</div>
                                </div>';
                            }
                        }
					function grabIpInfo($ip)
					{
						$curl = curl_init();
						curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip);
						curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
						$returnData = curl_exec($curl);
						curl_close($curl);
						return $returnData;
					}
					
					
                    ?>
					
                </div>
            </div>
        </div>
		<br /><br />
    </div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="radioDetails" class="radioDetails">
<script>
var auto_refresh = setInterval(
function()
{
  $('#listeners').fadeout('slow').load('refresh.php').fadeIn("slow");
}, 5000);
</script>


</body>

- Ariën -

15-03-2021 14:51 gewijzigd op 15-03-2021 14:53

Kijk goed naar refresh.php.
Niet zomaar iets copy-pasten. ;-)

Verder hoef je in index.php niet nogmaals de data op te halen. Dat doet refresh.php al.

K Kevin Hettema

15-03-2021 14:54

refresh.php



<div id="radioDetails" class="radioDetails">
<b>Listeners:</b>16<br/>
<b>Listener Peak:</b>27<br/>
<b>Total Stream Hits:</b>497885<br/>
<?php
echo "<b>Tijd:</b>" . date("H:i:s") . "</br/>";
?>

[size=xsmall]Toevoeging op 15/03/2021 14:54:41:[/size]

Arién aangepast :)

- Ariën -

15-03-2021 15:06 gewijzigd op 15-03-2021 15:16

Als jij altijd uit wil gaan van 16 luisteraars met een maximaal gemeten piek van 27, vind ik dat ook goed ;-)

Je kan ook de inhoud van <div id="listeners"> en </div> leeghouden. Die wordt door je AJAX-request om refresh.php in te laden automatisch gevuld.

In refresh.php zorg je dus dat je alle data (en dus niet de statische ;-) ) ophaalt.

K Kevin Hettema

15-03-2021 15:27


<div id="" class="listeners">
<b>Listeners:</b><br/>
<b>Listener Peak:</b><br/>
<b>Total Stream Hits:</b><br/>
<?php
echo "<b>Tijd:</b>" . date("H:i:s") . "</br/>";
?>

[size=xsmall]Toevoeging op 15/03/2021 15:27:29:[/size]

Zo dus arién

[size=xsmall]Toevoeging op 15/03/2021 15:29:24:[/size]

nee werkt zo ook niet.
het enige wat goed gaat is dat hij tijd aangeeft.

- Ariën -

15-03-2021 15:30 gewijzigd op 15-03-2021 15:36

Nee. Ik bedoel de inhoud tussen de start- en sluittag in je index.php. Niet je HTML-tag zelf.

Verder is je aantal luisteraars en aantal hits nu leeg, maar dat had je denk ik al in de gaten. Die worden niet automatisch gevuld, en dat mag jij doen.

Het komt erop neer dat refresh.php alle zaken voor wat betreft het ophalen van je data overneemt.

K Kevin Hettema

15-03-2021 15:47

Yep dat begreep ik.
Alleen ik krijg de data er niet op.
dit is voor mij al dag 3 ik ben er nu wel klaar mee.
bedankt voor jullie hulp.
ga even kijken op sitedeals

- Ariën -

15-03-2021 15:49 gewijzigd op 15-03-2021 15:50

Je kan ook hier evt een vacature-topic aanmaken als het echt niet lukt.
Anders kan ik nog wel even een 1-2-3 stappenplan plaatsen.

Dan wordt het een stuk duidelijker.

K Kevin Hettema

15-03-2021 16:09

Ik heb nu al zo vaak geprobeerd.
Dat mn website nu een foutcode geeft.
Dus ik leg het even neer.
507 fout te vaak geprobeerd.

Dat zou geweldig zijn !
Anders kan ik nog wel even een 1-2-3 stappenplan plaatsen.

- Ariën -

15-03-2021 16:41 gewijzigd op 15-03-2021 16:49

Dan moet je even een backup terugzetten ;-)
Het is raadzaam om NOOIT live op je productie-site te werken, want je wilt je bezoekers niet voorzien van rare gebeurtenissen en errors. Iets testen doe je op een afgesloten kopie van je site (vaak bereikbaar via een apart subdomein zoals https://test.jouwsite.nl), of lokaal op je eigen computer.

Let's go.....

Ik ga er in dit voorbeeld vanuit dat je enkel je tabel-overzicht met luisteraars wilt laten refreshen.

Dit is je index.php pagina. Deze is gestript van alle PHP-code die de hele lijst ophaalt, want dat is vanaf nu werk voor een PHP-script (refresh.php) wat elke vijf seconden (5000 milliseconden) wordt opgevraagd en elke vijf seconden dus in je HTML-element ID listeners geplaatst wordt.


<?php
header("Cache-Control: private, no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>BesteHitsNL - DJ TELLER</title>
    <link rel="stylesheet" href="./style.css">

</head>
 <body>

    <div id="topbuts">
        <a class="btn" href="./index.php">Ververs</a>
        <a class="btn" href="./log_listeners.php" target="_blank">Listeners Updates / Peaks</a>
       server</a>
        <div class="clearfix"></div>
    </div>
    <?php include ('array.php');?>
     <div class="content">
    <br />
        <?php
            $peak = file_get_contents ('peak.txt');
            if ($data['status'] != '1')
            {
                echo '<b>Error: Servers Offline...</b>';
            }
        ?>
        <br />

        <div class="box">
            <div class="head"><i class="icon-play-circle"></i> &nbsp; BesteHitsNL - All Icecast & Shoutcast servers</div>
            <div class="box-content">
                <div class="radioLogo">
                    <img src="logo120.png">
                </div>
                <div class="radioDetails">
                     <b>Listeners:</b> <?php echo $data['listeners']; ?> <br />
                    <b>Listener Peak:</b> <?php echo $peak; ?> <br />
                    <b>Total Stream Hits:</b> <?php echo $data['hits']; ?> <br />
                </div>
                <div class="clearfix" style="border-bottom: 1px solid #C8C8C8;"></div>
                <div class="listener">
                    <div class="col">Hostname</div>
                    <div class="col">Useragent (Player)</div>
                    <div class="col">Listen Time</div>
                    <div class="col">Server</div>
                    <div class="col">Location</div>
                </div>
                
                <div id="listeners"> </div>
            </div>
        </div>
        <br /><br />
    </div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
  $('#listeners').fadeout('slow').load('refresh.php').fadeIn("slow");
}, 5000);
</script>
</body>

En dan hebben de refresh.php. Dat is niets anders dan de gestripte code die eerst op index.php stond die de lijst opvroeg:


<?php
include ('array.php'); 

if (is_array($data['listeners-list']))
{
    foreach ($data['listeners-list'] as $list)
    {
        $ip = $list['HOSTNAME'];
        if ($ip == '127.0.0.1')
        {
            $LocationString = 'Localhost';
        }
        else
        {
            $ipInfo = grabIpInfo($ip);
            $ipJsonInfo = json_decode($ipInfo);
            $LocationString = $ipJsonInfo->name;
        }
        echo '<div class="listener">
                                <div class="col">' . $list['HOSTNAME'] . '</div>
                                <div class="col">' . $list['USERAGENT'] . '</div>
                                <div class="col">' . floor($list['CONNECTTIME'] / 3600) . "h " . floor(($list['CONNECTTIME'] / 60) % 60) . "m " . floor($list['CONNECTTIME'] % 60) . "s" . '</div>
                                <div class="col">' . $list['SERVER'] . '</div>
                                <div class="col">' . $LocationString . '</div>
                                </div>';
    }
}
function grabIpInfo($ip)
{
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $returnData = curl_exec($curl);
    curl_close($curl);
    return $returnData;
}

?>

Verder heb ik het niet uitgetest, maar met het kopiëren van de PHP-code neem ik aan dat hier geen wijzigingen zijn aangebracht sinds dat het topic bestaat.

Als je het aantal luisteraars automatisch wilt refreshen, dan moet je op dezelfde manier werken:

- Maak een apart script (radiodata_refresh.php) aan die het aantal luisteraars, het piekaantal en de streamhits op simplistische wijze toont.

- Maak in index.php het bestaande veld daarvan leeg: <div class="radioDetails"> </div>

- Gebruik dezelfde code (met andere variabele auto_refresh) als dat je ook gebruikt voor je lijst, maar dan roep je radiodata_refresh.php op .radioDetails (class radioDetails)

Reageren

Inloggen om te reageren