ChatHub là bộ giải pháp liên lạc thời gian thực toàn diện (Real-time Communication Suite) kết hợp bộ ba công nghệ cốt lõi: nhắn tin văn bản/hình ảnh tức thời qua Socket.io, đàm thoại thoại (Voice Call) & video (Video Call) trực tiếp ngang hàng P2P qua WebRTC với độ trễ dưới 50ms, và hệ thống thông báo đẩy trên trình duyệt (Browser Web Push Notifications) qua Firebase Cloud Messaging (FCM).

Được thiết kế để giải quyết nhu cầu networking và kết nối xã hội không rào cản, ChatHub đảm bảo trải nghiệm giao tiếp liên tục ngay cả khi người dùng thu nhỏ tab trình duyệt hoặc làm việc trên ứng dụng khác. Hệ thống hỗ trợ 32 bộ theme màu cá nhân hóa từ DaisyUI, quản lý phiên an toàn qua JWT HTTP-only cookies và kiến trúc phân cụm (clustering) sẵn sàng mở rộng trên hạ tầng đám mây.

Trải nghiệm đàm thoại WebRTC: Người dùng có thể bắt đầu cuộc gọi thoại hoặc gọi video trực tiếp từ thanh ChatHeader. Màn hình DeviceLobby cho phép kiểm tra thiết bị, xem trước camera và xin quyền micro/camera trước khi kết nối. Trong cuộc gọi, giao diện trôi nổi CallOverlay (PiP) cung cấp đầy đủ điều khiển: chuyển đổi camera trước/sau, tắt/bật mic, tắt/bật camera độc lập, đếm thời lượng cuộc gọi và lưu trữ lịch sử trong CallHistory (cuộc gọi đến, cuộc gọi đi, cuộc gọi nhỡ).

Thông báo đẩy trình duyệt (Web Push Notifications): Khi người dùng đang ở tab khác hoặc thu nhỏ trình duyệt (document.visibilityState === "hidden"), Service Worker của Firebase vẫn tiếp nhận tín hiệu từ máy chủ và hiển thị thông báo cuộc gọi của hệ điều hành với âm thanh chuông, rung đa nhịp (vibrate: [200, 100, 200, 100, 200, 100, 200]) cùng 2 nút hành động trực tiếp "Trả lời cuộc gọi" và "Từ chối" ngay trên banner thông báo.

Trải nghiệm nhắn tin & cá nhân hóa: Tin nhắn văn bản và hình ảnh truyền tải tức thời qua Socket.io kèm chỉ báo đang gõ (typing indicator) và trạng thái online (presence). Người dùng có thể tùy biến toàn bộ giao diện theo 32 theme màu độc đáo (retro, cyberpunk, luxury...) thông qua engine CSS variables mà không cần reload trang; ảnh đại diện và media đính kèm được tối ưu phân phối qua mạng lưới CDN của Cloudinary.

Frontend xây dựng trên React + Vite, styling bằng Tailwind CSS và DaisyUI. Trạng thái client được quản lý tinh gọn bằng Zustand (useAuthStore, useChatStore, useCallStore). Luồng WebRTC được thiết kế state machine 1 chiều nghiêm ngặt (idle -> ringing/calling -> connecting -> connected -> idle), loại bỏ state "ending" để triệt tiêu lỗi lặp vô tận ICE candidate loop. Tách biệt hoàn toàn tín hiệu điều khiển media (toggleAudio, toggleVideo) thành các payload độc lập, áp dụng Google Meet pattern bằng cách gọi replaceTrack(null) và bắt sự kiện onmute/onunmute ở remote track level giúp tắt camera tức thì mà không làm đứng khung hình (freeze frame).

Một thẻ <audio autoPlay playsInline hidden> chuyên dụng được đặt độc lập trong DOM và bind với remoteStream, giải quyết triệt để lỗi mất tiếng trong cuộc gọi thoại khi thẻ video bị ẩn. Để chống crash driver thiết bị do spam click, Zustand tích hợp debounce lock _isTogglingVideo khóa lệnh gọi khởi tạo camera thiết bị.

Backend chạy trên Node.js với Express và MongoDB (Mongoose ODM). Hạ tầng thời gian thực tích hợp @socket.io/redis-adapter kết nối Upstash Redis qua giao thức bảo mật rediss://, sẵn sàng scale ngang nhiều cụm instances. Rate-limiter dựa trên Redis khóa tối đa 5 cuộc gọi/phút chống spam API (call:rate:${userId}). Bộ đệm RAM 5 phút cho TURN/STUN Metered API kèm fallback sang STUN Google (stun.l.google.com). Cron job tự động ping /api/health mỗi 14 phút vượt qua cơ chế ngủ đông (cold-start / spin-down) của Render Free Tier. Firebase Admin SDK được khởi tạo an toàn với bộ parse private key PEM chống sập máy chủ.

Công nghệ sử dụng: React, Express, MongoDB, WebRTC, Socket.io, Upstash Redis, Firebase FCM, DaisyUI, Tailwind CSS, Cloudinary.

Mã nguồn trải qua đợt tái cấu trúc toàn diện 28 file changes theo phương pháp STAR (Situation, Task, Action, Result) ngày 21/03/2026, giải quyết triệt để 4 vấn đề kỹ thuật hóc búa: vòng lặp đứt gãy state machine WebRTC, bug mất tiếng voice call, hiện tượng tắt camera bị đứng khung hình, và xung đột khi người thứ 3 gọi tới trong lúc hai bên đang bận bằng Promise.all([isUserBusy(userId), isUserBusy(to)]) phát tín hiệu bận tức thì.

Hệ thống Web Push được kiến tạo bằng cách kết hợp Firebase Cloud Messaging (FCM) ở backend và Service Worker ở frontend, đăng ký VAPID key và quản lý token thiết bị trong database để đảm bảo mọi cuộc gọi nhỡ và tin nhắn quan trọng đều được chuyển phát xuyên suốt đến người nhận.