Refresh data ajax
Pagina: « vorige 1 2 3 volgende »
thanks ga ik weer proberen
Met de spreekwoordelijke 'handdoek in de ring gooien' win je niks. Al het begin kan moeilijk zijn, maar je leert er uiteindelijk wel van.
Ik krijg nu valse info ervan:
https://www.bestehits.nl/radio/teller/index-reserve.php
Toevoeging op 15/03/2021 13:42:36:
88.99.58.156
WinampMPEG/5.50
68h 28m 7s
MP3 stream
Germany
Persoonlijk raad ik aan om niet elke elke 3 seconden een request te doen. Voor mensen met een beperkte databundel vliegt het er doorheen.
Gewijzigd op 15/03/2021 13:49:17 door - Ariën -
Nu zag ik dit als gegevens:
88.99.58.156
WinampMPEG/5.50
68h 28m 7s
MP3 stream
Germany
Wat staat er in peak.txt en array.php. Die lijken mij verantwoordelijk voor het ophalen van de data uit de streaming-server.
Zet dit in het refresh.php bestand. Of wat er verversts moet worden.
Code (php)
En dan met het JavaScript hier plaatsen
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
var auto_refresh = setInterval(
function()
{
$('#radioDetails'). fadeOut('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>
var auto_refresh = setInterval(
function()
{
$('#radioDetails'). fadeOut('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>
Gewijzigd op 15/03/2021 14:20:48 door Adoptive Solution
Uiteraard moet je zelf wel de juiste data ophalen, Kevin. ;-)
in listeners.txt de aantal luisteraars live
Toevoeging op 15/03/2021 14:32:40:
volgens mij moet ik ook GetStats.php ophalen
Als een medehelper in een topic statische data als voorbeeld aangeeft, dan moet je dus niet ervan uitgaan dat het bruikbare data is ;-)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?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> 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>
Gewijzigd op 15/03/2021 14:52:26 door Kevin Hettema
Niet zomaar iets copy-pasten. ;-)
Verder hoef je in index.php niet nogmaals de data op te halen. Dat doet refresh.php al.
Gewijzigd op 15/03/2021 14:53:33 door - Ariën -
Code (php)
Toevoeging op 15/03/2021 14:54:41:
Arién aangepast :)
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.
Gewijzigd op 15/03/2021 15:16:09 door - Ariën -
Code (php)
Toevoeging op 15/03/2021 15:27:29:
Zo dus arién
Toevoeging op 15/03/2021 15:29:24:
nee werkt zo ook niet.
het enige wat goed gaat is dat hij tijd aangeeft.
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.
Gewijzigd op 15/03/2021 15:36:59 door - Ariën -
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
Anders kan ik nog wel even een 1-2-3 stappenplan plaatsen.
Dan wordt het een stuk duidelijker.
Gewijzigd op 15/03/2021 15:50:20 door - Ariën -
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.
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?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> 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>
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> 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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?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;
}
?>
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)
Gewijzigd op 15/03/2021 16:49:23 door - Ariën -