Aplikasi chat berbasis web menggunakan Socket.io dan NodeJS – Part 2 | Goodpixelpro Tutorial

Goodpixelpro Tutorial – Pada kesempatan kali ini saya akan melanjutkan pengembangan aplikasi yang tertunda pada Part 1.

Server Logic

Seperti yang sudah saya jelaskan pada postingan sebelumnya, fungsionalitas server terdapat pada file “server.js“.

Pada file ini kita akan menambahkan kode untuk menghandle request Socket.io dari client (seperti yang telah di jelaskan sebelumnya Socket.io juga berjalan di client – pada kasus ini web browser)

Integrasikan Socket.io dengan meng-declare nya ke dalam kode sumber:

var express = require('express'), socketIO = require('socket.io'), app = express(), port = 3000 ;

Cari baris berikut:

app.listen(port, function(){ console.log('listening on *:' + port); });

dan rubah menjadi:

var server = app.listen(port, function(){ console.log('listening on *:' + port); }); /** * Setup socket.io server untuk meng-handle request * dari library socket.io yang berjalan pada browser */ var io = socketIO.listen(server);

Saat ini server Socket.io sudah siap menerima koneksi dari client. Socket.io adalah system yang
berbasis event (event-based) jadi untuk menerima koneksi dari client kita hanya harus membuat
event handler untuk event yang bernama “connection”.

io.on('connection', function (socket) { // Disini kita akan meng-handle client yang melakukan koneksi });

Selanjutnya tambahkan kode yang akan menerima pesan dari client dan mem-broadcast nya
ke semua client:

var users = []; var sockets = []; io.on('connection', function (socket) { socket.on('message', function(message){ if (message.type === 'text') { console.log('Text Message: ' + message.text); io.emit('message', message); } }); });

Jika anda perhatikan saya menggunakan method emit pada object io bukan pada object socket, ini bertujuan untuk mem-broadcast pesan ke semua client tidak hanya pada client yang mengirim pesan saja (sender).

Aplikasi juga harus menyimpan daftar user yang sedang online, dan mem-broadcast nya ke semua client. Untuk itu kita akan merubah sedikit kode di atas menjadi:

io.on('connection', function (socket) { socket.on('message', function(message){ if (message.type === 'user') { console.log('User connected: ' + message.user.name); users.push(message.user); sockets.push(socket); for (var i = 0; i < users.length; ++i) { io.emit('connected', users[i]); } } else if (message.type === 'text') { console.log('Text Message: ' + message.text); io.emit('message', message); } }); });

Ok, Selesai…

Not so fast :), ingat bahwa aplikasi ini terdiri dari dua bagian, kita juga harus menambahkan fungsionalitas dari sisi client.

Client Logic

Pertama-tama kita akan men-setup library Socket.io pada client.
Masukkan (include) library Socket.io pada file “index.html”:

Dan tambahkan kode berikut di bagian paling bawah body tag (sebelum ):

Yup, hanya ini yang di butuhkan untuk meng-setup library Socket.io di client, sangat mudah bukan!
Anda pasti bertanya-tanya kenapa saya me-refer ke "/socket.io/socket.io.js" pada include tag di atas,
sementara file tersebut tidak dapat di temukan pada root folder dari server. Ini karena Socket.io pada
sisi server akan otomatis membuat file tersebut (generated on-the-fly) saat server berjalan.

Untuk tujuan identifikasi client harus mengirim "username" pada saat pertama kali berjalan.
Tambahkan code berikut pada

Start typing and press Enter to search

Shopping Cart