Sekilas tentang komunikasi realtime dengan NodeJS?
Seperti yang telah dipaparkan di atas bahwa pada komunikasi antara server client pada umumnya dilakukan melalui protocol http hal tersebut menjadi cukup sulit untuk mengimplementasikan komunikasi realtime antara server dengan client. Namun dengan kehadiran teknologi baru seperti nodejs komunikasi realtime menjadi lebih mudah untuk diimlementasikan dengan bantuan socketio.Socket.IO adalah library jabascript untuk komunikasi realtime pada aplikasi web. Socket.IO memiliki dua bagian script yakni script client side yang di load dan dijalankan pada browser dan yang lainnya adalah script server side yang dieksekusi pada lingkungan nodejs, kedua bagian tersebut memiliki API yang tidak jauh berbeda.
Socket.IO memiliki kelebihan dibandingkan teknologi server push yang lainnya seperti polling di mana salah satunya adalah daripada client yang harus melakukan pengecekkan ke server setiap interval waktu tertentu/polling, sebaliknya sokcet.io server mampu meng-emit/memberikan data kepada client kapanpun selama komunikasi websocket antara client dengan server sudah terjadi.
Apa saja yang dibutuhkan dalam testing pada artikel ini?
Testing pada artikel ini membutuhkan1. Blog multi user: Blog ini tidak dibahas dalam artikel ini, anda bisa menggunakan aplikasi apapun selama memiliki kesamaan yakni menampilkan notifikasi secara realtime di user yang bersangkutan.
2. Redis: Redis digunakan untuk menyimpan jumlah notifikasi komentar baru untuk sebuah posting milik user tertentu. Selain itu redis juga digunakan untuk menangani komunikasi pub/sub antara redis client dari socket.io server dengan redis server.
3. NodeJS, Socket.IO, dan nodejs module redis: Digunakan untuk membangun socket.io server dan menangani komunikasi realtime dari sisi server pada nodejs.
4. JQuery: Digunakan untuk mempermudah modifikasi DOM element pada halaman web yang menampilkan notifikasi.
Penulisan Kode
Sebelum anda melangkah ke penulisan kode, ada baiknya anda mempersiapkan beberapa hal yakni:1. Persiapkan aplikasi yang akan dijadikan sebagai tempat di mana fitur notifikasi relatime ini akan digunakan, artikel ini menggunakan blog multiuser yang dikembangkan dengan CakePHP dan di host di lingkungan localhost.
2. Install redis server, nodejs, redis module dan socket.io module.
Kalau semua hal di atas sudah siap sekarang kita langsung saja untuk membahas bagaimana alur dari fitur notifikasi realtime.
1. Terdapat sebuah posting A yang dibuat oleh user A. User A login ke aplikasi dan berada pada halaman dahsboard-nya di mana notifikasi akan muncul.
2. User B membuka posting A dan menuliskan komentar pada posting A.
3. Notifikasi "1 komentar baru" harus muncul pada dashboard user A.
Ada beberapa script yang harus kita buat yaitu:
1. Script untuk read dan write jumlah notifikasi komentar baru ke Redis.
Baiklah yang paling pertama sekarang kita akan membuat/menambahkan script untuk read dan write notifikasi pada redis server. Blog yang dimana fitur ini dibuat dikembangkan dengan cakephp maka kita membutuhkan library php predis untuk mempermudah komunikasi antara php dengan redis server.Script ini akan ditambahkan pada bagian di mana user mensubmit komentarnya, berikut adalah bagian dari script tersebut:
function setRedisNotif($user_id=null) {
require APP.'vendors'.DS.'Predis/Autoloader.php';
Predis\Autoloader::register();
$client = new Predis\Client();
$client->hincrby('notification',$user_id,1);
$commentCountNotif = $client->hget('notification', $user_id );
$data = array('user_id'=>$user_id,'notification'=>$commentCountNotif);
$pub = $client->publish('notification',json_encode($data));
}2. Script socket.io server yang akan berkomunikasi dengan redis server dan socket.io client.
Script ini boleh dibilang adalah bagian inti dan dijalankan pada nodejs, berikut adalah script nya:var io = require('socket.io').listen(3000)
, redis = require("redis")
redisClient = redis.createClient();
io.sockets.on('connection', function (socket) {
socket.on('subscribe', function (data) {
socket.join(data.channel);
});
});
redisClient.on('ready', function() {
redisClient.subscribe('notification');
});
redisClient.on("message", function(channel, message){
var obj = JSON.parse(message);
var user_id = obj.user_id;
var resp = {'notif_count': obj.notification, 'channel':channel}
console.log(resp);
io.sockets.in(channel).emit(user_id, resp);
});3. Script socket.io client yang digunakan untuk menangani koneksi dengan socket.io server.
Script ini ditulis pada bagian view dan diload oleh browser. Sebelum menulis script ini silahkan tambahkan dulu user_id pada bagian head dari file html anda:<script type="text/javascript">
var USER_ID = <?php echo $user_id ?>;
</script>Kemudian load script socket.io client yang secara built in sudah ada pada socket.io
<script src="http://localhost:3000/socket.io/socket.io.js" type="text/javascript"></script>Setelah kedua script di atas sudah ditambahkan sekarang saatnya untuk menambahkan script socket.io yang akan mengandle komunikasi dengan socket.io server, berikut adalah script nya:
<script type="text/javascript">
var socket = io.connect('http://localhost:3000');
$(document).ready(function(){
socket.on('connect', function(data){
socket.emit('subscribe', {channel:'notification'});
});
socket.on(USER_ID, function (data) {
console.log(data);
if ( data.notif_count > 1 ) {
var text = 'new comments';
}else {
var text = 'new comment';
}
var html = '<strong>'+ data.notif_count +'</strong> '+text;
$('.notification-container a').html(html);
});
});
</script>Kesimpulan
Fitur notifikasi realtime sangat mudah dibuat dengan socket.io, namun ada beberapa hal yang mesti diperhatikan dari hal ini yaitu seperti scalabilitas serta security dari koneksi socket.io tersebut.Terimakasih dan semoga bermanfaat.
Tidak ada komentar:
Posting Komentar