Berikut ini merupakan contoh realtime notifikasi websocket codeigniter sederhana. Kita cuma menampilkan message (alert) dengan menggunakan dhtmlXMessage. Untuk contoh penggunaan lengkap websocket (ws) maupun websocket secure (wss) pada aplikasi DHTMLX silahkan melihat Realtime Web App dengan PHP Websocket

Saya menggunakan Codeginiter versi 3.1.10 dan library websocket dari https://github.com/Flynsarmy/PHPWebSocket-Chat. Langkah-langkahnya

1. Download CodeIgniter dan Library websocket, lalu extract ke root web directory misalnya kalau di Windows: C:\xampp\htdocs\ci-websocket

2. Create direktori public pada C:\xampp\htdocs\ci-websocket untuk menempatkan jquery, dhtmlxmessage dan websocket (websocket direktori dianjurkan diletakkan pada path yang tidak bisa diakses oleh public (web user), tetapi disini saya cuma sebagai contoh agar tidak terlalu rumit jika diletakkan dengan lokasi berbeda )

3. Berikut ini merupakan struktur direktori dari ci-websocket

Websocket Codeigniter 

- css untuk meletakkan message.css

- js untuk meletakkan message.js

- websocket direktori untuk library websocket https://github.com/Flynsarmy/PHPWebSocket-Chat

 

4. Pada application/config/autoload.php enablekan helper url

$autoload['helper'] = array('url');

5. Pada application/config/config.php ganti base_url

$config['base_url'] = 'http://localhost/ci-websocket/';

6. Selanjutnya pada application/view/welcome_message.php hapus seluruh isi dalam tag head & body. Pada tag head ganti dengan

<link rel="stylesheet" type="text/css" href="/<?php echo base_url()?>public/css/message.css">
<script src="/<?php echo base_url()?>public/js/message.js"></script>
<script src="/<?php echo base_url()?>public/js/jquery.min.js"></script>
<script src="/<?php echo base_url()?>public/websocket/fancywebsocket.js"></script>
<script>
	var Server;

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

	//tangkap apakah ada action dr client manapun
	Server.bind('message', function( payload ) {
	    switch (payload) {
	        case 'tobingmsg':
	           dhtmlx.message({
					'text': "From other at "+new Date().toLocaleString(),
					'expire': -1
				});
	           break;
	        case 'tobingerror':
	           dhtmlx.message({
					'text': "From other at "+new Date().toLocaleString(),
					'expire': -1,
					'type' : 'error',
				});
				break;   
	    }
	});
	 
	Server.connect();


	//kirim pesan tobingmsg
	function send() {
		//munculkan pesan buat diri sendiri
		dhtmlx.message({
			'text': "From you at "+new Date().toLocaleString(),
			'expire': -1
		});

		//sampaikan ke server bahwa telah terjadi action
		Server.send( 'message', 'tobingmsg' );
	}

	//kirim pesan tobingerror
	function senderror() {
		//munculkan pesan buat diri sendiri
		dhtmlx.message({
			'text': "From you at "+new Date().toLocaleString(),
			'expire': -1,
			'type' : 'error'
		});

		//sampaikan ke server bahwa telah terjadi action
		Server.send( 'message', 'tobingerror' );
	}
</script>

 Pada tag body tambahkan 2 button

<button id="send" onclick="send()">Send</button>
<button id="error" onclick="senderror()">Send Error</button>

 7. Isi lengkap file view welcome_message.php adalah

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="/<?php echo base_url()?>public/css/message.css">
	<script src="/<?php echo base_url()?>public/js/message.js"></script>
	<script src="/<?php echo base_url()?>public/js/jquery.min.js"></script>
	<script src="/<?php echo base_url()?>public/websocket/fancywebsocket.js"></script>
	<script>
		var Server;

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

		//tangkap apakah ada action dr client manapun
		Server.bind('message', function( payload ) {
		    switch (payload) {
		        case 'tobingmsg':
		           dhtmlx.message({
						'text': "From other at "+new Date().toLocaleString(),
						'expire': -1
					});
		           break;
		        case 'tobingerror':
		           dhtmlx.message({
						'text': "From other at "+new Date().toLocaleString(),
						'expire': -1,
						'type' : 'error',
					});
					break;   
		    }
		});
		 
		Server.connect();

		//kirim pesan tobingmsg
		function send() {
			//munculkan pesan buat diri sendiri
			dhtmlx.message({
				'text': "From you at "+new Date().toLocaleString(),
				'expire': -1
			});

			//sampaikan ke server bahwa telah terjadi action
			Server.send( 'message', 'tobingmsg' );
		}

		//kirim pesan tobingerror
		function senderror() {
			//munculkan pesan buat diri sendiri
			dhtmlx.message({
				'text': "From you at "+new Date().toLocaleString(),
				'expire': -1,
				'type' : 'error'
			});

			//sampaikan ke server bahwa telah terjadi action
			Server.send( 'message', 'tobingerror' );
		}
	</script>
</head>
<body>
	<button id="send" onclick="send()">Send</button>
	<button id="error" onclick="senderror()">Send Error</button>

</body>
</html>

 

 7. Selanjutnya jalankan websocket server yang pada direktori public/websocket dengan perintah "php server.php"

 8. Apabila websocket server selain localhost silahkan ubah IP Address & port pada bagian

    awal application/view/welcome_message.php

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

    akhir public/websocket/server.php

$Server->wsStartServer('127.0.0.1', 9300);

 

 Preview

Preview Contoh websocket codeigniter

 

DEMO (buka 2 tab/window klik tombol dan lihat perubahan di tab lain tanpa refresh )

SOURCE

 

Comments  
Tobing
0 #6 Tobing 2019-10-07 11:22
Quoting zake:
Quoting Tobing:
Quoting zake:
terima kasih ilmunyaa...

ada pertanyaan, bagaimana jika kirim pesan khusus untuk ID user tertentu, jadi websocket hanya kirim ke userID tertentu. tks

Payload nya. Dalam hal ini tobingmsg dan tobingerror. Bisa saja dibuat UserID+"msg"


boleh kalo ada contohnya :lol:


Di contoh saya tidak ada pakai login, jadi tidak bisa dapatkan userID.
Quote
zake
0 #5 zake 2019-10-07 10:47
Quoting Tobing:
Quoting zake:
terima kasih ilmunyaa...

ada pertanyaan, bagaimana jika kirim pesan khusus untuk ID user tertentu, jadi websocket hanya kirim ke userID tertentu. tks

Payload nya. Dalam hal ini tobingmsg dan tobingerror. Bisa saja dibuat UserID+"msg"


boleh kalo ada contohnya :lol:
Quote
Tobing
0 #4 Tobing 2019-10-07 10:43
Quoting zake:
terima kasih ilmunyaa...

ada pertanyaan, bagaimana jika kirim pesan khusus untuk ID user tertentu, jadi websocket hanya kirim ke userID tertentu. tks

Payload nya. Dalam hal ini tobingmsg dan tobingerror. Bisa saja dibuat UserID+"msg"

Perhatikan Server.bind dan Server.send pada code diatas
Quote
zake
0 #3 zake 2019-10-07 10:37
terima kasih ilmunyaa...

ada pertanyaan, bagaimana jika kirim pesan khusus untuk ID user tertentu, jadi websocket hanya kirim ke userID tertentu. tks
Quote
Tobing
0 #2 Tobing 2019-10-06 17:27
Quoting Duckett:
Your demo is not working . Check it.

Checked. Now is Working. Thanks
Quote
Duckett
+1 #1 Duckett 2019-10-06 17:08
Your demo is not working . Check it.
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