BerandaFramework PHPCara Mudah Bangun Aplikasi Realtime dengan Node.js
Framework PHP

Cara Mudah Bangun Aplikasi Realtime dengan Node.js

by Bardimin

Artikel ini memberikan tutorial mendalam untuk membangun aplikasi realtime dengan Node.js, dilengkapi dengan langkah-langkah teknis terkini yang dapat diikuti oleh pengembang untuk membuat sistem pemilihan atau voting yang hasilnya diperbarui secara langsung di semua klien.

Node.js adalah runtime environment untuk JavaScript yang bersifat open-source dan cross-platform. Teknologi ini memungkinkan eksekusi kode JavaScript di sisi server. Selanjutnya, ini membuka peluang untuk membangun aplikasi web yang dinamis dan realtime. Node.js pertama kali dirilis pada tahun 2009 oleh Ryan Dahl dan kini dikelola oleh OpenJS Foundation. Dalam tutorial ini, Anda akan mempelajari cara membuat aplikasi realtime dengan Node.js untuk sistem pemilihan sederhana.

Prinsip Dasar Aplikasi Realtime dengan Node.js

Teknologi inti yang digunakan adalah Socket.IO. Socket.IO memfasilitasi komunikasi full-duplex dan event-driven antara server dan klien. Oleh karena itu, setiap perubahan data di server dapat langsung dikirim ke semua klien yang terhubung. Konsep ini ideal untuk fitur seperti live voting, chat, atau dashboard monitoring.

Baca juga: Membuat Sendiri Task Manager Windows 11 dengan Notepad

Langkah-langkah Membangun Aplikasi Voting Realtime

  1. Instalasi Node.js
    Pastikan Anda telah menginstal Node.js versi LTS terbaru. Anda dapat mengunduhnya dari situs resmi Node.js. Proses instalasi sangatlah mudah dan tersedia untuk berbagai sistem operasi.
  2. Inisialisasi Proyek
    Buat folder proyek baru dan inisialisasi berkas package.json melalui terminal. Namun, Anda juga bisa membuatnya secara manual seperti contoh berikut.
{
  "name": "aplikasi-voting-realtime",
  "version": "1.0.0",
  "description": "Aplikasi voting realtime dengan Node.js dan Socket.IO",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "socket.io": "^4.7.2"
  }
}

Selanjutnya, jalankan perintah npm install di terminal untuk mengunduh dependensi. Proses ini akan membuat folder node_modules.

Struktur direktori dan hasil perintah npm install untuk aplikasi realtime dengan Node.js
Gambar 1: Struktur folder proyek setelah menjalankan npm install.
  1. Membuat Server dengan Express dan Socket.IO
    Buat berkas bernama server.js. Kode di dalamnya akan mengatur server HTTP, menyajikan halaman HTML, dan menangani koneksi realtime.
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// Data voting disimpan dalam objek
let voteData = {
  kandidatA: 0,
  kandidatB: 0
};

// Sajikan file index.html
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// Tangani koneksi Socket.IO
io.on('connection', (socket) => {
  console.log('Pengguna terhubung');
  
  // Kirim data vote terkini ke klien baru
  socket.emit('updateVote', voteData);
  
  // Tangani event vote dari klien
  socket.on('submitVote', (kandidat) => {
    if (voteData.hasOwnProperty(kandidat)) {
      voteData[kandidat]++;
      // Broadcast update ke SEMUA klien yang terhubung
      io.emit('updateVote', voteData);
    }
  });
});

// Jalankan server di port 3000
server.listen(3000, () => {
  console.log('Server berjalan pada http://localhost:3000');
});
  1. Membuat Antarmuka Klien (HTML)
    Buat berkas index.html. Antarmuka ini akan menampilkan hasil vote dan tombol untuk memilih.
<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi Voting Realtime</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; text-align: center; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 12px; }
        th { background-color: #f4f4f4; }
        button { padding: 10px 20px; background-color: #007cba; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #005a87; }
    </style>
</head>
<body>
    <h1>Pemilihan Ketua Realtime</h1>
    <table>
        <tr><th>Kandidat</th><th>Jumlah Suara</th></tr>
        <tr><td>Kandidat A</td><td id="countA">0</td></tr>
        <tr><td>Kandidat B</td><td id="countB">0</td></tr>
    </table>
    <div>
        <button onclick="vote('kandidatA')">Pilih Kandidat A</button>
        <button onclick="vote('kandidatB')">Pilih Kandidat B</button>
    </div>
    <script>
        const socket = io();
        socket.on('updateVote', function(data) {
            document.getElementById('countA').textContent = data.kandidatA;
            document.getElementById('countB').textContent = data.kandidatB;
        });
        function vote(kandidat) {
            socket.emit('submitVote', kandidat);
        }
    </script>
</body>
</html>

Pengujian dan Menjalankan Aplikasi Realtime

  • Jalankan server dengan perintah node server.js di terminal.
  • Buka browser dan akses http://localhost:3000.
  • Buka URL yang sama pada tab browser lain atau perangkat berbeda.
  • Coba lakukan vote pada satu klien. Secara instan, Anda akan melihat hasil vote diperbarui di semua klien yang terbuka. Proses ini menunjukkan bahwa aplikasi realtime dengan Node.js berfungsi dengan baik.
Tampilan antarmuka aplikasi voting realtime dengan Node.js di browser
Gambar 2: Antarmuka aplikasi voting realtime yang berjalan di browser.

Kesimpulan

Dengan memanfaatkan Node.js dan Socket.IO, Anda telah berhasil membuat sistem realtime yang fungsional. Arsitektur ini dapat dikembangkan untuk berbagai keperluan seperti monitoring data, kolaborasi dokumen, atau notifikasi langsung. Kode yang digunakan dalam tutorial ini bersifat modular. Sehingga, Anda dapat dengan mudah menyesuaikannya untuk skala dan kompleksitas yang lebih besar.

Table of contents [hide]

Artikel Terbaru

Artikel Terkait