WebSockets (Socket.io)

Let’s go through WebSockets with Socket.io in Node.js, which is essential for real-time communication like chat apps, live notifications, or dashboards.

---

1️⃣ What Are WebSockets?

• WebSockets = a protocol for bi-directional, full-duplex communication between client and server.

• Unlike HTTP (request-response), WebSockets allow server to push data to clients anytime.

• Use cases:

  • Chat applications

  • Live sports scores

  • Real-time notifications

  • Collaborative editing (like Google Docs)

---

2️⃣ Why Socket.io?

• Socket.io is a Node.js library for WebSockets with fallbacks (polling) for compatibility.

• Features:

  • Real-time communication

  • Automatic reconnection

  • Rooms and namespaces

  • Event-based communication

Install

npm install socket.io

---

3️⃣ Basic Server Setup

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, {
  cors: { origin: "*" } // allow cross-origin for testing
});
 
// Listen for client connections
io.on("connection", (socket) => {
  console.log("New client connected:", socket.id);
 
  // Listen for custom events
  socket.on("chatMessage", (msg) => {
    console.log("Message received:", msg);
    io.emit("chatMessage", msg); // broadcast to all clients
  });
 
  // Handle disconnect
  socket.on("disconnect", () => {
    console.log("Client disconnected:", socket.id);
  });
});
 
server.listen(3000, () => console.log("Server running on port 3000"));

---

4️⃣ Basic Client Side

<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
<script>
  const socket = io("http://localhost:3000");
 
  // Send message
  socket.emit("chatMessage", "Hello Server!");
 
  // Receive messages
  socket.on("chatMessage", (msg) => {
    console.log("New message:", msg);
  });
</script>

• socket.emit(event, data) → send data to server

• socket.on(event, callback) → listen for events

---

5️⃣ Rooms and Namespaces

• Rooms = group of clients for targeted messages

// Join a room
socket.join("room1");
 
// Send message to a room
io.to("room1").emit("chatMessage", "Hello Room 1");

• Namespaces = separate channels for different parts of app

const chatNamespace = io.of("/chat");
chatNamespace.on("connection", (socket) => {
  console.log("Connected to chat namespace:", socket.id);
});

---

6️⃣ Security Considerations

1. Authentication → pass JWT during handshake:

const socket = io("http://localhost:3000", {
  auth: { token: "JWT_TOKEN_HERE" }
});

2. CORS restrictions → prevent unauthorized origins

3. Rate limiting / throttling → avoid spam or flooding

4. Validate incoming messages → avoid injection attacks

---

7️⃣ Key Takeaways

• WebSockets = real-time, bi-directional communication

• Socket.io = simplifies WebSocket handling + fallbacks

• Event-driven = emit/listen for custom events

• Rooms & namespaces = organize clients

• Security → authentication, validation, CORS

---