Home
website
Implementasi Web Socket (Realtime)

Implementasi Web Socket (Realtime)

Februari 06, 2026

 

Aplikasi web modern sering membutuhkan fitur realtime, seperti:

  • Chat

  • Notifikasi

  • Live dashboard

  • Update stock atau data transaksi

WebSocket adalah teknologi yang memungkinkan komunikasi dua arah (full-duplex) antara client dan server.
Berbeda dengan polling biasa, WebSocket lebih efisien dan cepat karena koneksi tetap terbuka.

Artikel ini membahas implementasi WebSocket dalam aplikasi web, lengkap dengan contoh chat app menggunakan Node.js dan frontend.

🔍 Apa Itu WebSocket?

  • Protocol: ws:// atau wss:// (secure)

  • Koneksi persistent → data dikirim langsung tanpa request HTTP baru

  • Cocok untuk fitur realtime seperti:

    • Chat / messaging

    • Live notification

    • Realtime analytics

Keunggulan WebSocket:

  • Latency rendah → update data hampir instan

  • Bandwidth lebih efisien → tidak perlu polling terus-menerus

  • Mendukung multiple clients secara simultan

⚙️ Setup WebSocket dengan Node.js & Socket.io

1. Install Socket.io

npm install express socket.io

2. Buat Server

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

  // Event chat message
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // broadcast ke semua client
  });

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

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

Frontend Chat App

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Chat App Realtime</title>
  <style>
    ul { list-style-type: none; margin: 0; padding: 0; }
    li { padding: 5px 10px; }
    input { padding: 10px; width: 80%; }
    button { padding: 10px; }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" placeholder="Tulis pesan..." /><button>Send</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    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);
    });
  </script>
</body>
</html>

  • Client mengirim pesan → server menerima → broadcast ke semua client

  • Realtime komunikasi berjalan tanpa reload halaman

⚡ Tips Optimasi WebSocket

  1. Gunakan Namespace & Room

    • Memisahkan chat room atau fitur realtime lainnya:

const chatRoom = io.of('/room1');

  1. Handling Disconnect & Reconnect

    • Socket.io otomatis reconnect

    • Tambahkan listener untuk offline notification

  2. Data Validation

    • Server-side → sanitize input

    • Hindari XSS & injection

  3. Scaling

    • Redis adapter → share socket state di banyak server

    • Load balancer → handle banyak client

  4. Secure WebSocket

    • Gunakan wss:// untuk SSL

    • Autentikasi token JWT

Contoh Aplikasi Realtime Lainnya

  • Live Dashboard

    • Update grafik & statistik realtime dari server

  • Notifikasi Sistem

    • Alert user saat ada event baru

  • Realtime Multiplayer Game

    • Sinkronisasi state antar pemain

Kesimpulan

WebSocket adalah solusi utama untuk aplikasi web realtime, cepat, dan efisien.

  • Mengurangi overhead HTTP → bandwidth hemat

  • Full-duplex communication → realtime message & update

  • Mudah dikombinasikan dengan Node.js + Socket.io

🔥 Developer Indonesia bisa membuat aplikasi interaktif seperti chat, live notification, atau dashboard realtime dengan WebSocket, meningkatkan UX dan performa aplikasi modern.

Posting Komentar