Apa itu websocket ? Websocket adalah protokol komunikasi pada komputer yang memungkinkan komunikasi 2 arah pada satu koneksi TCP (wikipedia & translate by google).

Manfaat WebSocket (source: Codepolitan)

  1. Websocket memungkinkan server untuk mendorong data kepada klien yang terhubung (http biasanya client meminta terlebih dahulu baru server memberikan data yang diminta)
  2. Mengurangi traffic atau lalu lintas jaringan yang tidak perlu dan latency menggunakan full duplex melalui koneksi tunggal.
  3. Streaming melalui proxy dan firewall, mendukung komunikasi simultan hulu dan hilir.
  4. Kompatibel dengan pre-WebSocket dunia dengan cara beralih dari koneksi HTTP ke WebSockets.

Sampai saat ini untuk aplikasi realtime saya biasanya menggunakan AJAX (panggil ajax setiap sekian detik). Mungkin bisa dibayangkan jika polling ajax tiap 5 detik dan client yang terhubung mencapai ratusan sementara tidak ada perubahan data, sudah berapa trafik yg dipakai ?

Saya akan mencoba mengembangkan aplikasi CRUD SEDERHANA yang saya tulis sebelumnya dengan WebSocket dari https://github.com/Flynsarmy/PHPWebSocket-Chat.

Dengan ini kita bisa mengembangkan sistem yang lebih lengkap misalnya DASHBOARD REALTIME bisa berupa data maupun grafik. Logika dari aplikasi ini:

  1. Server harus dijalankan agar client dapat terhubung
  2. Client1, Hallo Server saya terhubung dengan kamu
  3. Client2, Hallo Server saya terhubung dengan kamu
  4. Client3, Hallo Server saya terhubung dengan kamu
  5. Client2 insert/update/delete data, kirim info ke server
  6. Server, ada perubahan data dari Client2, beritahukan ke Client1 & Client3
  7. Client1 & Client3, saya terima info dari server  & apa yang harus saya lakukan ? refresh, redirect, atau exit ?

Langkah-langkahnya (ingat CRUD SEDERHANA):

- Pada index.html, tambahkan source javascript

<script src="/jquery.min.js"></script>
<script src="/websocket/fancywebsocket.js"></script>

 - Lalu diantara tag <script></script>, sebelum seluruh coding DHTMLX tambahkan

//Define websocket server
var Server;
Server = new FancyWebSocket('ws://127.0.0.1:9300');
Server.bind('message', function( payload ) {
	switch (payload) {
		case 'grid':
			myGrid.clearAndLoad("grid.php");
			dhtmlx.message('Data Changed');
			break;
	}
});

Server.connect();

 

 - Terakhir pada index.html di bagian Event "onAfterUpdate" (saat insert/delete/update data oleh Form), tambahkan bagian ini supaya client yang bersangkutan mengirim info ke server bahwa dia telah melakukan perubahan data, sehingga server akan memberikan info kepada client lainnya selain client yang melakukan perubahan data tersebut

Server.send( 'message', 'grid' );

 

 - Adapun isi file server.php yang nantinya akan di eksekusi dengan perintah php server.php

<?php
// prevent the server from timing out
set_time_limit(0);

// include the web sockets server script (the server is started at the far bottom of this file)
require 'class.PHPWebSocket.php';

// when a client sends data to the server
function wsOnMessage($clientID, $message, $messageLength, $binary) {
	global $Server;
	
	// check if message length is 0
	if ($messageLength == 0) {
		$Server->wsClose($clientID);
		return;
	}
	
	if ( sizeof($Server->wsClients) != 1 ) {
		//Send the message to everyone but the person who said it
		foreach ( $Server->wsClients as $id => $client ) {
			if ( $id != $clientID ) {
				$Server->wsSend($id, $message);
			}
		}
	}	
		
}

// when a client connects
function wsOnOpen($clientID)
{
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has connected." );
}

// when a client closes or lost connection
function wsOnClose($clientID, $status) {
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has disconnected." );
}

// start the server
$Server = new PHPWebSocket();
$Server->bind('message', 'wsOnMessage');
$Server->bind('open', 'wsOnOpen');
$Server->bind('close', 'wsOnClose');
// for other computers to connect, you will probably need to change this to your LAN IP or external IP,
// alternatively use: gethostbyaddr(gethostbyname($_SERVER['SERVER_NAME']))
$Server->wsStartServer('127.0.0.1', 9300);

?>

PREVIEW

- Atas Windows 10 & Bawah Linux Mint VMWare

Realtime App WebSocket

 

DEMO (Buka 2 atau 3 tab, Edit data di salah satunya. Lalu lihat perubahan di tab lainnya tanpa refresh page)

Tidak DIJAMIN bisa running di website saya karena harus menjadi WebSocket Server 

(Untuk lebih pasti silahkan download SOURCE lalu extract dan jalankan server.php dalam directory websocket dengan perintah "php server.php" di command line) , jadi localhost anda menjadi websocket server. Kemudian dari browser akses index.html - buka di 2 atau 3 tab lalu ubah data di salah satunya. yang lain akan refresh begitu ada perubahan data tanpa reload page

- Silahkan ubah IP Address websocket server pada bagian akhir server.php & bagian awal index.html apabila ingin diakses oleh komputer lain (disini saya buat 127.0.0.1)

 

SOURCE

 

 

Comments  

Tobing
0 #2 Tobing 2017-10-06 13:16
Quoting haka:
Maksud dari :

jalankan server.php dalam directory websocket dengan perintah "php server.php" di command line

caranya gmn Om?

thx


Itu server websocketnya bro, sama kayak server apache kan harus dijalankan dulu httpd.exe ( bedanya kalo pake xampp, anda cuma klik START & STOP)

Jadi setiap ada request dr client nanti yang proses ya httpd.exe ini..

Sama kayak websocket, nanti server ini (php server.php) yang akan memproses permintaan web socket..

Cek dahulu apa anda bisa jalankan php dr command prompt, kalo tidak bisa ya dimana posisi php.exe misalnya
C:\xampp\php\bin\php c:\websocket\server.php
Quote
haka
0 #1 haka 2017-10-06 13:02
Maksud dari :

jalankan server.php dalam directory websocket dengan perintah "php server.php" di command line

caranya gmn Om?

thx
Quote

Add comment


Security code
Refresh

Tutorial DHTMLX

29 Agu 2015 07:33
1. Konstruksi DHTMLX
30 Agu 2015 07:33
2. CRUD sederhana
01 Sep 2015 10:08
3. Toko Online
02 Sep 2015 10:11
4. Galeri Gambar
03 Sep 2015 05:30
5. Grafik
04 Sep 2015 07:33
6. Export Grid

Visitor

Indonesia 79.3% Indonesia
United States 9.3% USA
Singapore 2.6% Singapore

Total:

56

Countries
002890
Today: 9
This Week: 9
This Month: 122