Comet menggunakan Codeigniter dan JQuery

Posted on August 7th, 2009 in Blog by ibnoe Discuss this article »

comet_by_gosia 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



Artikel yang berhubungan

Tags:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses Add your own

  1. gecko says:
    August 7, 2009 at 8:53 pm

    cpu load lebih kecil dari ajax? Kalo bener ini yg gw cari

  2. idham says:
    August 13, 2009 at 1:18 pm

    wew tambah keren aja neh tutorialnya

  3. ibnoe says:
    August 13, 2009 at 2:55 pm

    huhuhu ada kk idham… makasih dah main2 kesini :D

  4. cilovers says:
    August 31, 2009 at 12:20 pm

    thxss banyak kk ibnoe…..

  5. ibnoe says:
    September 1, 2009 at 9:50 am

    @cilovers: sama2 mas

  6. Amick says:
    September 23, 2009 at 8:23 am

    thxss banyal ki ibhoe…..;

  7. mown says:
    October 5, 2009 at 9:31 pm

    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

  8. ibnoe says:
    October 5, 2009 at 10:19 pm

    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

  9. arifdeni says:
    October 6, 2009 at 11:00 am

    wah keren, nice post!

  10. idham says:
    October 11, 2009 at 6:55 pm

    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 :)

  11. Titus says:
    December 26, 2009 at 10:06 pm

    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!

  12. Taufik Ramdani says:
    February 3, 2010 at 7:09 pm

    apa APE (Ajax Push Engine) dan Comet itu sama aja, atau gimana ya

  13. ibnoe says:
    February 8, 2010 at 9:43 pm

    kurang tau juga mas baru dengan istilah itu. tapi kalo comet itu kata lainnya adalah reverse ajax dimana server yang memberikan perubahan ke client..

Leave a Reply