WebSockets

🚀 What Is Socket.IO?

Socket.IO is a library that enables real-time, bidirectional, and event-based communication between the browser and the server.

---

🧠 Key Concepts & API Breakdown

Term	Side	Purpose
io.on	Server	Listen for new client connections
socket.on	Both	Listen for specific events from client/server
socket.emit	Both	Send a custom event to one client or to the server
socket.broadcast.emit	Server	Send to all clients except sender
io.emit	Server	Send to all clients
socket.off	Both	Unsubscribe from an event
socket.join(room)	Server	Join a named room for private chat, etc.
io.to(room).emit	Server	Send to all users in a specific room

---

🔧 Backend Setup (Node + Express + Socket.IO)

npm install express socket.io cors

server.js

import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
import cors from 'cors';

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: { origin: 'http://localhost:5173', methods: ['GET', 'POST'] },
});

app.use(cors());

// 🔥 socket.io logic
io.on('connection', (socket) => {
  console.log('✅ Client connected:', socket.id); // io.on

  socket.on('message', (data) => {
    // socket.on
    console.log('📩 Message received:', data);
    io.emit('message', data); // io.emit
  });

  socket.on('disconnect', () => {
    console.log('❌ Disconnected:', socket.id); // socket.on (disconnect)
  });
});

server.listen(5000, () => console.log('Server running on port 5000'));

---

💻 Frontend Setup (React + Socket.IO Client)

npm install socket.io-client

socket.js

import { io } from 'socket.io-client';
const socket = io('http://localhost:5000');
export default socket;

Chat.jsx

import { useEffect, useState } from 'react';
import socket from '../socket';

const Chat = () => {
  const [msg, setMsg] = useState('');
  const [chat, setChat] = useState([]);

  useEffect(() => {
    // socket.on (listen for message)
    socket.on('message', (data) => {
      setChat((prev) => [...prev, data]);
    });

    // socket.off (cleanup)
    return () => {
      socket.off('message');
    };
  }, []);

  const sendMessage = () => {
    socket.emit('message', msg); // socket.emit
    setMsg('');
  };

  return (
    <div>
      {chat.map((m, i) => (
        <p key={i}>{m}</p>
      ))}
      <input value={msg} onChange={(e) => setMsg(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default Chat;

---

📘 Quick Explanation of Each:

✅ io.on('connection', callback)

• Used on the server
• Called when a client connects

io.on('connection', (socket) => {
  console.log('New connection:', socket.id);
});

---

✅ socket.on('eventName', callback)

• Listen for a custom event
• Works both client-side and server-side

socket.on('message', (data) => {
  console.log('Received:', data);
});

---

✅ socket.emit('eventName', data)

• Send an event with optional data

socket.emit('message', 'Hello from client');

---

✅ socket.broadcast.emit(...)

• Send event to all clients except the sender

socket.broadcast.emit('userJoined', socket.id);

---

✅ io.emit(...)

• Send event to all connected clients

io.emit('announcement', 'New user joined!');

---

✅ socket.off('eventName')

• Unsubscribe from an event

socket.off('message');

---

✅ socket.join('roomId') + io.to('roomId').emit(...)

• Useful for private/group chat

socket.join('room1');
io.to('room1').emit('message', 'Room 1 message');

---