Comet adalah suatu teknik pengaksesan data dari webserver secara long-pooling. Artinya sebuah koneksi tidak ditutup tetapi di pool secara terus menerus. Keuntungannya load server jadi lebih ringan dan memori yang di gunakan stabil.
Berikut ini saya mencoba menggunakan codeigniter dan jquery untuk membuktikan teknik ini. riset ini belum proven. cuman coba2. hasilnya saya menemukan bahwa memori yang digunakan di sisi server relatif sama. dan ini dapat menghemat resource daripada di client melakukan pengecekan secara ajax berkala. dengan bantuan fungsi sleep untuk menjaga cpu load dan flush untuk menghilangkan buffer output. Di sisi client saya memaksa browser tidak mencache semua output yang di keluarkan. jadi kemungkinan bisa stabil di client juga.
code yang saya gunakan adalah sebagai berikut:
Buat Controller Comet.php
Buatlah controller comet.php yang berisi fungsi index dan backend. fungsi backend adalah callback yang akan kita panggil menggunakan frame. disana akan saya tampilkan waktu server dan memori yang dipake. Untuk menjaga agar memori dan cpu load tetap stabil maka saya menambahkan fungsi flush dan sleep (referensi saya)
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 | <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); /** * Comet class * * @package default * @author Ibnu Daqiqil Id **/ class Comet extends Controller { function __construct() { parent::__construct(); } /** * Index function * * @return void * @author Ibnu Daqiqil Id **/ function index() { $this->load->view('comet/comet_client'); } function backend() { header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); flush(); $header = $this->load->view('comet/comet_header',NULL,TRUE); echo $header; while(1) { echo '<script type="text/javascript">'; echo 'comet_client.print("Server Time : '.date('h:i:s').'<br> Loaded Memory :'.memory_get_usage().'");'; echo '</script>'; flush(); sleep(1); } } } // END Comet class /* End of file comet.php */ /* Location: /Applications/XAMPP/xamppfiles/htdocs/CodeIgniter_1.7.1/system/application/controllers/comet.php */ |
Buat Client View – comet_client.php
Pada view ini kita akan memanggil fungsi backend melalui sebuah iframe secara terus menerus, tetapi hanya menggunakan 1 koneksi.
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Comet demo client</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="<?=base_url();?>/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var comet =
{
ajax : false,
iframediv : false,
start: function()
{
if (navigator.appVersion.indexOf("MSIE") != -1) {
comet.ajax = new ActiveXObject("htmlfile");
comet.ajax.open();
comet.ajax.write("<html>");
comet.ajax.write("<script>document.domain = '"+document.domain+"'");
comet.ajax.write("</html>");
comet.ajax.close();
comet.iframediv = comet.ajax.createElement("div");
comet.ajax.appendChild(comet.iframediv);
comet.ajax.parentWindow.comet = comet;
comet.iframediv.innerHTML = "<iframe id='comet_iframe_inside' src='<?=site_url('comet/backend')?>'></iframe>";
} else {
comet.ajax = document.createElement('iframe');
comet.ajax.setAttribute('id', 'comet_iframe');
with (comet.ajax.style) {
left = top = "-100px";
height = width = "1px";
visibility = "hidden";
display = 'none';
}
comet.iframediv = document.createElement('iframe');
comet.iframediv.setAttribute('src', '<?=site_url('comet/backend')?>');
comet.ajax.appendChild(comet.iframediv);
document.body.appendChild(comet.ajax);
}
},
stop: function(){
$('#comet_iframe').html('');
},
print: function(param)
{
$("#content").html(param);
}
}
$(document).ready(function()
{
$("#start").click(function(){comet.start();});
$("#stop").click(function(){comet.stop();});
});
</script>
</head>
<body>
<input type="button" id="start" value="Start"><input type="button" id="stop" value="Stop">
<div id="content"></div>
</body>
</html> |
Backend header View – comet_header.php
ini view di backend yng berfungsi untuk mengirimkan output ke parent windowsnya. Untuk backend kita jangan menggunakan fungsi bawaan view untuk menampilkan karena ci akan menyimpanya sebagai variabel dulu baru di tampilkan. jadi kita harus menampilkan langsung di controllernya.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Backend Title</title> </head> <body> <script type="text/javascript"> var comet_client = window.parent.comet; </script> |
Anda dapat melihat Demonya di sini
cpu load lebih kecil dari ajax? Kalo bener ini yg gw cari
wew tambah keren aja neh tutorialnya
huhuhu ada kk idham... makasih dah main2 kesini :D
thxss banyak kk ibnoe.....
@cilovers: sama2 mas
thxss banyal ki ibhoe.....;
apa koneksi yang tidak ditutup ketika diakses oleh ribuan orang tidak menyebabkan server busy???
mohon pencerahannya.....
btw itu konsep dapet dari mana yach???? jadi penasaran
pada awal postingan saya katakan ini masih riset.. semua server ketika di akses ribuan pasti busy.. pilihannya adalah diakses secara terus menerus atau koneksi yang di pool. ex: ada 1000 user yang butuh data realtime. brati ada 1000 user yang terkoneksi secara bersamaan dan akan selalu melakukan koneksi lagi 1 menit berikutnya secara bersamaan. tidak semua content berubah dan boros bandwidth.
Lalu saya balikkan saya melakukan pooling 1000 koneksi dimana saya hanya mengirimkan output ketika ada "perubahan saja". jadi di script kita kita perintahkan cpu untuk sleep dan selalu memflush buffer output. jadi si server hanya mengirimkan perubahan.. dia akan idle jika tidak ada perubahan. idenya adalah server yang memberitahu client bahwa ada perubahan. bukan client yang minta setiap saat. ini masih riset. kalo percaya dengan hipotesa saya silakan di coba. saya blom punya data untuk riset itu. ini baru ide saja
wah keren, nice post!
baidewei baidewei ada bug neh kk ibnoe
dari demo (entah klo implementasi lainnya) ketika http://webwoorks.net/app/riset/index.php/comet di buka pertama kali di start request berjalan dan ketika di stop request berhenti, tapi untuk yang kedua kalinya (tanpa proses refresh page) setelah di start request tidak bisa di stop. Berhubung ilmu saya soal beginian masih cupu jadi gak bisa dapet penjelasan masalahnya dimana demo sudah saya coba di Browser Safari , Firefox dan Chrome (tapi di Mac) dan belum di coba di OS & Browser lain... Mohon penjelasannya mungkin ada temen2 yang kesulitan disini :)
Hmm... Kenapa ya setelah dicopas, kok gak jalan di server saya ya? Apa karena perbedaan konfigurasi server?
Boleh gak saia minta archive dari yang jalan? Penasaran niiiyyy.. :)
Thanks for the enlightenment!
apa APE (Ajax Push Engine) dan Comet itu sama aja, atau gimana ya
kurang tau juga mas baru dengan istilah itu. tapi kalo comet itu kata lainnya adalah reverse ajax dimana server yang memberikan perubahan ke client..
thx~ bagus nya tutorial kamu~ terima kasih ya~
Mas, mau tanya, bagaimana mengatasi maximum execution time di apache server agar dapat mensupport comet karena comet membutuhkan 'long-lived connection'
halo master salam kenal yah...saya masih new di ajax..
saya ingin mengimplementasikan coment ini,
kira-kira aplikasinya begini...
saya ingin push message ke semua client saya untuk menampilakan pengumuman2 terbaru..
setiap 5 atau 10 menit gimana caranya bos?
Salam kenal juga kk^^
admin saya masih awam bngt ini, bisa kasih tau alamt website yg lebih sederhana lagi gaaaa, klo ga website yg bisa praktek langsung gaaaa
Mm.. Mungkin tanda2nya kalo pake teknik ini, misal pake firebug ajax requestnya jadi muter terus itu ya? Bener ga? Kaya chatingan yang di facebook? Owh iya, postingannya keren bget mas..
mas Ibnoe,,sy msh gk paham konsep comet dgn ajax..
jadi klu ajax itu kita request ke server lalu secara otomatis server mengirim balasan,,lalu koneksi ditutup,,begitu mas ???
lalu klu comet itu sama tapi koneksi ke server tidak ditutup (alias dibuka terus) gitu mas ??
di forum,,mas ibnoe katakan...
"biasanya untuk mendapatkan output siclient harus menghubungi server. tetapi bisa dikatakan clientlah yang di hubungi server untuk menerima update"
bisa dijelaskan lagi mas..
makasih infonya...
artikel membangun!
bagus banged jadi bisa nyante dikit servernya.
trus ane pertanyaan, comet ini bisa dipake untuk implementasi grafik realtime gak bang... ???
kalau bisa, ditunggu ya bang artikel selanjutnya....
Thx,
Deni Sutaji
terima kasih sekali mas, atas tulisannya he..he... jadi saya bisa belajar banyak mengenai PHP tp gini mas, ajax comet itu kan sesuatu yang baru bagi saya(ckcakak..ckakak katrok ya mas), jadi bisa minta dikasih komentar penjelasan di setiap codenya he...he.. Makasih. maaf bila merepotkan...
oh ya mas, ada yang terlupa mengapa tombol stop pada Viewnya tidak berfungsi?? apa memang tidak bisa distop
kagak nongol bro programx...
knapa ya???
tambahan buat temen2 http://en.wikipedia.org/wiki/Comet_%28programming%29 :D
Excellent beat ! I wish to apprentice even as you amend your website, how can i subscribe for a weblog website? The account aided me a applicable deal. I had been a little bit familiar of this your broadcast offered vibrant clear concept
Artikelnya bagus banget nich,.,.
makasih udah share..
nitip link gan..
http://tuto-rial.com
Salam
mantapp... kalo ada sambungannya diposting lagi ya.. tq