DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Membuat Realtime Data Chart Di Php Menggunakan Ratchet Websocket

advertisement
    
    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.
    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

Setelah kalian membuat file indexnya sekarang kita tinggal menjalankan servernya, ada dua cara yang bisa kalian lakukan.
Cara 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.
Cara 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 perinta 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. 
 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



2 komentar:

Silahkan berkomentar dengan baik dan bijak!