WebSocket memungkinkan komunikasi dua arah (full-duplex) antara client dan server secara real-time.
HTTP vs WebSocket:
| HTTP | WebSocket |
|---|---|
| Request-Response | Dua arah (bidirectional) |
| Client selalu memulai | Server bisa push data |
| Koneksi baru tiap request | Koneksi persisten |
| Cocok untuk REST API | Cocok untuk real-time |
Setup dengan library ws:
import { WebSocketServer } from "ws";
const wss = new WebSocketServer({ port: 8080 });
wss.on("connection", (ws) => {
console.log("Client terhubung!");
ws.on("message", (data) => {
console.log("Pesan diterima:", data.toString());
ws.send("Pesan diterima oleh server");
});
ws.on("close", () => {
console.log("Client terputus");
});
});
Socket.IO — library real-time yang lebih lengkap:
import { Server } from "socket.io";
import http from "http";
const server = http.createServer(app);
const io = new Server(server);
io.on("connection", (socket) => {
console.log("User connected:", socket.id);
// Kirim ke semua client
socket.on("chat message", (msg) => {
io.emit("chat message", msg);
});
// Rooms — grup terpisah
socket.on("join room", (room) => {
socket.join(room);
io.to(room).emit("notification", `User bergabung ke ${room}`);
});
socket.on("disconnect", () => {
console.log("User disconnected");
});
});
Rooms & Namespaces:
- Room: grup client dalam satu namespace (misal chat room)
- Namespace: endpoint terpisah (misal
/admin,/chat)
Contoh chat sederhana di client:
const socket = io("http://localhost:3000");
socket.emit("chat message", "Halo semua!");
socket.on("chat message", (msg) => {
console.log("Pesan baru:", msg);
});
Kapan pakai WebSocket:
- Chat & messaging
- Live notification
- Collaborative editing (Google Docs)
- Game multiplayer
- Live dashboard & monitoring