Belajar Socket Emit di Node.js untuk Pemula
Zelixify
Editor
Pernah kepikiran gimana aplikasi chat bisa ngirim pesan tanpa refresh? Atau notifikasi di dashboard bisa muncul otomatis? Itu semua karena teknologi real-time. Di Node.js, salah satu library populer buat bikin komunikasi real-time adalah Socket.io. Artikel ini akan bantu kamu belajar socket.emit dari nol, step by step, sampai bisa bikin chat sederhana.
Apa Itu Socket Emit?
emit adalah metode di Socket.io untuk mengirim event. Event ini bisa berisi data apa saja, misalnya teks, angka, atau objek. Contoh: client kirim pesan chat ke server, server balas lagi ke semua client yang terhubung. Jadi komunikasi dua arah bisa berjalan lancar.
Persiapan Project
Sebelum mulai, siapkan dulu:
Node.js terinstal (versi 18+ disarankan)
VS Code atau editor lain
Browser untuk test
1. Buat Folder Project
mkdir belajar-socket
cd belajar-socket
npm init -y
2. Buka di VS Code
code .
Perintah di atas akan membuka folder project di VS Code.
3. Install Express & Socket.io
npm install express socket.io
Membuat File Server
Sekarang buat file baru bernama server.js di root folder project. Isinya:
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);
// route utama
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// koneksi socket
io.on('connection', (socket) => {
console.log('User terhubung');
// kirim pesan welcome ke client yang baru connect
socket.emit('welcome', 'Selamat datang di server Socket.io!');
// terima pesan dari client
socket.on('chat message', (msg) => {
console.log('Pesan dari client:', msg);
// broadcast ke semua client
io.emit('chat message', msg);
});
// user disconnect
socket.on('disconnect', () => {
console.log('User terputus');
});
});
server.listen(3000, () => {
console.log('Server berjalan di http://localhost:3000');
});
Membuat File Client
Buat file index.html di folder project dengan isi berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Socket.io</title>
<script src="/socket.io/socket.io.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 40px auto;
}
ul {
list-style: none;
padding: 0;
border: 1px solid #ddd;
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
}
li {
padding: 6px 10px;
border-bottom: 1px solid #eee;
}
form {
display: flex;
gap: 8px;
}
input {
flex: 1;
padding: 8px;
}
button {
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Chat Sederhana</h1>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" placeholder="Ketik pesan..." />
<button type="submit">Kirim</button>
</form>
<script>
const socket = io();
const form = document.getElementById("form");
const input = document.getElementById("input");
const messages = document.getElementById("messages");
socket.on("welcome", (msg) => {
const item = document.createElement("li");
item.textContent = msg;
item.style.fontStyle = "italic";
messages.appendChild(item);
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const message = input.value.trim();
if (!message) return;
socket.emit("chat message", message);
input.value = "";
});
socket.on("chat message", (msg) => {
const item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
messages.scrollTop = messages.scrollHeight;
});
</script>
</body>
</html>Menjalankan Server
Balik lagi ke terminal, jalankan:
node server.js
Lalu buka http://localhost:3000 di browser. Coba buka dua tab sekaligus, lalu kirim pesan. Kamu akan lihat pesan langsung muncul di kedua tab tanpa refresh. 🎉
Penjelasan Alur Emit
socket.emit()→ kirim event dari client ke server atau dari server ke 1 client.io.emit()→ broadcast ke semua client yang terhubung.socket.on()→ tangkap event yang dikirim.
Kesimpulan
Sekarang kamu sudah paham dasar socket emit di Node.js dengan Socket.io. Dari contoh ini, kamu bisa kembangkan ke fitur real-time lain seperti notifikasi, dashboard, atau multiplayer game. Step selanjutnya bisa belajar tentang rooms dan namespaces biar komunikasi lebih terstruktur. Dengan ini, kamu siap bikin aplikasi real-time modern!
Bagikan Artikel Ini