Belajar Socket Emit di Node.js untuk Pemula

Node.js
18 Agustus 2025
277 Dilihat

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>
  <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>

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!