Loading...
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.
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.
Sebelum mulai, siapkan dulu:
mkdir belajar-socket
cd belajar-socket
npm init -y
code .
Perintah di atas akan membuka folder project di VS Code.
npm install express socket.io
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');
});
Buat file index.html di folder project dengan isi berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Socket Emit</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1>Chat Sederhana</h1>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" />
<button>Kirim</button>
</form>
<script>
const socket = io();
// pesan welcome dari server
socket.on('welcome', (msg) => {
console.log(msg);
});
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
// kirim pesan ke server
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
// terima pesan dari server
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
});
</script>
</body>
</html>
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. 🎉
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.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!