Socket.io Realtime Chat App: Rooms, Broadcasting và Scale Với Redis Cho Dự Án Việt

npm install socket.io express

// server.js
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');

const app = express();
const httpServer = createServer(app);

const io = new Server(httpServer, {
  cors: {
    origin: process.env.CLIENT_URL || 'http://localhost:3000',
    methods: ['GET', 'POST']
  }
});

// Namespace cho module chat học viên
const chatNS = io.of('/chat');

chatNS.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // Client join vào room (ví dụ: roomId = courseId)
  socket.on('join_room', (roomId) => {
    socket.join(roomId);
    // Thông báo cho tất cả trong room (trừ người mới vào)
    socket.to(roomId).emit('user_joined', {
      userId: socket.data.userId,
      roomId
    });
  });

  // Gửi message vào room
  socket.on('send_message', ({ roomId, message }) => {
    // Broadcast tới tất cả trong room (kể cả sender)
    chatNS.to(roomId).emit('receive_message', {
      userId: socket.data.userId,
      message,
      timestamp: Date.now()
    });
  });

  socket.on('leave_room', (roomId) => {
    socket.leave(roomId);
    socket.to(roomId).emit('user_left', { userId: socket.data.userId });
  });

  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

httpServer.listen(3001, () => console.log('Server running on :3001'));

// middleware/auth.js
const jwt = require('jsonwebtoken');

const JWT_SECRET = process.env.JWT_SECRET;

function socketAuthMiddleware(socket, next) {
  // Client gửi token qua socket.handshake.auth
  const token = socket.handshake.auth?.token;

  if (!token) {
    return next(new Error('Thiếu token xác thực'));
  }

  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    // Gắn user data vào socket để dùng sau
    socket.data.userId = decoded.userId;
    socket.data.username = decoded.username;
    socket.data.role = decoded.role;
    next();
  } catch (err) {
    next(new Error('Token không hợp lệ hoặc đã hết hạn'));
  }
}

module.exports = socketAuthMiddleware;

// server.js - áp dụng middleware
const socketAuthMiddleware = require('./middleware/auth');

// Áp dụng cho namespace /chat
chatNS.use(socketAuthMiddleware);

// Giờ trong handler, dùng socket.data trực tiếp
chatNS.on('connection', (socket) => {
  console.log(`${socket.data.username} đã kết nối`);
  // socket.data.userId, socket.data.role đều có sẵn
});

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

// Lấy token từ localStorage hoặc cookie
const token = localStorage.getItem('access_token');

const socket = io('http://localhost:3001/chat', {
  auth: { token },
  // Nếu token hết hạn, tự retry với token mới
  retries: 3
});

socket.on('connect_error', (err) => {
  if (err.message === 'Token không hợp lệ hoặc đã hết hạn') {
    // Refresh token rồi reconnect
    refreshTokenAndReconnect(socket);
  }
});

// server.ts (chạy song song với Next.js)
import { createServer } from 'http';
import next from 'next';
import { Server } from 'socket.io';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const httpServer = createServer(handler);
  const io = new Server(httpServer, {
    cors: { origin: process.env.CLIENT_URL }
  });

  // Setup namespaces và rooms như phần trước
  setupSocketHandlers(io);

  httpServer.listen(3000);
});

// hooks/useSocket.ts
import { useEffect, useRef, useState } from 'react';
import { io, Socket } from 'socket.io-client';

interface Message {
  userId: string;
  username: string;
  message: string;
  timestamp: number;
}

export function useSocket(roomId: string, token: string) {
  const socketRef = useRef<Socket | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // Guard: chỉ chạy ở browser
    if (typeof window === 'undefined') return;

    const socket = io(
      process.env.NEXT_PUBLIC_SOCKET_URL + '/chat',
      { auth: { token } }
    );
    socketRef.current = socket;

    socket.on('connect', () => {
      setIsConnected(true);
      socket.emit('join_room', roomId);
    });

    socket.on('receive_message', (msg: Message) => {
      setMessages(prev => [...prev, msg]);
    });

    socket.on('disconnect', () => setIsConnected(false));

    // Cleanup khi unmount
    return () => {
      socket.emit('leave_room', roomId);
      socket.disconnect();
    };
  }, [roomId, token]);

  const sendMessage = (message: string) => {
    socketRef.current?.emit('send_message', { roomId, message });
  };

  return { messages, isConnected, sendMessage };
}

// components/ChatRoom.tsx - dùng hook
'use client'; // BẮT BUỘC cho App Router

import { useSocket } from '@/hooks/useSocket';

export default function ChatRoom({ roomId, token }: { roomId: string; token: string }) {
  const { messages, isConnected, sendMessage } = useSocket(roomId, token);
  const [input, setInput] = useState('');

  return (
    <div className="flex flex-col h-screen">
      <div className="p-2 text-sm text-gray-500">
        {isConnected ? '🟢 Đang kết nối' : '🔴 Mất kết nối'}
      </div>
      <div className="flex-1 overflow-y-auto p-4 space-y-2">
        {messages.map((msg, i) => (
          <div key={i} className="bg-gray-100 rounded p-2">
            <span className="font-bold">{msg.username}: </span>
            {msg.message}
          </div>
        ))}
      </div>
      <div className="flex gap-2 p-4">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && (sendMessage(input), setInput(''))}
          className="flex-1 border rounded px-3 py-2"
          placeholder="Nhập tin nhắn..."
        />
        <button
          onClick={() => { sendMessage(input); setInput(''); }}
          className="bg-blue-500 text-white px-4 py-2 rounded"
        >
          Gửi
        </button>
      </div>
    </div>
  );
}

npm install @socket.io/redis-adapter ioredis

// server.js - thêm Redis adapter
const { createClient } = require('redis'); // hoặc ioredis
const { createAdapter } = require('@socket.io/redis-adapter');

async function setupRedisAdapter(io) {
  // Dùng Upstash Redis trên Vercel hoặc Redis tự host
  const pubClient = createClient({
    url: process.env.REDIS_URL // redis://... hoặc rediss://...
  });
  const subClient = pubClient.duplicate();

  await Promise.all([pubClient.connect(), subClient.connect()]);

  io.adapter(createAdapter(pubClient, subClient));
  console.log('Redis adapter đã kết nối');
}

// Trong main function
await setupRedisAdapter(io);

# render.yaml
services:
  - type: web
    name: chat-socket-server
    env: node
    buildCommand: npm install
    startCommand: node server.js
    envVars:
      - key: REDIS_URL
        fromService:
          type: redis
          name: chat-redis
          property: connectionString

databases:
  - name: chat-redis
    type: redis

const io = new Server(httpServer, {
  // Bắt đầu bằng polling, upgrade lên WebSocket
  transports: ['polling', 'websocket'],
  // Hoặc chỉ dùng WebSocket (nếu biết user không bị firewall chặn)
  // transports: ['websocket']
});

// Rate limiting đơn giản với Map
const rateLimiter = new Map();

chatNS.use((socket, next) => {
  const userId = socket.data.userId;
  const now = Date.now();
  const userRecord = rateLimiter.get(userId) || { count: 0, resetAt: now + 60000 };

  if (now > userRecord.resetAt) {
    userRecord.count = 0;
    userRecord.resetAt = now + 60000; // Reset mỗi phút
  }

  if (userRecord.count > 60) { // Tối đa 60 msg/phút
    return next(new Error('Gửi tin quá nhanh, vui lòng thử lại'));
  }

  userRecord.count++;
  rateLimiter.set(userId, userRecord);
  next();
});