Socket.IO Basics — Realtime

Socket.IO Socket.IO adalah library real-time yang wraps WebSocket dengan fitur tambahan: auto-reconnect, rooms, namespaces, fallback ke polling. Library…

Socket.IO

Socket.IO adalah library real-time yang wraps WebSocket dengan fitur tambahan: auto-reconnect, rooms, namespaces, fallback ke polling. Library paling populer untuk real-time di Node.js.

Server

import { Server } from "socket.io";

const io = new Server(3001, {
  cors: { origin: "http://localhost:5173" },
});

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

  // Listen for events
  socket.on("chat:message", (data) => {
    console.log("Message:", data);
    // Broadcast ke semua client KECUALI sender
    socket.broadcast.emit("chat:message", {
      ...data,
      sender: socket.id,
    });
  });

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

Client

import { io } from "socket.io-client";

const socket = io("http://localhost:3001");

socket.on("connect", () => {
  console.log("Connected:", socket.id);
});

// Send event
socket.emit("chat:message", { text: "Hello!" });

// Listen for events
socket.on("chat:message", (data) => {
  console.log("New message:", data);
});

// Disconnect
socket.disconnect();

Key Features

Acknowledgements

// Client
socket.emit("chat:message", { text: "Hello" }, (response) => {
  console.log("Server received:", response);
  // { status: "ok", messageId: "abc123" }
});

// Server
socket.on("chat:message", (data, callback) => {
  const saved = saveMessage(data);
  callback({ status: "ok", messageId: saved.id });
});

Yang akan kamu pelajari