Messenger - Ứng dụng chat real-time

Messenger — Ứng dụng chat real-time

Nhắn tin thời gian thực · Laravel tách module · Tự triển khai hạ tầng realtime

Vai trò: Solo developer. Tôi tự thiết kế kiến trúc, build product và triển khai toàn bộ stack.

Laravel · Next.js · TypeScript · Redis · Socket.io · Docker · MySQL · Redux Toolkit · React Query

Messenger là ứng dụng chat hỗ trợ nhắn tin 1-1 và nhóm, gửi file/ảnh, reaction và trạng thái đã xem. Mục tiêu kỹ thuật chính là hiểu và kiểm soát toàn bộ đường đi realtime từ lúc ghi DB, broadcast qua Redis cho tới khi client nhận event.

Kiến trúc Hệ thống

graph LR
    Client["Next.js Client"]
    Nginx["Nginx<br/>Reverse Proxy"]
    PHP["PHP-FPM<br/>Laravel API"]
    MySQL["MySQL 8"]
    Redis["Redis"]
    Echo["Laravel Echo Server"]
    Worker["Queue Worker<br/>Supervisor"]

    Client -->|HTTP API| Nginx
    Nginx --> PHP
    PHP --> MySQL
    PHP -->|Broadcast event| Redis
    Redis -->|Pub/Sub| Echo
    Echo -->|Socket.io| Client
    PHP -->|Queue job| Redis
    Redis -->|Process job| Worker
    Worker --> MySQL

Client gọi HTTP API qua Nginx; Laravel lưu DB rồi broadcast event vào Redis. Redis pub/sub đẩy tới Laravel Echo Server, Echo đẩy qua Socket.io tới client. Queue job xử lý qua Worker. Trade-off: tự quản lý Echo Server, đổi lại hiểu rõ real-time infrastructure từ gốc.

Real-time Messaging

Vấn đề: Chat cần tin nhắn hiển thị ngay cả hai phía, không polling. Đồng bộ trạng thái (đã gửi, đã xem) và cập nhật sidebar conversation theo thời gian thực.

Giải pháp: Event-driven pipeline qua Redis pub/sub, broadcast tới client qua Socket.io.

Cách thực hiện:

• User gửi tin nhắn → API lưu DB → dispatch MessagesSentEvent → broadcast qua Redis channel tới Laravel Echo Server
• Echo Server đẩy event qua Socket.io tới mọi client subscribe conversation đó
• Frontend hook useRealtimeConversationMessagesUpdate lắng nghe event, cập nhật Redux store ngay
• Sidebar cập nhật qua SidebarUpdated — preview tin nhắn mới nhất, đẩy conversation lên đầu
• Trạng thái tin nhắn (sent → delivered → seen) qua MessageUpdatedEvent, real-time cho người gửi

Kết quả: Tin nhắn hiển thị gần như tức thì hai phía. UI đồng bộ không cần refresh — message list, sidebar preview, trạng thái đã xem. Reconnect và duplicate events xử lý bằng debounce + refetch strategy sau reconnect thay vì tin mọi event nhận được.

sequenceDiagram
    participant A as User A (Browser)
    participant API as Laravel API
    participant R as Redis
    participant E as Echo Server
    participant B as User B (Browser)

    A->>API: POST /messages (gửi tin nhắn)
    API->>API: Lưu DB + dispatch event
    API-->>A: 200 OK (response)
    API->>R: Broadcast MessagesSentEvent
    R->>E: Pub/Sub channel
    E->>B: Socket.io emit
    B->>B: Hook cập nhật Redux store
    Note over B: Tin nhắn hiện ngay, sidebar cập nhật

Modular Monolith — Tổ chức code theo domain

Vấn đề: Nhiều feature (auth, chat, media, user) gom trong app/ dễ khó tìm code và coupling giữa phần không liên quan.

Giải pháp: Laravel Modules (nwidart) — 4 module độc lập, mỗi module có MVC riêng.

Cách thực hiện:

• 4 modules: Auth (login, OAuth), Conversation (chat logic), Media (upload file/ảnh), User (profile, contacts)
• Mỗi module: Models, Services, Controllers, Repositories, Transformers, Routes, Migrations
• Repository pattern: Service gọi Repository, không gọi Model trực tiếp
• Transformer pattern: format API response nhất quán, không trả raw model
• Frontend mirror: features/auth, features/chat — mỗi feature có hooks, services, slices, sections riêng

Kết quả: Sửa logic gửi tin nhắn chỉ vào Modules/Conversation/. Mỗi module như mini-app với boundary rõ.

graph TB
    subgraph Backend["Laravel Backend"]
        Auth["Auth Module<br/>Login, Register, OAuth"]
        Conv["Conversation Module<br/>Messages, Groups, Status"]
        Media["Media Module<br/>Upload, Storage, Transform"]
        User["User Module<br/>Profile, Contacts"]
    end

    subgraph Frontend["Next.js Frontend"]
        FAuth["features/auth<br/>Login, Register pages"]
        FChat["features/chat<br/>Chat UI, hooks, slices"]
    end

    Conv --> Media
    Conv --> User
    Auth --> User
    FChat --> FAuth

Dockerized Deployment

Vấn đề: 7 services (PHP, Nginx, MySQL, Redis, Echo Server, Queue Worker, Mailcatcher) chạy đồng thời — setup thủ công trên máy mới mất thời gian và dễ sai config.

Giải pháp:

• Docker Compose: docker-compose.yml (dev), docker-compose.production.yml (production)
• Health checks mọi service — container start khi dependency đã healthy
• Network: backend cho web traffic, database (internal) cho MySQL + Redis — không expose DB
• Resource limits (CPU/RAM) per container trong production
• Supervisor quản lý queue worker — tự restart nếu crash

Kết quả: Clone repo → docker compose up → toàn bộ stack chạy. Tách internal vs public network rõ.

CI/CD & Deploy

• Container: Docker Compose, 7 services, health checks, resource limits
• Deploy: docker compose -f docker-compose.production.yml up -d, auto DB migrate qua environment flag
• Monitoring: Health checks tích hợp, Supervisor auto-restart queue worker