Tutorial Cara Menggunakan Socket.IO dan Express

Perkembangan teknologi web sudah semakin cepat, terlebih lagi pada perkembangan teknologi JavaScript. Kali ini saya akan sedikit membahas salah satu framework yang populer yaitu ExpressJS.

Berawal dari rasa penasaran dengan real time web application saya mulai mencobanya langsung dan mencari tahu dan akhirnya menemukan salah satu real time engine yang biasa digunakan dalam membangun real time web application yaitu Socket.io. Pada saat proses implementasinya saya menemukan masalah yang ternyata package socket.io tidak bisa langsung digunakan layaknya package aplikasi Node JS lainnya.

Dari hasil googling saya menemukan bahwa "Socket.io does not work with routes it works with sockets.". Lantas hal ini bukan berarti bahwa kita tidak bisa menggunakannya, tetapi yang perlu dilakukan yaitu modifikasi.

Mungkin dengan mencari keyword "Socket.io express" di google anda akan menemukan banyak artikel yang sudah menyertakan bagaimana cara modifikasi agar Socket.io bisa digunakan dalam aplikasi Express JS, dan saya juga akan menuliskan cara modifikasi yang saya sudah temukan dan berhasil berfungsi dalam aplikasi (cara ini berdasarkan hasil googling).

Saya menggunakan Express generator untuk membuat aplikasi Node JS. Pastikan sudah menginstall Node JS terlebih dahulu dan kemudian lakukan proses instalasi Express Generator dengan perintah berikut:

$ npm install express-generator

Kemudian buat project (saya ingin menggunakan handlebars sebagai template engine, gunakan --hbs) baru dengan perintah berikut:

$ express socketio-express --hbs

Lalu masuk ke direktori aplikasi install dependencies project yang baru dibuat:

$ cd socketio-express; npm install

Karena Socket.io merupakan package eksternal maka kita perlu menginstallnya, cukup dengan menjalankan perintah npm install socket.io tunggu hingga selesai.

Berikut ini daftar dependencies yang saya gunakan dalam contoh ini:

{
     "name": "socketio",
     "version": "0.0.0",
     "private": true,
     "scripts": {
          "start": "node ./bin/www"
     },
     "dependencies": {
          "body-parser": "~1.15.1",
          "cookie-parser": "~1.4.3",
          "debug": "~2.2.0",
          "express": "~4.13.4",
          "hbs": "~4.0.0",
         "morgan": "~1.7.0",
         "serve-favicon": "~2.3.0",
         "socket.io": "^1.7.2"
     }
}

Dari sini mari kita mulai proses modifikasi. Langkah pertama buka file app.js dan tambahkan 3 baris code berikut ini:

var socketio = require('socket.io');

var app = express();

// Socket.io
var io = socketio();
app.io = io;

// app.use('/', routes);
app.use('/', require('./routes/index')(app.io));

Cukup sampai disini, lalu simpan file tersebut. Lanjut langkah kedua, buka file bin/www dan tambahkan code berikut ini:

/**
* Create HTTP server.
*/

var server = http.createServer(app);

/**
* Socket.io
*/
var io = app.io;
io.listen(server);

Kemudian simpan lagi file tersebut. Kita lanjut ke langkah ketiga, buka file routes/index.js dan modifikasi menjadi seperti code dibawah ini:

// ====== change all this code to =======
// var express = require('express');
// var router = express.Router();

/* GET home page. */
// router.get('/', function(req, res, next) {
//      res.render('index', { title: 'Express' });
// });

// module.exports = router;

// ====== the following code =======
module.exports = function(io) {
//now you can use io.emit() in this file
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
     res.render('index', { title: 'Express' });
});
io.on('connection', function (socket) {
     socket.emit('news', { hello: 'world' });
     socket.on('my other event', function (data) {
          console.log(data);
     });
     console.log('A client connection occurred!');
});
     return router;
}

Lanjut ke langkah terakhir, buka file views/index.hbs dan modifikasi script seperti dibawah ini:

src="/socket.io/socket.io.js" // javascript tag source link
// socket.io in javascript tag
var socket = io();
socket.on('news', function (data) {
     console.log(data);
     socket.emit('my other event', { my: 'data'});
})

Setelah semua langkah ini dilakukan, mari kita coba jalankan aplikasinya dan jika berhasil akan tampak hasil seperti gambar berikut.

Click to zoom

Dari hasil gambar diatas menunjukkan bahwa aplikasi berjalan dengan lancar dan juga socket.io yang digunakan juga berfungsi dengan baik tanpa adanya error, dengan begitu kita dapat membuat aplikasi yang kita inginkan dengan menggunakan socket.io. Jika ada yang ingin ditanyakan ataupun mengkoreksi code diatas, silakan isi kolom komentar dibawah. Happy coding..