lifelong learner — urip iku urup, currently working on accenture.

Node js + Socket io – setup client-server

0
Degananda.com -

Perhatian! Ulasan ini dibuat berdasarkan tutorial pada : https://socket.io/get-started/chat/ dengan beberapa modifikasi agar lebih memudahkan dalam dipelajari.

Aplikasi yang akan dibuat disini adalah sebuah chat realtime dengan menggunakan socket.io. Socket.io adalah modul yang berfungsi untuk membuat pertukaran data secara realtime pada platform tertentu. Misalnya node.js. Realtime berarti ketika terjadi perubahan data pada server maka client langsung mendapatkan data terbaru tanpa harus melakukan refresh pada browser/aplikasi. Modul yang digunakan adalah :

  1. express, sebagai framework yang berfungsi untuk menghandle segala sesuatu yang berhubungan dengan http. Misalnya routing, request, mengirimkan data ke client dsb.
  2. socket.io , menjadikan pertukaran data

1. Membuat project nodejs

npm init

2. Setup express

// load module
var express = require('express');

// mendefinisikan port express
var port = process.env.port || 7768;

// membuat instances express dan seting port
var app = express();

app.listen(port, function(err){
    console.log('running on port : ' + port);
});
pada ulasan ini port yang digunakan adalah 7768, anda bebas memilih nomor port asalkan port tersebut terbuka dan tidak sedang digunakan oleh aplikasi lainnya.

3. Membuat router get untuk path “/”

kita membutuhkan router yang menerima http get pada path “/” atau default saat ip dari server nodejs diakses. Tujuannya untuk mengirim html yang nantinnya terdapat form dan isi dari chat.

app.get('/', function(req, res){
    res.sendFile(__dirname+'/app.html');
});

untuk menjalankan nodejs kami sarankan menggunakan nodemon(npm install -g nodemon) untuk auto reload & compile.

nodemon ./script.js localhost port

4. Menghubungkan socket.io server dengan socket.io pada client

kita harus memanggil dua buah modul yakni pada client dan server. Pada server kita harus mengubah server http yang sebelumnya kita buat dengan menggunakan express menjadi sebuah instances http baru dengan socket io.

// load module
var express = require('express');

// mendefinisikan port express
var port = process.env.port || 7768;

// membuat instances express dan seting port
var app = express();

//  memanggil modul http dan membuat server dengan express , digunakan oleh socket.io
var http = require('http').createServer(app)
// membuat intances socket io berdasarkan http instances diatas, http instances dibuat berdasarkan rules express
var socketApp = require('socket.io')(http);


app.get('/', function(req, res){
    res.sendFile(__dirname+'/app.html');
});

// mengecek apakah socket io telah terkoneksi dengan nodejs(client-server)
socketApp.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(port, function(){
    console.log('running on port : ' + port);
});

penjelasan kode :

  • Express digunakan untuk menghandle routing(client), sedangkan socket io dapat beroperasi dengan menggunakan http instances oleh karena itu kita membutuhkan http instances yang dibuat berdasarkan listener dari express(Express hanya digunakan untuk request listener). Sehingga, server dijalankan(listen)  bukan dari express melainkan dari http instances.
    http.listen(port, function(){
        console.log('running on port : ' + port);
    });
    
  • .on pada instances socket io berfungsi sebagai listener, akan mengupdate jika ada user (client) baru yang terkoneksi.
  • Pada ulasan ini client dan server ini berada dalam satu server yang sama(nodejs) bukan lintas platform.

5. Testing

refresh browser dan jika pada console terminal(node.js) muncul log “a user connection” maka client-server socket.io telah berhasil terhubung.