Membuat Aplikasi Chat Real-time dengan Socket.io dan Node.js
Tutorial langkah demi langkah membuat aplikasi chat real-time menggunakan Socket.io dan Node.js, cocok untuk pemula Indonesia yang ingin belajar WebSocket.
Pernah kepikiran gimana cara aplikasi chat real-time kayak WhatsApp Web atau live chat customer service bekerja? Rahasianya adalah WebSocket—protokol yang memungkinkan komunikasi dua arah secara instan. Di tutorial ini, kita akan bikin aplikasi chat sederhana menggunakan Socket.io dan Node.js. Kamu nggak perlu jadi senior developer, cukup paham dasar JavaScript dan Node.js.
Apa Itu Socket.io?
Socket.io adalah library yang menyederhanakan penggunaan WebSocket. Dengan Socket.io, kita bisa mengirim dan menerima pesan secara real-time antara server dan klien dengan mudah. Library ini juga punya fallback otomatis kalau WebSocket nggak didukung browser (misal pakai long-polling).
Prasyarat
- Node.js (versi 16 atau lebih baru) sudah terinstal
- Pengetahuan dasar JavaScript (variabel, fungsi, event)
- Teks editor (VS Code, misalnya)
- Browser modern
Langkah 1: Inisialisasi Proyek
Buat folder baru bernama chat-app, lalu buka terminal di folder tersebut.
npm init -y
Perintah di atas akan membuat file package.json. Selanjutnya, instal dependensi yang dibutuhkan:
npm install express socket.io
- express: framework web untuk Node.js
- socket.io: library real-time
Langkah 2: Membuat Server
Buat file server.js di root folder. Ini kode servernya:
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);
// Serve file statis dari folder 'public'
app.use(express.static('public'));
// Event ketika ada client yang terhubung
io.on('connection', (socket) => {
console.log('Seorang user terhubung:', socket.id);
// Dengarkan event 'chat message' dari client
socket.on('chat message', (msg) => {
// Kirim pesan ke semua client termasuk pengirim
io.emit('chat message', { id: socket.id, message: msg });
});
// Event ketika client disconnect
socket.on('disconnect', () => {
console.log('User disconnect:', socket.id);
});
});
// Jalankan server di port 3000
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server berjalan di http://localhost:${PORT}`);
});
Penjelasan:
io.on('connection')dipicu setiap ada client baru.socket.on('chat message')mendengarkan pesan dari client tertentu.io.emit('chat message', ...)mengirim pesan ke semua client yang terhubung (broadcast).
Langkah 3: Membuat Frontend
Buat folder public di root, lalu buat file index.html di dalamnya. Folder public akan di-serve secara statis oleh Express.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Real-time</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; }
#chat-container { width: 400px; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); overflow: hidden; }
#messages { list-style: none; height: 300px; overflow-y: auto; padding: 10px; background: #fafafa; }
#messages li { padding: 8px 12px; margin-bottom: 5px; background: #e3f2fd; border-radius: 20px; max-width: 80%; word-wrap: break-word; }
#messages li.own { background: #d1e7dd; align-self: flex-end; text-align: right; margin-left: auto; }
#form { display: flex; border-top: 1px solid #ddd; }
#input { flex: 1; padding: 15px; border: none; outline: none; font-size: 16px; }
#form button { background: #0d6efd; color: white; border: none; padding: 15px 20px; cursor: pointer; font-size: 16px; }
#form button:hover { background: #0b5ed7; }
</style>
</head>
<body>
<div id="chat-container">
<ul id="messages"></ul>
<form id="form">
<input id="input" placeholder="Ketik pesan..." autocomplete="off" />
<button>Kirim</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io(); // otomatis connect ke server
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(data) {
const item = document.createElement('li');
item.textContent = data.message;
// Tandai pesan dari kita sendiri (berdasarkan socket.id)
if (data.id === socket.id) {
item.classList.add('own');
}
messages.appendChild(item);
// Auto scroll ke bawah
messages.scrollTop = messages.scrollHeight;
});
</script>
</body>
</html>
Catatan: File /socket.io/socket.io.js disediakan otomatis oleh library Socket.io di server.
Langkah 4: Menjalankan Aplikasi
Jalankan server dengan perintah:
node server.js
Buka browser dan kunjungi http://localhost:3000. Buka dua tab atau jendela berbeda, lalu coba kirim pesan. Lihat, pesan muncul secara real-time di kedua tab!
Langkah 5: Menambahkan Nama Pengguna (Opsional)
Agar lebih personal, kita bisa menambahkan fitur username. Saat client terhubung, minta mereka memasukkan nama. Modifikasi kode sebagai berikut.
server.js – simpan username per socket:
// Di dalam io.on('connection')
let username = '';
// Menerima username dari client
socket.on('set username', (name) => {
username = name;
console.log(`${username} bergabung`);
});
// Ubah emit pesan untuk menyertakan username
socket.on('chat message', (msg) => {
io.emit('chat message', { username: username || 'Anonim', message: msg });
});
index.html – tambahkan prompt username:
<script>
let username = prompt('Masukkan nama kamu:');
socket.emit('set username', username);
// ... event listener form tetap sama
// Tampilkan username di pesan
socket.on('chat message', function(data) {
const item = document.createElement('li');
item.textContent = data.username + ': ' + data.message;
if (data.username === username) {
item.classList.add('own');
}
messages.appendChild(item);
messages.scrollTop = messages.scrollHeight;
});
</script>
Sekarang setiap pesan akan menampilkan nama pengirim.
Kesimpulan
Kamu baru saja membuat aplikasi chat real-time pertama dengan Socket.io dan Node.js! Dari sini, kamu bisa mengembangkannya lebih jauh: tambahkan ruang obrolan (room), simpan riwayat chat ke database, atau integrasikan dengan autentikasi. Dengan memahami dasar ini, kamu siap membangun fitur real-time yang lebih kompleks.
Selamat mencoba!