contoh websocket

Contoh websocket Codeigniter disini

 

Apakah 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

- Inisialisasi

 

contoh websocket

 

- Atas Windows 10 & Bawah Linux Mint VMWare

Contoh Realtime App WebSocket

 

Websocket pada protocol https - wss

- Apabila menggunakan self signed certificate. Pastikan untuk add exception sertifikat tersebut

contoh websocket

- Enablekan module apache (proxy & proxy_wstunnel)

Pada Windows (xampp)

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

 Pada Linux (contoh Ubuntu), ketikkan kedua baris dibawah ini pada terminal console

a2enmod proxy
a2enmod proxy_wstunnel

Tambahkan code dibawah ini pada file configurasi apache (apache2.conf atau httpd.conf)

<IfModule mod_proxy.c>
    ProxyRequests Off
    ProxyPass "/tobingws/" "ws://127.0.0.1:9300/"
    ProxyPassReverse "/tobingws/" "ws://127.0.0.1:9300/"
</IfModule>

 

Setelah itu restart apache server

- Pada index.html ganti baris

Server = new FancyWebSocket('ws://127.0.0.1:9300');

 menjadi

Server = new FancyWebSocket('wss://127.0.0.1/tobingws/'); 


 http2 belum mendukung websocket (atau saya yang belum menemukan caranya)

 

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

Tidak DIJAMIN bisa di website saya karena harus menjalankan WebSocket Server ("php server.php") - Sudah ganti ke VPS kadang kena kill (maklum low budget VPS) (Pastikan sesuai gambar INISIALISASI untuk memastikan terhubung dengan websocket - status code 101 Switching Protocols)

(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 #12 Tobing 2019-05-15 07:57
Quoting Dias:
Gan, kalo mengirim data dari android ke web kasir apa bisa pake ini jg?


Cara android kasih respon ke websocket gmana gan.
Saya ga pernah develop android soalnya
Quote
Dias
0 #11 Dias 2019-05-13 04:32
Gan, kalo mengirim data dari android ke web kasir apa bisa pake ini jg?
Quote
Dias
0 #10 Dias 2019-05-13 04:31
Gan, kalau mngirim data realtime dari android ke web kasir bisa pake ini jg kah?
Quote
Tobing
0 #9 Tobing 2019-02-20 15:10
Quoting iyan:
kang muncul error ini, function kok undefined yaa...

PHP Fatal error: Uncaught Error: Call to undefined function socket_create() in D:\xampp\htdocs\dashboard\websocket\class.PHPWebSocket.php:103


Kalau menggunakan php terbaru socket extension perlu dihidupkan di php.ini

extension=php_sockets

lalu restart apache/php

cek phpinfo

Sockets Support enabled
Quote
iyan
0 #8 iyan 2019-02-19 09:42
kang muncul error ini, function kok undefined yaa...

PHP Fatal error: Uncaught Error: Call to undefined function socket_create() in D:\xampp\htdocs\dashboard\websocket\class.PHPWebSo cket.php:103
Quote
Rius
+1 #7 Rius 2019-01-24 17:32
oke gan,
akhirnya nemu di

stackoverflow.com/.../16608429#16608429

makasih yak,,, akhirnya acak lottre saya bisa digunakan tanpa request ajax yg lama-lama berat :-)
Quote
Tobing
0 #6 Tobing 2019-01-24 16:43
Quoting Rius:
oke gan keren,
nah kalau ingin konek ke servernya dari php gimana gan?

kalo ini kan konek menggunakan JS

Makasih


Kalau php yang saya ragukan itu dia reload page gan .Apa tidak disconnect dari websocket server ?
Kecuali savenya pakai ajax

Coba saja cari dokumentasi Ratchet (php websocket). Tapi terus terang saya belum pernah coba
Quote
Rius
0 #5 Rius 2019-01-24 16:36
oke gan keren,
nah kalau ingin konek ke servernya dari php gimana gan?

kalo ini kan konek menggunakan JS

Makasih
Quote
Tobing
0 #4 Tobing 2019-01-24 15:35
Quoting Rius:
Bagaimana kalau form tambahnya beda file gan?

thx


(Saya tambah 1 gambar baru biar lebih jelas)
Semua form letaknya di dalam web app. Jadi setiap web app anda diakses otomatis memanggil websocket (melapor ke websocket server "hai saya terhubung")

Lalu setiap ada action pada Form misalnya save data kirim message ke websocket server, dan kemudian server akan broadcast ke semua yang terhubung padanya bahwa telah terjadi perubahan data berdasarkan respon yg didapat (abc refresh form1.php, def refresh form2.php, ghi refresh form3.php)

-- index.html (menghubungi websocket)
|__form1.php (bila save beri respon abc)
|__form2.php (bila save beri respon def)
|__form3.php (bila save beri respon ghi)
Quote
Rius
0 #3 Rius 2019-01-24 00:32
Bagaimana kalau form tambahnya beda file gan?

thx
Quote
Add comment

Tutorial DHTMLX

15 Mar 2019 13:05
1. Konstruksi DHTMLX
22 Mar 2019 13:54
2. CRUD sederhana
15 Mar 2019 13:03
3. Toko Online
15 Mar 2019 13:02
4. Galeri Gambar
22 Mar 2019 13:53
5. Grafik
22 Mar 2019 13:52
6. Export Grid

Komponen DHTMLX - Javascript Web UI