Rabu, 27 September 2017

Menghitung Pengunjung Online Realtime Auto Refresh

Setelah sebelumnya kita membahas tentang Menghitung Pengunjung Online Dengan PHP dan SQLite, maka sekarang ini kita akan mengembangkan kode sebelumnya menjadi lebih dinamis. Umumnya online visitor counter tidak menyediakan layanan untuk menghitung jumlah pengunjung online secara realtime. Sehingga membuat online visitor counter sendiri harus dilakukan jika ingin melihat visitor counter berjalan realtime. Maksud realtime adalah keterangan jumlah pengunjung online akan berubah atau refresh sendiri saat jumlah pengunjung online bertambah/berkurang.

Sebelum Anda bisa mencoba kode berikut, pastikan anda sudah membaca artikel berjudul Menghitung Pengunjung Online Dengan PHP dan SQLite. Artikel ini sebenarnya hanyalah pengembangan dari artikel tersebut.

Dari kode sebelumnya, kita hanya perlu mengubah javascript agar dapat melakukan refresh dalam kurun waktu tertentu. Di sini saya memilih interval 10.000 ms, sehingga jumlah pengunjung online akan diperbarui secara realtime tiap 10 detik.

Untuk mendukung proses realtime; fungsi refresh dengan setTimeout() yang disediakan javascript bisa digunakan. Prototype-nya adalah sebagai berikut.

setTimeout(function, interval);

Sehingga jika dikolaborasikan dengan script online visitor counter sebelumnya, hasilnya akan menjadi seperti berikut:


<div id='online'></div>
<script>
 function print_online(){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() { 
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    document.getElementById('online').innerHTML = xmlHttp.responseText + " pengguna online";
   }
  }
  xmlHttp.open("GET", "http://localhost/online.php", true);
  xmlHttp.send(null);
  setTimeout(print_online,10000);
 }
 print_online();
</script>

Tidak berbeda jauh, bukan?
Sangat simpel, hanya dengan menabahkkan beberapa baris kode di atas anda sudah bisa membuat realtime online visitor counter untuk website/blog anda. Selamat mencoba.
Load disqus comments

0 comments