Vodka
Next.js
NestJS
React Native
PostgreSQL
Redis
WebSocket (Socket.io)

Vodka

0 lượt xem

Thông tin chung

Đồ án môn học02/2025 – 05/2025 · 4 tháng phát triển

Ứng dụng nhắn tin thời gian thực

Môn học: Công nghệ mới trong phát triển ứng dụng

Thành viên

Mã nguồn

Thành phầnChức năngCông nghệThực hiện
FrontendWebsite nhắn tin thời gian thựcNext.jsTâm, CảnhGitHub
BackendAPI server và logic nghiệp vụNestJSKhang, CảnhGitHub
MobileỨng dụng nhắn tin thời gian thực trên di độngReact NativeKiên, KhangGitHub

Giới thiệu

Vodka là ứng dụng nhắn tin thời gian thực tương tự Zalo, cho phép người dùng kết nối, trò chuyện và chia sẻ khoảnh khắc với bạn bè, gia đình trên cả web và di động.

Kiến trúc hệ thống

Web
Next.js 14App Router, SSR
shadcn/uiRadix UI, Tailwind
Zustandtrạng thái
Mobile
React NativeiOS, Android
ExpoExpo Router
ZustandNativeWind, gluestack
Backend · NestJS (container api)

Controllers · REST

CRUDĐăng nhập, đăng ký, OTPTải lịch sửSwagger /api

Gateways · Socket.io namespace

/message/groups/friends/auth/qr-code

Feature modules

UserAuthMessageGroupFriendContactStorageQR CodeAI

Prisma module

Truy cập PostgreSQL

Event module

EventEmitter2Module giao tiếp qua sự kiện

Cache module

Redis client
PostgreSQL 17 (container)
UserMessageGroupGroupMemberFriendContactRefreshToken
Redis 7 (container)
Mã OTPĐăng ký tạmPhiên làm việcCache dữ liệu
Dịch vụ bên ngoài
Supabaseảnh, file, video
Gemini2.0 Flash
Resendemail
AWS SNSOTP qua SMS

Vodka theo mô hình client-server kết hợp hướng sự kiện (event-driven). Web và mobile chỉ hiển thị và thu thập tương tác; toàn bộ nghiệp vụ nằm ở backend NestJS, chia thành các module tính năng (người dùng, xác thực, tin nhắn, nhóm, bạn bè, danh bạ, lưu trữ, mã QR, AI) dựa trên ba module lõi: Prisma, Event và Cache.

Ba kênh giao tiếp

  • REST (/api/v1, JWT): thao tác CRUD, đăng nhập, đăng ký, tải dữ liệu ban đầu. Tài liệu API sinh tự động bằng Swagger.
  • WebSocket (Socket.io, xác thực JWT khi bắt tay): tin nhắn, thông báo, trạng thái đang gõ và online. Mỗi loại kết nối một namespace riêng (/message, /groups, /friends, /auth, /qr-code). Mỗi người dùng ở phòng user:{userId}, mỗi nhóm chat một phòng group:{groupId}; thêm hay xóa thành viên nhóm thì vào hoặc ra phòng tương ứng.
  • Sự kiện nội bộ (EventEmitter2): các module báo cho nhau qua sự kiện thay vì gọi trực tiếp, nên ít phụ thuộc và dễ thêm tính năng mới.

Luồng gửi một tin nhắn

  1. 1Người dùng AClient AGửi tin nhắn
  2. 2Client AControllerGọi POST /messages kèm JWT
  3. 3ControllerMessageServiceKiểm tra quyền, xử lý nghiệp vụ
  4. 4MessageServicePostgreSQLLưu tin nhắn qua Prisma
  5. 5MessageServiceMessageGatewayPhát sự kiện qua EventEmitter
  6. 6MessageGatewayClient BĐẩy newMessage tới phòng user:{id} hoặc group:{id}
  7. 7Client BNgười dùng BHiển thị tin nhắn mới

Dữ liệu

  • PostgreSQL: dữ liệu chính (người dùng, tin nhắn, nhóm, bạn bè, danh bạ), nhất quán theo ACID; nội dung tin nhắn lưu dạng JSON để chứa cả văn bản lẫn media.
  • Redis: mã OTP, dữ liệu đăng ký tạm, phiên làm việc và cache dữ liệu hay truy cập như danh sách cuộc trò chuyện.
  • Supabase Storage: ảnh đại diện người dùng và nhóm, file, ảnh, video trong tin nhắn.

Xác thực và phân quyền

Access token sống 30 phút, refresh token 30 ngày. Guard của NestJS kiểm tra quyền theo vai trò trong nhóm: trưởng nhóm, phó nhóm, thành viên. Mã OTP gửi qua email (Resend) hoặc SMS (AWS SNS).

Triển khai

Docker Compose trên Coolify gồm ba container: API, PostgreSQL và Redis. API chờ PostgreSQL và Redis qua health check, tự chạy migration rồi mới khởi động. Có thay đổi trên nhánh chính thì hệ thống tự triển khai lại.

Tính năng

Nhắn tin thời gian thực

Gửi và nhận tin nhắn tức thì qua WebSocket.

Xác thực và hồ sơ người dùng

  • Đăng nhập bằng mã QR
  • Đăng nhập bằng email và mật khẩu

Tìm kiếm

  • Tìm bạn bè
  • Tìm tin nhắn

Trợ lý AI

  • Soạn email
  • Trả lời thông minh
  • Gợi ý nội dung

Giao diện hiện đại

Xây dựng bằng shadcn/ui và Tailwind CSS.

Bảo mật

Xác thực bằng JWT cho mọi kết nối.

Server-side rendering

Render phía server để trang tải nhanh.

Cài đặt tài khoản

  • Cập nhật email
  • Đổi số điện thoại
  • Quản lý mật khẩu

Công nghệ sử dụng

Framework

Next.js 14 (App Router)

Ngôn ngữ

TypeScript

UI components

shadcn/ui, Radix UI

Styling

Tailwind CSS

Quản lý trạng thái

Zustand

Thời gian thực

Socket.io (WebSocket)

Xác thực

JWT

Xử lý form

React Hook Form

Gọi API

Server Actions

Cơ sở dữ liệu

PostgreSQL

Giao diện ứng dụng

Trang chủ

Trang chào mừng giới thiệu tính năng và lợi ích của Vodka.

Trang chủ

Đăng nhập

Đăng nhập nhanh bằng mã QR.

Đăng nhập bằng mã QR

Đăng nhập bằng email và mật khẩu.

Đăng nhập bằng email và mật khẩu

Giao diện chat

Nhắn tin thời gian thực, xem lịch sử tin nhắn và gợi ý từ AI.

Giao diện chat

Bạn bè và tìm kiếm

Quản lý kết nối và tìm bạn mới.

Danh sách bạn bè

Trợ lý AI

Soạn email và trả lời thông minh bằng AI.

Trợ lý AI

Cài đặt

Quản lý tài khoản: email, số điện thoại, mật khẩu.

Cài đặt

Hồ sơ

Xem và chỉnh sửa hồ sơ người dùng.

Hồ sơ