Cara Membangun Aplikasi Chat Realtime dengan Socket.io

Pada artikel ini, kita akan membahas langkah demi langkah membangun aplikasi chat realtime sederhana menggunakan Node.js, Express.js, dan Socket.io. Anda dapat mengembangkan contoh ini menjadi lebih kompleks sesuai kebutuhan Anda.

---

1. Apa Itu Socket.io?

Socket.io adalah library JavaScript yang memudahkan pembuatan aplikasi realtime, di mana server dan klien dapat saling mengirim data tanpa harus terus menerus melakukan refresh halaman. Socket.io terdiri dari dua bagian:

1. Server-side library (untuk Node.js).
2. Client-side library (dapat dijalankan di browser).

Socket.io secara internal menggunakan protokol WebSocket (atau fallback lain jika WebSocket tidak tersedia) untuk memfasilitasi komunikasi dua arah (duplex) antara client dan server.

Dengan Socket.io, kita dapat dengan mudah membangun:

• Aplikasi chatting realtime.
• Notifikasi realtime (misalnya update data secara langsung).
• Aplikasi kolaborasi (misalnya editor teks yang dipakai bersama).
• Dan lain-lain.

---

2. Persiapan Lingkungan

Sebelum memulai, pastikan Anda telah menginstal:

1. Node.js (versi terbaru atau minimal LTS).
2. NPM atau Yarn untuk manajemen paket.

Anda dapat mengecek versi Node.js dengan perintah:

node -v

Dan versi NPM dengan:

npm -v

---

3. Inisialisasi Proyek

Buat folder baru untuk proyek Anda, misalnya socketio-chat. Setelah itu, buka terminal atau command prompt di dalam folder tersebut, lalu jalankan:

npm init -y

Perintah ini akan membuat file package.json berisi konfigurasi dasar untuk proyek Anda.

---

4. Instalasi Dependensi

Selanjutnya, kita akan menginstal beberapa package utama:

1. express: Web framework minimalis untuk Node.js.
2. socket.io: Library realtime yang akan kita gunakan.
3. (Opsional) nodemon: Untuk memudahkan development agar server merestart otomatis ketika ada perubahan kode.

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

Di dalam package.json, pada bagian scripts, tambahkan script berikut agar kita dapat menjalankan server menggunakan nodemon:

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

---

5. Struktur Proyek

Berikut adalah contoh struktur direktori proyek kita:

socketio-chat/
├─ package.json
├─ server.js
└─ public/
   └─ index.html

• server.js: Berisi kode untuk server Node.js menggunakan Express.js dan Socket.io.
• public/index.html: File HTML utama untuk menampilkan UI chat sederhana di sisi klien.

---

6. Kode Server (server.js)

Buat file server.js di root proyek Anda, lalu tuliskan kode berikut:

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

// Inisialisasi express
const app = express();
// Buat http server berbasis express
const server = http.createServer(app);
// Inisialisasi Socket.io dengan server HTTP kita
const io = new Server(server);

// Set folder public agar bisa diakses secara statis
app.use(express.static('public'));

// Event ketika ada client yang terhubung
io.on('connection', (socket) => {
  console.log('Pengguna terhubung:', socket.id);

  // Menerima pesan dari client
  socket.on('chat message', (msg) => {
    console.log('Pesan:', msg);
    // Kirim pesan ke semua klien (broadcast)
    io.emit('chat message', msg);
  });

  // Event ketika pengguna terputus
  socket.on('disconnect', () => {
    console.log('Pengguna terputus:', socket.id);
  });
});

// Jalankan server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server berjalan di http://localhost:${PORT}`);
});

Penjelasan singkat

1. Membuat server HTTP menggunakan http.createServer(app).
2. Membungkus server dengan Server dari socket.io.
3. Menggunakan app.use(express.static('public')) untuk menyajikan file statis (HTML, CSS, JS) dari folder public.
4. Event connection: Dipanggil setiap kali ada klien yang terkoneksi. Dari sini kita dapat melakukan inisialisasi event-event Socket.io yang dibutuhkan.
5. socket.on('chat message', …): Menerima event chat message yang dikirim dari klien, lalu membroadcast kembali ke semua klien dengan io.emit('chat message', msg).

---

7. Kode Client (public/index.html)

Buat file index.html di dalam folder public:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Chat Realtime dengan Socket.io</title>
  <style>
    /* Hanya contoh CSS sederhana */
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    .chat-container {
      max-width: 600px;
      margin: 50px auto;
      background: #fff;
      padding: 20px;
      border-radius: 5px;
    }
    ul {
      list-style: none;
      padding: 0;
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #ddd;
      margin-bottom: 15px;
    }
    li {
      margin: 10px 0;
      padding: 5px 10px;
      background: #e9e9e9;
      border-radius: 5px;
    }
    input[type="text"] {
      width: 80%;
      padding: 10px;
      box-sizing: border-box;
    }
    button {
      width: 18%;
      padding: 10px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background: #0069d9;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <h2>Aplikasi Chat Realtime</h2>
    <ul id="messages"></ul>
    <input id="inputMessage" autocomplete="off" placeholder="Ketik pesan..." />
    <button id="sendButton">Kirim</button>
  </div>

  <!-- Socket.io Client -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // Membuat koneksi ke server
    const socket = io();

    const messages = document.getElementById('messages');
    const inputMessage = document.getElementById('inputMessage');
    const sendButton = document.getElementById('sendButton');

    // Ketika tombol "Kirim" diklik
    sendButton.addEventListener('click', () => {
      const msg = inputMessage.value;
      if (msg.trim() !== '') {
        // Emit event 'chat message' ke server
        socket.emit('chat message', msg);
        inputMessage.value = '';
      }
    });

    // Ketika server mengirim event 'chat message'
    socket.on('chat message', (msg) => {
      const li = document.createElement('li');
      li.textContent = msg;
      messages.appendChild(li);
      // Scroll ke bagian paling bawah
      messages.scrollTop = messages.scrollHeight;
    });
  </script>
</body>
</html>

Penjelasan singkat

1. <script src="/socket.io/socket.io.js"></script> memuat library klien Socket.io dari server.
2. const socket = io(); membuat koneksi ke server Socket.io (host dan port yang sama).
3. socket.emit('chat message', msg); mengirim event chat message ke server dengan data msg.
4. socket.on('chat message', …) menerima event chat message dari server, lalu menampilkan pesan di <ul>.

---

8. Menjalankan Aplikasi

Setelah semua file terisi, jalankan perintah berikut di terminal:

npm run dev

Server akan berjalan di http://localhost:3000. Buka URL tersebut di browser, dan Anda akan melihat tampilan sederhana untuk chat.

• Coba buka browser dengan dua tab (atau dua perangkat berbeda) ke http://localhost:3000.
• Ketika Anda mengirim pesan di salah satu tab/perangkat, pesan yang sama akan muncul di semua klien lain yang terhubung.

---

9. Pengembangan Lebih Lanjut

Anda dapat mengembangkan aplikasi chat ini menjadi lebih kompleks dengan fitur-fitur tambahan:

1. Otentikasi Pengguna: Menggunakan JWT, session, atau sistem login agar pengguna punya identitas unik.
2. Multi-Room Chat: Memisahkan chat ke dalam beberapa “ruangan” sehingga pengguna hanya menerima pesan dari room tertentu.
3. Penyimpanan Pesan: Mengintegrasikan database (MySQL, MongoDB, dsb.) untuk menyimpan pesan agar riwayat chat tidak hilang ketika server dimatikan.
4. Privat Chat: Mengirim pesan langsung (Direct Message) ke pengguna tertentu.
5. Notifikasi: Menambahkan notifikasi di sisi client ketika ada pesan baru atau event tertentu.

---

10. Kesimpulan

Dengan Express.js dan Socket.io, kita dapat dengan mudah membangun aplikasi chat realtime. Proses utamanya adalah:

1. Menginisialisasi server dengan HTTP dan Express.
2. Menambahkan Socket.io dan menyiapkan event connection untuk menangani event chatting.
3. Menangani event di sisi klien dengan menambahkan script socket.io dan menggunakan event emit/on.

Struktur proyek sangat fleksibel dan dapat disesuaikan dengan kebutuhan. Dengan mempelajari lebih lanjut dokumentasi resmi Socket.io, Anda dapat menambahkan beragam fitur seperti autentikasi, multiple rooms, enkripsi pesan, dan lainnya.

Selamat mencoba! Semoga artikel ini membantu Anda memahami cara membuat aplikasi chat realtime sederhana dengan Socket.io.

Baca Juga :

• Perbedaan Node.js dengan JavaScript di Browser
• Cara Menghubungkan Node.js dengan Database (MongoDB/MySQL)
• Apa Itu Node.js?