Membuat Real-Time Chat App dengan Socket.IO

Di era komunikasi serba cepat, aplikasi chat real-time menjadi kebutuhan penting—baik untuk keperluan pribadi maupun bisnis. Dengan Socket.IO, kita bisa membuat aplikasi chat yang dapat mengirim dan menerima pesan seketika tanpa perlu reload halaman. Artikel ini akan membahas langkah demi langkah cara membuat real-time chat app dengan Socket.IO, mulai dari instalasi hingga aplikasi siap dijalankan.

1. Persiapan Lingkungan

Sebelum mulai, pastikan Anda sudah menginstal:

• Node.js dan npm (Node Package Manager)
  Cek dengan:

node -v
npm -v

• Code editor seperti VS Code
• Browser modern (Chrome, Firefox, dll.)

2. Inisialisasi Project

Buat folder project, lalu jalankan:

mkdir chat-app
cd chat-app
npm init -y

3. Instalasi Socket.IO dan Express

Kita akan menggunakan Express untuk server HTTP dan Socket.IO untuk komunikasi real-time.

npm install express socket.io

4. Membuat Server dengan Express dan Socket.IO

Buat file server.js:

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

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

// Kirim file index.html saat user mengakses root
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

  // Terima pesan dari client
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // Kirim ke semua user
  });

  // Event disconnect
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server berjalan di http://localhost:3000');
});

5. Membuat Tampilan Frontend

Buat file index.html:

  
    Real-Time Chat
    
      body { font: 14px sans-serif; background: #f5f5f5; }
      #messages { list-style: none; padding: 0; }
      #messages li { background: #fff; margin: 5px; padding: 10px; border-radius: 5px; }
      form { background: #222; padding: 10px; position: fixed; bottom: 0; width: 100%; }
      form input { border: none; padding: 10px; width: 80%; }
      form button { width: 18%; background: #4CAF50; border: none; padding: 10px; color: white; }
    
  
  
    
    
      
      Kirim
    
    
    
      const socket = io();
      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', function(msg) {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    
  

6. Menjalankan Aplikasi

Jalankan perintah:

node server.js

Buka browser di http://localhost:3000, lalu coba buka di dua tab berbeda. Saat mengirim pesan dari satu tab, pesan akan muncul secara real-time di tab lain.

7. Penjelasan Alur Kerja

• Express berfungsi sebagai web server untuk mengirimkan file HTML ke client.
• Socket.IO menghubungkan server dan client menggunakan WebSocket.
• Setiap kali user mengirim pesan, pesan tersebut dikirim ke server, lalu server meneruskannya ke semua client yang terhubung.
• Tidak perlu refresh halaman karena komunikasi berlangsung secara langsung.

Kesimpulan

Membuat aplikasi chat real-time dengan Socket.IO sebenarnya cukup sederhana untuk dipelajari oleh pemula. Dengan kombinasi Node.js, Express, dan Socket.IO, kita dapat membangun aplikasi yang responsif dan cepat. Konsep ini tidak hanya bisa digunakan untuk chat, tetapi juga fitur real-time lain seperti notifikasi, live updates, dan kolaborasi online. Langkah selanjutnya, Anda bisa menambahkan fitur seperti autentikasi user, penyimpanan pesan di database, dan desain UI yang lebih menarik.