Selasa, 20 September 2011

Comet menggunakan Codeigniter dan JQuery



Comet menggunakan Codeigniter dan JQuery

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

0 comments:

Poskan Komentar