Belajar WebSocket - Socket.IO: Enhanced WebSocket Library

#Pendahuluan

Setelah membangun server ws murni di episode 5, kalian mungkin bertanya: kenapa harus repot membangun broadcast dan reconnection manual? Jawabannya adalah Socket.IO.

Socket.IO adalah library yang melapisi WebSocket dengan lapisan kemudahan: event-based messaging, reconnection otomatis, fallback ketika WebSocket diblokir, rooms, dan namespaces. Di episode ini kalian akan melihat kenapa Socket.IO sangat populer — dan juga kapan sebaiknya tetap memakai ws murni.

#Mengenal Socket.IO

#Apa yang Ditambahkan Socket.IO

Socket.IO bukan pengganti WebSocket, melainkan pengaya:

• Event-based messaging: kirim event bernama seperti chat:pesan, bukan raw string.
• Automatic reconnection: putus sambung ditangani sendiri.
• Fallback otomatis: jika WebSocket gagal, beralih ke HTTP long polling.
• Rooms dan namespaces: pengelompokan klien yang dibangun manual di episode 9.
• Acknowledgement: klien dan server bisa meminta konfirmasi pesan.

npm install socket.io socket.io-client

npm install socket.io socket.io-client menginstall dua paket: server untuk Node.js dan klien untuk browser.

#Perbedaan Protokol dari WebSocket Murni

Socket.IO memakai protokol sendiri yang berjalan di atas WebSocket atau polling. Akibatnya, klien Socket.IO tidak bisa bicara dengan server ws murni — dan sebaliknya. Untuk aplikasi yang butuh interoperabilitas protokol murni, ws tetap pilihan utama.

#Server-side Socket.IO

#Inisialisasi Server

Server Socket.IO dasar

const { Server } = require("socket.io");
const http = require("http");
 
const server = http.createServer();
const io = new Server(server);
 
io.on("connection", (socket) => {
  console.log("klien terhubung:", socket.id);
 
  socket.on("chat:kirim", (pesan) => {
    io.emit("chat:terima", pesan);
  });
});
 
server.listen(8080);

new Server(server) melampirkan Socket.IO ke server HTTP. Event connection memberi kalian objek socket dengan socket.id unik per klien. io.emit menyiarkan ke semua klien.

#Emit dan Listen di Server

Dua arah komunikasi:

Emit dan listen event

socket.emit("pesan", "dari server");
socket.on("event-klien", (data) => {
  console.log("klien mengirim:", data);
});

socket.emit mengirim ke satu klien, sementara io.emit mengirim ke semua. Episode 9 akan menambah varian to(room) dan except(socketId).

#Middleware

Socket.IO mendukung middleware yang berjalan sebelum event diproses:

Middleware otentikasi

io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (token === "rahasia") {
    next();
  } else {
    next(new Error("unauthorized"));
  }
});

io.use((socket, next) => {...}) memungkinkan kalian menolak koneksi sebelum klien masuk. Ini pintu masuk autentikasi yang akan kita bedah lengkap di episode 8.

#Client-side Socket.IO

#Menghubungkan dari Browser

Klien Socket.IO di browser

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
 
  socket.on("chat:terima", (pesan) => {
    console.log("diterima:", pesan);
  });
 
  socket.emit("chat:kirim", "halo semua");
</script>

const socket = io() menghubungkan klien ke server yang sama secara otomatis. socket.on dan socket.emit adalah kebalikan dari sisi server.

#Opsi Koneksi

Klien bisa diatur dengan berbagai opsi:

Opsi koneksi klien

const socket = io("https://server.example.com", {
  reconnection: true,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 5000,
  reconnectionAttempts: Infinity,
  timeout: 10000,
});

Opsi di atas mengaktifkan reconnection dengan backoff. Detail konfigurasi ini akan dibahas lebih dalam di episode 12.

#Socket.IO vs Native WebSocket

#Kapan Memakai Socket.IO

Pilih Socket.IO ketika:

• Butuh reconnection dan fallback tanpa menulis kode sendiri.
• Ingin event-based messaging yang lebih rapi daripada raw string.
• Butuh rooms, namespaces, dan broadcast antar server.
• Target klien mencakup browser dan mobile dengan kondisi jaringan buruk.

#Kapan Tetap Memakai ws Murni

Pilih ws ketika:

• Butuh protokol WebSocket murni yang interoperable lintas bahasa.
• Butuh kontrol penuh atas frame dan lifecycle.
• Ukuran dan overhead harus minimal.
• Klien memakai bahasa lain seperti Go atau Python yang tidak punya Socket.IO.

#Fitur Kunci Socket.IO

Beberapa fitur yang akan sering kalian pakai sepanjang series:

• Acknowledgements: socket.emit("tanya", data, (jawaban) => {...}) memungkinkan callback balasan.
• Broadcast: io.emit ke semua, socket.broadcast.emit ke semua kecuali pengirim.
• Binary data: Socket.IO menangani Buffer, ArrayBuffer, dan Blob secara transparan.
• Rooms dan namespaces: dasar pengelompokan yang kita bahas di episode 9.

#Penutup

Episode 6 memperkenalkan Socket.IO sebagai lapisan kemudahan di atas WebSocket: event-based messaging, reconnection otomatis, fallback, middleware, dan opsi koneksi. Kalian juga sekarang bisa memutuskan kapan memakai Socket.IO dan kapan tetap setia pada ws murni.

Inti yang harus dibawa pulang:

• Socket.IO menambah event, reconnection, fallback, rooms, dan namespaces.
• Protokol Socket.IO tidak interoperable dengan ws murni.
• Server memakai io dan socket; klien memakai socket saja.
• Middleware io.use cocok untuk autentikasi koneksi.
• Socket.IO untuk kecepatan pengembangan; ws untuk kontrol penuh.
• Opsi reconnection klien mengatur delay dan jumlah percobaan.

Di episode 7 selanjutnya kita menggabungkan semua kemampuan: membangun aplikasi real-time pertama — chat sederhana dengan server, UI, join dan leave notification, daftar pengguna online, dan debugging via DevTools.