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

Related Posts:

  • 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 men… Read More
  • Jurnal Penelitian PEMANFAATAN TEKNOLOGI QR CODE DAN SMS GATEWAY DALAM PENGEMBANGAN SISTEM INFORMASI PENDAFTARAN CALON MAHASIWA BARU SECARA ONLINE PADA UNIVERSITAS ISLA… Read More
  • Memanfaatkan HTML 5 Untuk AlernMungkin judulnya agak kurang dimengerti oleh agan-agan sekalian. Tapi yang pasti ini adalah bagaimana cara kita memanfaat teknologi HMTL 5 agar user h… Read More
  • Buku Codeigniter Gratis Codeigniter merupakan salah satu framework terbaik yang ada saat ini. Banyak website-website besar telah menggunakan codeigniter sabagai framwork u… Read More
  • Export HTML to Excel From Jquery Salam pagi agan-agan sekalian, sudah lama saya tidak buka blog saya ni, ternyata sudah banya sarang laba-labanya. hehehehehhe Sesuai dengan juduln… Read More

0 comments:

Posting Komentar

http://www.resepkuekeringku.com/2014/11/resep-donat-empuk-ala-dunkin-donut.html http://www.resepkuekeringku.com/2015/03/resep-kue-cubit-coklat-enak-dan-sederhana.html http://www.resepkuekeringku.com/2014/10/resep-donat-kentang-empuk-lembut-dan-enak.html http://www.resepkuekeringku.com/2014/07/resep-es-krim-goreng-coklat-kriuk-mudah-dan-sederhana-dengan-saus-strawberry.html http://www.resepkuekeringku.com/2014/06/resep-kue-es-krim-goreng-enak-dan-mudah.html http://www.resepkuekeringku.com/2014/09/resep-bolu-karamel-panggang-sarang-semut-lembut.html