Socket.io: Xây dựng ứng dụng Chat Real-time với Node.js từ A đến Z

Bạn đã bao giờ tự hỏi làm thế nào các ứng dụng như Zalo, Messenger hay Discord có thể gửi/nhận tin nhắn tức thì mà không cần tải lại trang? Bí mật nằm ở giao thức WebSocket và thư viện Socket.io – “vũ khí lợi hại” cho lập trình real-time trong thế giới Node.js.

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một ứng dụng chat hoàn chỉnh từ A đến Z, kèm theo tính năng “User đang soạn tin…” để tăng trải nghiệm tương tác. Bạn sẽ hiểu rõ cơ chế hai chiều, cách quản lý phòng chat (Room) và các best practices quan trọng.

⚠️ Lưu ý về phiên bản: Bài hướng dẫn sử dụng Socket.io v4.x và Node.js 18+. Nếu bạn dùng React/Angular, hãy kiểm tra lại cách tích hợp client vì các framework có thể thay đổi cú pháp.

---

WebSocket là gì? Tại sao HTTP không đủ tốt?

Giao thức HTTP truyền thống – “Hỏi – Đáp” bất tiện

HTTP hoạt động theo mô hình request/response: trình duyệt gửi yêu cầu lên server, server trả về dữ liệu rồi đóng kết nối. Muốn cập nhật tin nhắn mới, client phải liên tục “hỏi” server (polling) – vừa chậm vừa tốn tài nguyên.

WebSocket – Kênh liên lạc hai chiều luôn mở

WebSocket tạo một kết nối duy nhất, lâu dài giữa client và server. Cả hai bên có thể gửi dữ liệu cho nhau bất cứ lúc nào mà không cần “bắt tay” lại. Điều này giúp:

• Tin nhắn đến ngay lập tức (real-time).
• Giảm tải server nhờ không phải mở/đóng kết nối liên tục.
• Tiết kiệm băng thông hơn so với polling.

---

Socket.io vs WebSockets: Khi nào dùng cái nào?

WebSocket thuần (thư viện ws trong Node.js) rất mạnh, nhưng bạn phải tự xử lý:

• Tự động kết nối lại khi mất mạng.
• Broadcast tin nhắn đến nhiều client.
• Phân biệt room/namespace.
• Hỗ trợ fallback (nếu trình duyệt cũ không hỗ trợ WebSocket, Socket.io tự động chuyển sang long-polling).

Socket.io ra đời để giải quyết những vấn đề đó. Nó cung cấp một lớp abstraction giúp bạn code nhanh hơn, ít lỗi hơn. Dưới đây là bảng so sánh nhanh:

Tính năng	WebSocket thuần	Socket.io
Kết nối lại tự động	❌ Tự code	✅ Có sẵn
Broadcast / Room	❌ Tự code	✅ socket.broadcast, io.to(room)
Fallback cho trình duyệt cũ	❌	✅ (long-polling)
Xác thực trong handshake	❌	✅ middleware

Khi nào dùng Socket.io? – Hầu hết các ứng dụng real-time như chat, bảng điều khiển live, game online. Chỉ nên dùng WebSocket thuần nếu bạn cần hiệu năng tối đa và sẵn sàng tự implement các tính năng trên.

---

Xây dựng Server Socket.io với Express

Bước 1: Khởi tạo dự án và cài đặt thư viện

mkdir chat-app
cd chat-app
npm init -y
npm install express socket.io

Bước 2: Tạo file server index.js

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: '*', // Chỉ dùng '*' trong development, production set domain cụ thể
    methods: ['GET', 'POST']
  }
});

// Phục vụ file tĩnh (client HTML, CSS, JS)
app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log(`User ${socket.id} vừa kết nối`);

  // Lắng nghe sự kiện 'chat message' từ client
  socket.on('chat message', (msg) => {
    console.log('Message nhận:', msg);
    // Gửi lại cho tất cả client khác (broadcast)
    socket.broadcast.emit('chat message', msg);
  });

  // Xử lý ngắt kết nối
  socket.on('disconnect', () => {
    console.log(`User ${socket.id} đã thoát`);
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server chạy tại http://localhost:${PORT}`);
});

Giải thích code:

• io.on('connection') – lắng nghe mọi kết nối client mới.
• Mỗi client có một socket riêng, dùng để gửi/nhận sự kiện.
• socket.on('chat message', callback) – nhận sự kiện từ client.
• socket.broadcast.emit('chat message', msg) – gửi tin nhắn đến tất cả client khác (trừ chính nó). Đây là cách phổ biến trong chat nhóm.
• Cấu hình cors: { origin: '*' } – giải quyết lỗi CORS khi client chạy ở một cổng khác (ví dụ 5500, 8080). Trong production, hãy thay '*' bằng tên miền thật của bạn.

Bước 3: (Mở rộng) Quản lý Room theo hướng dẫn từ Socket.io Docs

Theo tài liệu chính thức của Socket, bạn có thể tạo phòng chat riêng:

socket.on('join room', (roomName) => {
  socket.join(roomName);
  io.to(roomName).emit('message', `${socket.id} đã tham gia ${roomName}`);
});

Điều này giúp giảm tải dữ liệu phát đi vì chỉ gửi đúng những người trong cùng phòng.

---

Kết nối Client và truyền nhận Message

Tạo giao diện chat đơn giản

Trong thư mục public, tạo file index.html:

<!DOCTYPE html>
<html>
<head>

<title>Chat real-time với Socket.io</title>

<style>
    body { font-family: Arial; margin: 20px; }
    #messages { list-style: none; margin: 0; padding: 0; height: 300px; overflow-y: scroll; border: 1px solid #ccc; }
    #messages li { padding: 8px; border-bottom: 1px solid #eee; }
    #form { display: flex; margin-top: 10px; }
    #input { flex: 1; padding: 8px; }
    button { padding: 8px 16px; }
    .typing { font-style: italic; color: gray; margin-top: 5px; }
  </style>
</head>
<body>

<h1>Chat Room</h1>
  <ul id="messages"></ul>
  <div id="typing" class="typing"></div>
  <form id="form">
    <input id="input" autocomplete="off" />
    <button>Gửi</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io(); // Tự động kết nối đến server cùng origin

    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const messages = document.getElementById('messages');
    const typingDiv = document.getElementById('typing');

    let typingTimeout;
    let stopTypingTimer; // Timer riêng cho việc ẩn thông báo "đang soạn tin"

    // Gửi tin nhắn
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    // Nhận tin nhắn từ server
    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });

    // **Tính năng "đang soạn tin"** (unique angle)
    input.addEventListener('keypress', () => {
      socket.emit('typing');
      clearTimeout(typingTimeout);
      typingTimeout = setTimeout(() => {
        socket.emit('stop typing');
      }, 1000);
    });

    socket.on('user typing', (username) => {
      // Nếu không có username (stop typing) thì xóa thông báo
      if (!username) {
        typingDiv.textContent = '';
        return;
      }
      typingDiv.textContent = `${username} đang soạn tin...`;
      clearTimeout(stopTypingTimer);
      stopTypingTimer = setTimeout(() => {
        typingDiv.textContent = '';
      }, 1500);
    });
  </script>
</body>
</html>

Cập nhật server để xử lý sự kiện typing

Thêm vào phần socket.on('connection') trong index.js:

socket.on('typing', () => {
  // Gửi tên hiển thị tạm thời (lấy từ socket.id). Trong thực tế, bạn nên lấy từ thông tin user đã xác thực.
  socket.broadcast.emit('user typing', socket.id.slice(0,5));
});

socket.on('stop typing', () => {
  // Gửi sự kiện dừng gõ với giá trị falsy để client ẩn thông báo
  socket.broadcast.emit('user typing', null);
});

Giải thích: Khi người dùng gõ bàn phím, client gửi sự kiện typing. Server nhận và broadcast user typing kèm theo ID rút gọn của người gõ (chỉ để minh họa; với xác thực thực tế, bạn sẽ gửi tên người dùng).
Khi người dùng ngừng gõ sau 1 giây, client gửi stop typing, server broadcast user typing với giá trị null – client sẽ xóa thông báo.

---

Những lỗi thường gặp và cách khắc phục

1. Lỗi CORS khi kết nối client-server

Nguyên nhân: Client chạy ở một origin khác (ví dụ http://localhost:5500) trong khi server ở http://localhost:3000 mà không cấu hình CORS.

Cách fix: Khi khởi tạo Socket.io server, thêm config:

const io = new Server(server, {
  cors: {
    origin: 'http://localhost:5500', // hoặc '*' cho dev
    methods: ['GET', 'POST']
  }
});

Trên client, nếu không dùng cùng origin, hãy chỉ định URL khi tạo io('http://localhost:3000').

2. Tin nhắn gửi đi nhưng không ai nhận được (kể cả người gửi)

Nguyên nhân: Dùng socket.emit() thay vì io.emit() hoặc socket.broadcast.emit().

• socket.emit() chỉ gửi về đúng client đó.
• socket.broadcast.emit() gửi tất cả trừ client hiện tại.
• io.emit() gửi tất cả client (kể cả người gửi).

Hãy kiểm tra bạn đã dùng đúng phương thức chưa.

3. Kết nối bị ngắt giữa chừng

Do mạng không ổn định. Socket.io v4 có cơ chế reconnection mặc định, nhưng bạn có thể cấu hình thêm:

const socket = io({
  reconnectionAttempts: 5,
  reconnectionDelay: 1000
});

---

Best Practices cho ứng dụng Socket.io

1. Luôn xác thực user trước khi cho kết nối
   Dùng middleware hoặc token (JWT) ngay trong handshake.
   👉 Xem thêm: Xác thực JWT trong Node.js – áp dụng tương tự cho Socket.io.

2. Sử dụng Room để giảm tải dữ liệu phát đi
   Không nên gửi tin nhắn đến toàn bộ kết nối. Thay vào đó, hãy tổ chức các phòng (Room) như hướng dẫn từ Socket.io Docs.

3. Luồng dữ liệu nhỏ gọn
   Tránh gửi cả object user phức tạp mỗi lần chat. Chỉ gửi userId, message, timestamp.

4. Xử lý lỗi và ngắt kết nối đúng cách
   Giải phóng tài nguyên ở socket.on('disconnect'), đặc biệt nếu bạn lưu danh sách user online.

5. Scale với Redis Adapter (phiên bản mới)
   Nếu ứng dụng của bạn chạy trên nhiều server (cluster), hãy dùng @socket.io/redis-adapter (cho Socket.io v4 trở lên) để đồng bộ sự kiện giữa các instance.
   Tham khảo: Socket.io – Using multiple nodes và @socket.io/redis-adapter.

---

Câu hỏi thường gặp (FAQ)

Socket.io có tốn tài nguyên không?

Socket.io khá nhẹ. Mỗi kết nối WebSocket thường chiếm vài chục KB RAM (con số thực tế phụ thuộc vào ứng dụng). Với fallback long-polling, chi phí có cao hơn đôi chút, nhưng vẫn chấp nhận được cho hàng nghìn kết nối đồng thời. Nếu bạn có hàng trăm nghìn user, cần thiết kế theo dạng cluster và dùng Redis.

Làm sao để scale Socket.io lên nhiều server?

Sử dụng @socket.io/redis-adapter (cho v4.x) hoặc socket.io-redis (cho v3). Mỗi server Socket.io sẽ publish/subscribe qua một kênh chung (Redis) để gửi tin nhắn đến đúng user dù họ đang kết nối vào server nào. Tham khảo: Socket.io – Using multiple nodes.

---

Kết luận

Bạn vừa hoàn thành một ứng dụng chat real-time hoàn chỉnh với Socket.io và Node.js, có thêm tính năng “đang soạn tin” – thứ mà các bài hướng dẫn cơ bản thường bỏ qua. Qua bài viết, bạn cũng nắm được sự khác biệt giữa WebSocket thuần và Socket.io, cách khắc phục lỗi CORS, và các best practices để chuẩn bị cho môi trường production.

Đừng dừng lại ở đây! Hãy thử mở rộng ứng dụng với:

• Đăng nhập và hiển thị avatar.
• Gửi ảnh/file.
• Phòng chat riêng (Room).

---

Chúc bạn thành công và hẹn gặp lại ở các bài viết tiếp theo về real-time communication!