Home > Blog > Cara Membangun Aplikasi Chat Realtime dengan Socket.io

Cara Membangun Aplikasi Chat Realtime dengan Socket.io

21 Feb 2025 | dibaca 23 kali

Pembuatan aplikasi chat secara realtime merupakan salah satu kebutuhan yang semakin banyak dicari di era modern. Pengguna menginginkan interaksi yang cepat dan responsif, baik untuk keperluan personal, bisnis, maupun kolaborasi tim. Salah satu teknologi yang mempermudah pembuatan aplikasi realtime adalah Socket.io. Socket.io memungkinkan komunikasi dua arah antara klien dan server secara efisien serta mendukung berbagai fitur seperti broadcast pesan, rooms, dan event-based messaging.

Mengenal Socket.io

  1. Apa itu Socket.io
    Socket.io adalah library JavaScript yang memfasilitasi proses komunikasi realtime antara klien dan server. Library ini menyediakan antarmuka yang mudah digunakan bagi pengembang untuk mengatur event dan mengirim data secara langsung.

    Socket.io terdiri dari dua komponen utama:
    • Server: Dibangun di atas Node.js.
    • Client: Dapat dijalankan di browser atau perangkat seluler yang mendukung JavaScript.
  2. Cara Kerja
    Socket.io menggunakan beberapa protokol, termasuk WebSockets, Long Polling, dan fallback lain, untuk menjamin koneksi yang stabil. Protokol WebSockets memungkinkan komunikasi tetap terbuka antara klien dan server tanpa perlu melakukan permintaan HTTP berulang.

    Socket.io akan otomatis memilih protokol terbaik yang didukung oleh browser, sehingga pengembang tidak perlu mengatur protokol secara manual.
  3. Kelebihan Socket.io
    • Mudah digunakan: API yang bersifat event-based sangat memudahkan dalam mengelola alur data.
    • Otomatis fallback: Jika suatu browser tidak mendukung WebSockets, Socket.io beralih ke mekanisme lain tanpa merusak koneksi.
    • Skalabilitas: Dapat dikombinasikan dengan solusi seperti Redis atau Nginx untuk menangani jumlah pengguna besar.
    • Dukungan ecosystem: Tersedia banyak modul pendukung untuk integrasi dengan framework dan platform berbeda.

Persiapan Lingkungan

  1. Instalasi Node.js
    Sebelum memulai, pastikan Node.js sudah terpasang di komputer. Anda dapat mengunduh Node.js dari https://nodejs.org.
  2. Inisialisasi Proyek
    Buat folder baru untuk proyek chat Anda. Kemudian jalankan perintah berikut di terminal untuk memulai proyek Node.js: 
    npm init -y
    Perintah tersebut akan membuat file package.json berisi informasi dasar proyek.
  3. Instalasi Socket.io dan Express
    Socket.io sering digabungkan dengan Express untuk mempermudah pembuatan server HTTP. Instal keduanya dengan perintah: 
    npm install express socket.io

Membuat Server Dasar

  1. Struktur Dasar Folder
    Misalkan kita menggunakan struktur folder berikut: 
    project-chat/
├── index.js
├── package.json
└── public/
    ├── index.html
    └── client.js
    • index.js: File utama Node.js yang akan menjalankan server.
    • public/: Folder statis yang berisi file HTML, CSS, dan JavaScript untuk sisi klien.
  2. Kode Server di index.js
    Contoh kode Node.js dengan Express dan Socket.io minimal: 
    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);

// Middleware untuk menyajikan file statis
app.use(express.static('public'));

// Event Socket.io
io.on('connection', (socket) => {
  console.log('User connected:', socket.id);

  // Menerima pesan dari klien
  socket.on('chat message', (msg) => {
    console.log('Message received:', msg);
    // Mengirim pesan kembali ke semua klien
    io.emit('chat message', msg);
  });

  // Putus koneksi
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

// Menjalankan server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});
    Penjelasan singkat:
    • express.static('public') membuat folder public dapat diakses langsung lewat browser.
    • Ketika seseorang terhubung ke server (io.on('connection', ...)) maka kita mendengarkan event dari klien, misalnya chat message.
    • io.emit('chat message', msg) akan mengirim pesan ke semua klien yang terhubung.

Membuat Tampilan Klien

Realtime Chat

Realtime Chat

 
  1. File index.html
    Di dalam folder public, kita buat file index.html sederhana untuk menampilkan antarmuka chatting:
    Penjelasan singkat:
    • #chat-box menampilkan daftar pesan.
    • #message-input adalah input teks di mana pengguna mengetikkan pesan.
    • #send-btn tombol untuk mengirim pesan ke server.
    • menyertakan library Socket.io pada sisi klien.
  2. File client.js
    Tambahkan file JavaScript untuk menangani proses pengiriman dan penerimaan pesan. Contoh isinya adalah sebagai berikut: 
    const socket = io(); // Melakukan koneksi ke server

const chatBox = document.getElementById('chat-box');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');

// Saat tombol kirim ditekan
sendBtn.addEventListener('click', () => {
  const msg = messageInput.value;
  if (msg.trim()) {
    // Emit event ke server
    socket.emit('chat message', msg);
    messageInput.value = '';
  }
});

// Mendengarkan event 'chat message' dari server
socket.on('chat message', (msg) => {
  const p = document.createElement('p');
  p.textContent = msg;
  chatBox.appendChild(p);
  chatBox.scrollTop = chatBox.scrollHeight; // Autoscroll ke pesan terakhir
});
    Penjelasan singkat:
    • socket = io() menginisialisasi koneksi dengan server.
    • socket.emit('chat message', msg) mengirim data ke server pada event chat message.
    • socket.on('chat message', ...) menangkap pesan yang dikirimkan dari server.
    Dengan kombinasi kode di atas, Anda telah memiliki aplikasi chat sederhana yang berjalan secara realtime. Saat pengguna mengetik pesan dan menekan tombol “Kirim,” pesan tersebut akan tersiar ke semua klien yang sedang terhubung.

Mengelola Identitas Pengguna

  1. Memberikan Username
    Dalam sebuah aplikasi chat, identitas seperti username atau nama panggilan penting untuk membedakan pengirim pesan. Sisi klien dapat menambahkan input username, kemudian mengirimkannya ke server saat user terhubung.

    Contoh sederhana: 
    // client.js
let username = prompt("Masukkan username:") || "Anonim";
const socket = io();

socket.on('connect', () => {
  socket.emit('join', username);
});
    Di sisi server: 
    io.on('connection', (socket) => {
  socket.on('join', (user) => {
    socket.username = user;
    console.log(`User connected: ${user}`);
  });

  socket.on('chat message', (msg) => {
    // Sertakan username sebelum mengirim ke semua klien
    io.emit('chat message', `${socket.username}: ${msg}`);
  });
});
    Dengan cara ini, setiap pesan akan disertai dengan nama pengirimnya.
  2. Menyimpan Data Sesi
    • Anda bisa menggunakan in-memory store sederhana atau basis data seperti Redis untuk menyimpan data pengguna yang aktif, terutama jika skala aplikasi mulai besar.
    • Saat socket terputus (disconnect event), perbarui data bahwa user tersebut tidak lagi aktif.

Rooms dan Broadcast

  1. Rooms
    Socket.io mendukung konsep rooms yang memungkinkan pengelompokan pengguna. Misalnya, jika ingin membuat ruang obrolan berbeda, Anda bisa menggunakan kode seperti di bawah: 
    socket.join('room1');
io.to('room1').emit('chat message', 'Hello everyone in room1!');
    • socket.join('room1') menempatkan pengguna ke dalam room1.
    • io.to('room1').emit(...) mengirim pesan hanya ke room1.
  2. Broadcast
    • socket.broadcast.emit('event', data) mengirim data ke semua klien kecuali pengirim.
    • Jika hanya ingin mengirim ke pengguna tertentu, Anda dapat menggunakan socket.to(socketId).emit('event', data) di mana socketId adalah ID unik dari socket yang dituju.

Menangani Keamanan

  1. Autentikasi
    • Untuk aplikasi yang lebih kompleks, diperlukan mekanisme login dan token (misalnya JWT) agar hanya pengguna terverifikasi yang dapat mengakses chat.
    • Socket.io memungkinkan Anda melakukan verifikasi token saat connection event, biasanya melalui middleware.
  2. Validasi Pesan
    • Lakukan sanitasi terhadap pesan yang dikirim. Misalnya, mencegah user mengirim skrip HTML berbahaya yang dapat memicu cross-site scripting (XSS).
    • Hindari mengirim data sensitif atau password secara langsung, selalu gunakan saluran aman (HTTPS + WebSockets TLS).
  3. Rate Limiting
    • Untuk mencegah spam, Anda bisa menerapkan rate limit. Misalnya, jika ada satu socket yang mengirim terlalu banyak pesan dalam rentang waktu singkat, sementara user lain terganggu, Anda dapat memblokir atau membatasi kecepatan pengguna tersebut.

Skalabilitas

  1. Menggunakan Redis
    • Socket.io dapat berjalan dalam mode cluster. Saat trafik besar, Anda mungkin akan menjalankan banyak instance Node.js pada server yang berbeda.
    • Redis bisa digunakan sebagai adapter agar Socket.io di berbagai instance server saling berkomunikasi. Data broadcast, join room, dan sebagainya akan tersinkronisasi melalui Redis.
    • Anda dapat menginstal socket.io-redis dengan perintah npm install socket.io-redis, lalu mengonfigurasinya sebagai berikut: 
      const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));
  2. Load Balancing
    • Gunakan load balancer seperti Nginx, HAProxy, atau layanan cloud (AWS ELB, GCP Load Balancer) di depan server Node.js.
    • Pastikan session sticky (pengguna selalu diarahkan ke instance Node.js yang sama) untuk meminimalisir masalah sinkronisasi saat real time.
  3. Microservices
    • Jika aplikasi chat sangat besar, Anda bisa memecah fungsionalitas tertentu (misalnya pengelolaan notifikasi, penyimpanan riwayat chat) ke dalam microservices yang terpisah.
    • Komunikasi antara microservices biasanya menggunakan protokol seperti gRPC, AMQP (RabbitMQ), atau REST.

Contoh Fitur Tambahan

  1. Riwayat Chat (Chat History)
    Simpan pesan yang terkirim ke database, seperti MongoDB atau PostgreSQL, agar pengguna dapat melihat pesan sebelumnya. Saat user bergabung, kirim chat history terakhir sesuai kebutuhan (misalnya 50 pesan terakhir).
  2. Notifikasi Typing
    Berikan event khusus, misalnya typing saat user mengetik pesan. Di klien lain, tampilkan status “User X sedang mengetik…” untuk meningkatkan interaksi.
  3. Pengiriman File dan Gambar
    Gunakan upload file (melalui HTTP) atau kirim data biner melalui Socket.io. Pastikan mengatur batas ukuran file dan melakukan validasi keamanan.
  4. Moderasi Chat
    Sertakan fitur pemblokiran kata kasar, penghapusan pesan, atau laporan pengguna (report user) untuk menjaga suasana chat tetap kondusif.
  5. Reaksi dan Emoji
    Berikan dukungan emoji agar pengguna dapat mengekspresikan diri dengan cara yang lebih seru. Implementasi reaksi (like, love, dll.) pada pesan tertentu akan meningkatkan interaksi di dalam chat.

Pengujian Aplikasi Chat

  1. Testing Dasar
    Buka browser di beberapa tab atau gunakan perangkat berbeda. Pastikan pesan yang dikirim oleh satu user muncul di user lainnya.
  2. Load Testing
    Untuk mengetahui batas kemampuan server, coba gunakan tool seperti Artillery atau k6. Lakukan simulasi ratusan atau ribuan pengguna mengirim pesan sekaligus untuk mengukur waktu respons dan stabilitas.
  3. Monitoring
    Gunakan monitoring tool seperti PM2, New Relic, atau Datadog untuk memantau penggunaan CPU, memori, dan latensi pada Node.js. Integrasikan logging agar mudah melacak error maupun aktivitas mencurigakan.

Deployment

  1. Menjalankan di Server Production
    Gunakan proses manager seperti PM2 atau forever untuk menjaga server Node.js tetap berjalan. Atur restart otomatis jika terjadi crash.
  2. Nginx Reverse Proxy
    Konfigurasikan Nginx sebagai reverse proxy di port 80/443. Teruskan permintaan ke aplikasi Node.js di port internal (misalnya port 3000). Dengan SSL (HTTPS), komunikasi WebSockets akan lebih aman.
  3. Scaling Out
    Jalankan beberapa instance Node.js di server yang sama menggunakan PM2 cluster mode atau di beberapa server fisik/virtual. Gunakan Redis adaptor agar session real-time tetap sinkron antarseluruh instance.

Praktik Terbaik

  1. Kode Tersusun dan Modular
    Pisahkan file dan modul agar setiap bagian (seperti routes, event handler, middleware) lebih mudah dikelola. Gunakan best practice yang sama seperti saat membangun aplikasi Node.js pada umumnya.
  2. Hindari Menyimpan Data Besar di Memori
    Jangan menyimpan data yang terlalu besar di memori server. Gunakan penyimpanan eksternal (database) agar server tetap ringan.
  3. Audit Log
    Catat setiap aktivitas penting ke log server untuk kemudahan pemantauan dan debugging.
  4. Integrasi Otentikasi yang Aman
    Gunakan token (JWT atau session) agar hanya user yang berhak bisa mengakses dan berpartisipasi di room tertentu. Pastikan token ditransmisikan melalui HTTPS untuk melindungi data dari serangan man-in-the-middle.
  5. Gunakan Versi Terbaru Socket.io
    Periksa pembaruan berkala pada Socket.io karena biasanya versi baru membawa peningkatan performa dan perbaikan keamanan.

Baca Juga :