Implementasi Aplikasi Real-Time menggunakan Node.js

Di dunia yang sangat menghargai waktu, membuat aplikasi yang dapat berinteraksi dengan pengguna secara real-time menjadi tantangan tersendiri. Sebagian besar aplikasi yang kita lihat hari ini, entah itu aplikasi mobile, desktop, atau web, memiliki setidaknya satu fitur real-time yang disertakan. Sebagai contoh, messaging dan notifikasi adalah dua fitur real-time yang paling banyak digunakan. Pada artikel ini, kami akan membahas tentang pengembangan aplikasi messaging real-time menggunakan Node.js. Meskipun artikel ini akan fokus pada messaging, namun konsep nya dapat diterapkan untuk aplikasi lain.

Node.js adalah salah satu framework terbaik yang bisa digunakan untuk membangun aplikasi real-time karena memiliki fitur event-driven dan asynchronous. Sebelum membuat aplikasi real-time messaging ini, kita akan melihat aplikasi real-time apa saja yang dapat dibuat menggunakan Node.js.

Kapan kita perlu menggunakan fitur real-time?

Berikut adalah contoh-contoh penggunaan aplikasi real-time:

Real-time Messaging

Kita sudah familiar dengan penggunaan aplikasi messaging real-time, terutama di perangkat seluler, seperti Whatsapp, Facebook Messenger, dan berbagai aplikasi messaging lainnya. Namun, fitur ini tidak hanya digunakan untuk aplikasi messaging saja, kita juga bisa melihat fitur real-time messaging di aplikasi yang lain seperti gojek online, pemesanan makanan online (shopee food) dan aplikasi yang lain.

Real-time Notification Delivery

Mengaktifkan notifikasi real-time telah terbukti meningkatkan keterlibatan user dengan aplikasi. Karena inilah, hampir semua aplikasi sekarang memiliki fitur untuk mengirimkan notifikasi secara real-time kepada penggunanya.

Live Streaming

Aplikasi live streaming yang dapat berinteraksi dengan pengguna secara real-time menjadi semakin populer setelah platform media sosial mengintegrasikan streaming video. Instagram dan Facebook adalah contoh aplikasi yang sudah menggunakan fitur real-time pada streaming video mereka.

Real-time Tracking

Dengan diperkenalkannya aplikasi pemesanan online, seperti gojek dan grab, melacak lokasi kendaraan oleh pengguna secara real-time menjadi sebuah keharusan. Update posisi kendaraan secara real-time akan meningkatkan kegunaan dan keandalan aplikasi ini.

IoT Devices

Fitur real-time sangat penting untuk perangkat IoT. Data yang ditangkap oleh sensor yang ditempatkan di perangkat IoT ditransmisikan, diproses, dan ditampilkan ke pengguna dengan waktu delay yang sangat kecil. Karena sebagian besar input yang ditangkap oleh perangkat ini, seperti suhu dan pencahayaan, terus berubah seiring waktu. Jadi, aplikasi yang bekerja dengan perangkat IoT harus dapat menerima dan mengirim data secara real-time.

Bagaimana membangun sebuah aplikasi Real-time?

Apakah membangun aplikasi real-time berbeda dengan membangun aplikasi biasa? Jawabannya iya. Sebagai contoh, misalnya aplikasi messaging dimana pengguna dapat mengirim pesan secara real-time. Pesan-pesan ini akan muncul di aplikasi pengguna lain segera setelah dikirim.

Jika kita mengimplementasikan aplikasi ini seperti aplikasi web biasa, di mana pembaruan data hanya bisa dilakukan jika pengguna merefresh halaman web terlebih dahulu atau aplikasi harus mengirim AJAX request ke server dalam interval waktu yang singkat. Tentunya akan berdampak kurang baik bagi aplikasi kita. Yang pertama tidak user friendly dan yang kedua adalah pemborosan resource aplikasi. Oleh karena itu, kita harus memiliki metode berbeda untuk menerapkan aplikasi real-time.

Solusinya adalah WebSocket. WebSocket merupakan protokol komunikasi yang memungkinkan klien dan server untuk saling memulai komunikasi. Dengan kata lain, dengan WebSocket, server dapat mengirimkan data ke klien setiap saat tanpa klien harus meminta data terlebih dahulu. Kita juga tidak perlu membuat sebuah fungsi yang akan dijalankan secara kontinu dalam waktu singkat.

Jika kita membangun aplikasi real-time menggunakan Node, kita tidak perlu langsung menggunakan WebSocket API. Tetapi cukup menggunakan library Socket.io, yang merupakan API untuk WebSocket API. Library ini menyediakan implementasi WebSocket yang lebih sederhana. Dalam artikel ini, kita akan menggunakan Socket.io untuk membuat dan mengelola koneksi WebSocket antara klien dan server.

Membangun Aplikasi Messaging Real-time dengan Node.js

Setelah kita membahas tentang latar belakang pengembangan aplikasi real-time. Kita sekarang dapat membuat aplikasi real-time kita sendiri. Dalam artikel ini, kita akan membangun chatroom sederhana yang dapat digunakan pengguna untuk berkomunikasi dengan pengguna lain yang terkoneksi. Sejumlah pengguna dapat terhubung ke chatroom dan pesan yang dikirim satu pengguna akan langsung muncul dan terlihat oleh semua pengguna yang lain.

Berikut fitur2 yang akan kita buat di aplikasi chatroom:

• Ubah nama pengguna
• Kirim pesan
• Tampilkan status jika pengguna lain sedang mengetik pesan

Berikut langkah2 yang harus kita jalankan untuk membuat aplikasi chatroom.

Menyiapkan Environment Aplikasi

• Buat folder baru untuk aplikasi.
• Masuk ke dalam folder dan jalankan npm init untuk membuat file package.json.
• Set app.js sebagai skrip utama

Instal library yang diperlukan

Dalam artikel ini, kita menggunakan library express, ejs, socket.io, dan nodemon untuk membangun aplikasi. Berikut keterangan masing2 library.

• EJS dipakai sebagai template engine
• Socket.io digunakan untuk implementasi websocket API
• Nodemon adalah paket yang merestart server setiap kali ada perubahan pada kode aplikasi. Dengan menggunakan library ini kita tidak perlu melakukan restart server secara manual. Tidak seperti library yang lain, nodemon ini hanya digunakan sebagai library untuk pengembangan saja.

Jalankan script berikut untuk menginstall library yang diperlukan:

npm install express ejs socket.io --save
npm install nodemon --save-dev

Untuk menjalankan aplikasi dengan nodemon, kita harus menambahkan skrip start pada file package.json. Berikut tampilan file package.json

{
  "name": "chatapp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {    
    "start": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.3",
    "socket.io": "^4.4.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Membuat server chatroom

Hal pertama yang harus kita lakukan sebelum melakukan koneksi real-time adalah membuat server chatroom dengan menjalankan express di file app.js. Tambahkan kode berikut di file app.js:

const express = require('express')

const app = express()
app.use(express.static('public'))

const server = app.listen(process.env.PORT || 3000, () => {
    console.log('server is running')
})

Membuat tampilan chatroom

Sebuah aplikasi tanpa tampilan terkesan kurang bagus secara user experience atapun user interface. Oleh karena itu, kita perlu membuat tampilan chatroom agar lebih menarik. Disini kita menggunakan template engine EJS. Tambahkan kode berikut di file app.js

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index')  
});

Disini kita akan membuat tampilan chatroom sederhana, tetapi akan mencakup cara kerja koneksi ke server serta cara mengirim dan menerima sinyal soket. Untuk itu, mari kita membuat template ke folder views dengan nama index.ejs, dan tuliskan kode berikut.

<!DOCTYPE html>
<head>
    <title>Simple realtime chatroom</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="title">
            <h3>Realtime Chat Room</h3>
        </div>       
        <div class="card">
            <div class="card-header" id="divUsername">Anonymous</div>
            <div class="card-body">
                <div class="input-group">
                    <input type="text" class="form-control" id="username" placeholder="Change your username" >&nbsp;
                    <div class="input-group-append">
                        <button class="btn btn-warning" type="button" id="usernameBtn" onclick="changename()">Change</button>
                    </div>
                </div>
            </div>
            <div class="message-box">
                <ul class="list-group list-group-flush" id="message-list"></ul>
                <div class="info" id="info"></div>
            </div>
            
            <div class="card-footer">
                <div class="input-group">
                    <input type="text" class="form-control" id="message" placeholder="Send new message" onkeypress="logtyping(event)"> &nbsp;
                    <div class="input-group-append">
                        <button class="btn btn-success" type="button" id="messageBtn" onclick="sendchat()">Send</button>
                    </div>
                </div>
            </div>            
        </div>

    </div>    
    <!-- local -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/chatroom.js"></script>
</body>
</html>

Pada script diatas, kita membuat tombol dengan id messageBtn untuk mengirim pesan baru dan tombol lain dengan ID usernameBtn untuk mengubah nama pengguna. Default nama pengguna adalah Anonymous. Kita mengincludekan skrip socket.io dan chatroom.js di lokal.

Membuat koneksi websocket

Langkah berikutnya, kita dapat mulai membuat inisialisasi sockets.io. Untuk itu tambahkan kode berikut di file app.js.

const socketio = require('socket.io')
const io = socketio(server, {'transports': ['websocket', 'polling'], allowEIO3: true});
io.on('connection', socket => {
    socket.username = 'Anonymous'
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

Membuat fungsi untuk menghubungkan front-end dan server

Semua kode diatas masih belum melakukan apa-apa, tombolnya tidak akan berfungsi. Oleh karena itu, kita perlu membuat kode yang akan menghubungkan front-end dan server. Untuk itu, buat file Javascript baru bernama chatroom.js di dalam folder public/js. Berikut kode didalam file chatroom.js.

var socket = io();

Sekarang, kita sudah bisa menjalankan aplikasi chatroom. Untuk menjalankannya, ketikkan script berikut.

npm run start

Membuat fungsi untuk merubah username

Nama user default yang kita gunakan untuk adalah “Anonim”. Tetapi, dalam aplikasi ini, kita memberikan opsi kepada pengguna untuk mengubah namanya. Oleh karena itu, kita perlu membuat fungsi di back-end untuk mengubah nama user ketika front-end menjalankan event change_username. Tambahkan kode berikut untuk menghandle event change_username di app.js.

socket.on('change username', (data) => {
        socket.username = data;        
    });

Selanjutnya, kita perlu menyesuaikan front-end, sehingga ketika kita menekan tombol change username, aplikasi akan mengirimkan sinyal ke server dan merubah merubah nama user default. Hal ini dijalankan oleh fungsi changename yang dijalankan oleh event onclick pada tombol usernameBtn. Tambahkan kode berikut di dalam chatroom.js.

function changename() {
    var input = document.getElementById('username');    
    var curUsername =  document.getElementById('divUsername');          
    if (input.value) {
        socket.emit('change username', input.value);                
        curUsername.textContent = input.value;
        input.value = '';
    }
}  

Membuat fungsi untuk menghandle pengiriman pesan

Fitur selanjutnya yang akan kita buat adalah pengiriman pesan. Di sini front-end akan mengirimkan pesan melalui pada server, Selanjutnya server meneruskan pesan tersebut ke semua klien yang terhubung.

Pertama, kita akan menyiapkan fungsi sendchat pada event onclick di tombol messageBtn. Kemudian klien mengirimankan sinyal chat message pada server. Karena klien juga harus menerima pesan yang dikirim oleh pengguna lain, klien juga harus mempunyai event receive message di front-end dan menampilkan pesan tersebut. Untuk menambahkan fitur ini, kita bisa menambahkan kode berikut di server (app.js).

socket.on('chat message', (msg) => {
        // console.log('message: ' + msg);
        io.sockets.emit('receive message', {message: msg, username: socket.username})
        socket.broadcast.emit('typing done')        
    });

Agar klien bisa mengirim dan menerima pesan, tambahkan kode berikut di chatroom.js.

function sendchat() {
    var input = document.getElementById('message');    
    if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';        
    }
}

socket.on('receive message', data => {       
    var messageList = document.getElementById('message-list');  
    var listItem = document.createElement('li')
    listItem.textContent = data.username + ': ' + data.message
    listItem.classList.add('list-group-item')    
    messageList.appendChild(listItem);
});

Setiap kali event receive message terjadi di klien, kita mengubah DOM untuk menampilkan pesan ke layar. Sedangkan di sisi server, ketika menerima event chat message, kita perlu mengirimkan event receive message ke semua klien. Untuk itu kita menggunakan fungsi io.sockets.emit.

Untuk mengetesnya, kita dapat menggunakan dua browser terpisah lalu buka alamat chatroom (http://localhost:3000) dan mencoba fitur ganti nama, pengiriman pesan, dan melihat bagaimana pesan yang dikirim satu pengguna langsung muncul di browser pengguna yang lain. Berikut tampilan screenshot dengan menggunakan google chrome dan microsoft edge.

Informasi status sedang mengetik…

Sebagian besar aplikasi real-time messaging yang ada sekarang, memiliki fitur berupa teks sederhana yang mengatakan “pengguna X sedang mengetik …” setiap kali pengguna lain mengetik pesan. Fitur Ini akan menambahkan kesan real-time dan dapat meningkatkan user exprerience (UX). Lalu, bagaimana menambah fitur ini?

Pertama, kita perlu menambahkan fungsi logtyping yang akan dijalankan pada event onkeypress di inputan message. Setiap kali user mengetikan sesuatu pada inputan message, client akan mengirim event typing ke server. Kemudian server akan membroadcast event typing pada semua klien selain user yang sedang menuliskan pesan.

Untuk mengimplementasikan fitur ini, tambahkan kode berikut di client (chatroom.js).

function logtyping(e) {            
    socket.emit('typing');     
    if (e.code === 'Enter') {
        sendchat();
    }
}

socket.on('typing', data => {    
    info.textContent = (data.username + " is typing...")
    info.style.fontStyle = "italic";    
})

socket.on('typing done', () => {    
    info.textContent = ''    
})

Jika seorang pengguna sedang mengetik pesan, pengguna lain diperlihatkan teks “sedang mengetik…”, sampai pengguna tersebut menekan tombol enter.

Kita juga perlu menambahkan event on typing di sisi server (app.js) seperti berikut.

socket.on('typing', () => {
    socket.broadcast.emit('typing', {username: socket.username})        
})

Disini, socket.io menggunakan properti broadcast untuk memberi tahu klien yang terhubung. Dengan fungsi ini, setiap user kecuali orang yang mengetik pesan akan menerima broadcast dari server.

Penutup

Saat ini, penggunaan fitur real-time dengan aplikasi desktop, mobile, dan web hampir menjadi kebutuhan. Dalam artikel ini, kita membahas sejumlah aplikasi real-time dan mempelajari cara membuat real-time chatroom dengan bantuan Node.js dan Socket.io. Untuk melanjutkan ke level advance, Anda dapat menambahkan lebih banyak fitur atau menggunakan database untuk menyimpan pesan2 yang lama. Selamat koding 🙂