Tutorial Membuat Realtime Data Chart Di Php Menggunakan Ratchet Websocket

Realtime Data adalah  sebuah istilah komputasi dimana perubahan data yang terjadi pada sebuah server harus diketahui secara actual oleh client atau pada batasan waktu yang telah di tentukan. Ada tiga metode yang biasa di implementasikan, yaitu Pooling, Websocket dan Server-Sent Events. Untuk memahami istilah-istilah tersebut kalian bisa mebacara artikel Pooling vs Websocket vs SSE.

advertisement

Pada kesempatan kali ini kita akan fokus ke websocket dan mencoba mengimplementasikannya pada bahasa pemrograman  php dengan menggunakan ratchet websocket php. Ratchet adalah library websocket php untuk melayani pesan dua arah antara client dan server. Oke kita langsung saja ke tutorialnya.

Note: Saya mengasumsikan bahwa para pembaca sudah pamiliar dengan bahasa pemrogramman php oop (object oriented programming) dan paham penggunaan composer.

Instalasi

1. Buat folder dengan nama MyApp
2. Buat file bernama composer.json kemudina tulis code berikut di dalamnya
   

   {
       "autoload": {
           "psr-4": {
               "MyApp\\": "src"
           }
       },
       "require": {
           "cboden/ratchet": "^0.4"
       }
   }

3. Kemudian silahkan kalian buka PowerSheel atau Cmd di folder MyAppnya dengan cara tekan shift dan klik kanan
   
4. Silahkan kalian ketik composer intall.
   
   Jika instalasinya berhasil, harusnya sekarang sudah ada folder vendor di dalam project kita.
   

Implementasi

Disini saya akan coba mengimplementasikan ratchet untuk membuat chart jumlah data jenis kelamin sederhana.

1. Buat folder src didalam projectnya
2. Didalam folder src tadi silahkan buat file php class dengan nama Survey.php dan silahkan kalian tulis code berikut di dalamnya
   

   <?php
   namespace MyApp;
   use Ratchet\MessageComponentInterface;
   use Ratchet\ConnectionInterface;
   
   class Chart implements MessageComponentInterface {
       protected $clients;
       protected $male=0;
       protected $female=0;
       public function __construct() {
           $this->clients = new \SplObjectStorage;
       }
       public function onOpen(ConnectionInterface $conn) {
        	$this->clients->attach($conn);
           echo "New connection! ({$conn->resourceId})\n";
       }
       public function onMessage(ConnectionInterface $from, $msg) {
       	$numRecv = count($this->clients) - 1;
           echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n"
               , $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');
   
           foreach ($this->clients as $client) {
               if($msg == "male")
   					$this->male += 1;
   			elseif ($msg =="female")
   					$this->female += 1;
   			$msgSend =['male' => $this->male,'female' => $this->female];
               $client->send(json_encode($msgSend));
           }
       }
       public function onClose(ConnectionInterface $conn) {
       	$this->clients->detach($conn);
           echo "Connection {$conn->resourceId} has disconnected\n";
       }
       public function onError(ConnectionInterface $conn, \Exception $e) {
       	echo "An error has occurred: {$e->getMessage()}\n";
           $conn->close();
       }
   }

   Penjelasan: Disini kita akan mengimplementasinkan class interface MessageComponentInterface, MessageComponentInterface sendiri memiliki beberapa callback methode yang bisa kita gunakan yaitu onOpen, onMessage, onClose dan onError.
   onOpen adalah callback yang akan dipanggil ketika ada client baru yang terkoneksi.
   onMessage adalah callback yang akan di panggi ketika ada message yang dikirim oleh client
   onClose adalah callback yang akan di panggil ketika koneksi client terputus
   onError adalah callback yang akan di panggil ketika terjadi error
   
   Websocket tidak dapat membroadcast message secara langsung ke semua client karena websocket beroprasi pada koneksi TCP/IP. Sehingga pada callback onMessage, kita mencoba membroadcast message tadi dengan melooping setiap client yang terkoneksi dan mengirimkan message ke client tersebut, penjelasannya di tunjukan pada code berikut,

   foreach ($this->clients as $client) {
       .....
       $client->send(json_encode($msgSend));
   }

3. Sekarang kita akan buat servernya, silahkan kalian buat file bernama server.php dan didalamnya silahkan tulis code berikut
   

   <?php
   use Ratchet\Server\IoServer;
   use Ratchet\Http\HttpServer;
   use Ratchet\WebSocket\WsServer;
   use MyApp\Chat;
   
       require dirname(__DIR__) . '/vendor/autoload.php';
   
       $server = IoServer::factory(
           new HttpServer(
               new WsServer(
                   new Chart ()// Nama class php yang sudah kita buat tadi
               )
           ),
           8080
       );
   
       $server->run();

   
   Penjelasan: file server.php ini lah yang akan kita panggil nantinya (via composer atau browser), untuk menghandle semua client yang terkoneksi.
4. Sekarang kita beralih pada sisi clientnya, buat sebuah file index.html, disini kita menggunakan canvasjs untuk membuat chart nya. Silahkan tulis code berikut, 
   

   <!DOCTYPE HTML>
   <html>
   <head>
   <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
   </head>
   <body>
   <div style="width: 50%;margin:0 auto;text-align:center">
   <div id="chartContainer" style="height:330px"></div>
   <hr/>
   <button onclick="sendData('male');">Saya Laki-Laki</button>
   <button onclick="sendData('female');">Saya Perempuan</button>
   </div>
   <script type="text/javascript">
   	var chart = new CanvasJS.Chart("chartContainer");//CanvasJs
   	var conn = new WebSocket('ws://localhost:8080');//Websocket
   	conn.onopen = function(e) {
   		console.log("Connection established!");
   		conn.send("");
   	};
   	conn.onmessage = function(e) {
   		var obj = JSON.parse(e.data);
   		console.log(obj);
   		var male = obj.male;
   		var female = obj.female;
   		chart.options = {
   			title:{ text: "Jumlah Laki-Laki Dan Perempuan"},
   			data: [{ dataPoints: [{ label: "Laki-laki",  y: male  }, { label: "Perempuan", y: female  } ] } ]
   		};
   		chart.render();
   	};
   	function sendData(data){ conn.send(data); }
   </script>
   </body>
   </html>

   Penjelasan: Kunci utama untuk menjalankan websocket di sisi client adalah code javascript berikut

   var conn = new WebSocket('ws://localhost:8080');//link websocket
   conn.onopen = function(e) //Membuat koneksi
   {
       console.log("Connection established!");
   };
   conn.onmessage = function(e) //Callback ketika ada pesan yang dikirim oleh server
   {
       console.log(e.data);
   };
   conn.send("data")//cara mengirim data

Cara Menjalankannya

advertisement

Setelah kalian membuat file indexnya sekarang kita tinggal menjalankan servernya, ada dua cara yang bisa kalian lakukan.

1. Memanggilnya file server.php lewat browser.
   Cara ini tidak disarankan, karena server websocket tidak bisa dimatikan kecuali dengan mematikan apache servicenya. Namun jika kalian tetap ingin menggunakan methode ini, silahkan kalian masukan project MyApp tadi dalam folder htdoc(jika menggunakan xampp). Dan kemudian akses file server.php yang sudah kita buat tadi
   
   Dan silahkan kalian tutup tab browsernya, karena server.php sudah berjalan di apache service.
2. Menggunakan composer
   Cara inilah yang disarankan karena kita menjalankan file server.php lewat command prompt atau PowerSheel, dan tentu lebih aman. Caranya tinggal jalankan cmd nya dengan cara tekan shift dan klik kanan di derektori server.php.
   
   Kemudian silahkan tulis perintah berikut
   php server.php
   
   
   

Setelah server di jalankan sekarang kita tinggal membuka file index.html lewat browser. Jika berhasil, maka hasilnya akan seperti berikut.

Kalo belum berhasil silahkan kalian periksa lagi step by step mungkin ada yang terlewatkan atau kalian kalian bisa download file projectnya di link berikut. 

>>Ratchet Tutorial<<

Sekian dulu postingan cara membuat realtime data chart menggunakan ratchet websocket library . Jangan lupa di share jika kalian merasa artikel ini bermanfaat, kalau ada pertanyaan silahkan tulis di kolom komentar. Good Luck! :)

advertisement