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
- 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
DEMO (buka 2 tab/window klik tombol dan lihat perubahan di tab lain tanpa refresh )
