Giới thiệu dự án

Sự bùng nổ của mạng xã hội (Social Media) như Facebook (hơn 1.5 tỷ người dùng hoạt động), Twitter và Instagram đã định hình lại phương thức giao tiếp toàn cầu. Tuy nhiên, các nền tảng đương đại đang đối mặt với những vấn đề nhức nhối: sự lan tràn của nội dung tiêu cực (toxic comments, hate speech), rào cản thao tác gõ phím truyền thống và độ trễ tương tác thời gian thực. Đồ án tốt nghiệp ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật TP.HCM với đề tài "Xây dựng Mạng xã hội bằng MERN Stack" (thực hiện bởi sinh viên Nguyễn Hoàng Huy và Phạm Nhựt Trường, dưới sự hướng dẫn của TS. Nguyễn Thành Sơn) tập trung giải quyết bài toán xây dựng một hệ thống mạng xã hội toàn diện, tích hợp trí tuệ nhân tạo (AI) và truyền thông thời gian thực.

Vấn đề nghiên cứu cụ thể

Hầu hết các nền tảng mạng xã hội vừa và nhỏ gặp khó khăn trong việc kiểm duyệt tự động nội dung phản cảm trước khi hiển thị, đồng thời thiếu các cơ chế tương tác đa phương thức (multimodal interaction) trực tiếp trên nền tảng web mà không cần cài đặt phần mềm bổ trợ.

Mục tiêu của đồ án

  1. Phát triển kiến trúc MERN Stack toàn diện: Tối ưu hóa việc truyền nhận dữ liệu đồng bộ và bất đồng bộ giữa MongoDB, ExpressJS, ReactJS và NodeJS.
  2. Tích hợp mô hình AI kiểm duyệt văn bản: Phát hiện và chặn tự động các từ ngữ tiêu cực (insult, obscene, threat, identity attack) với ngưỡng tin cậy xác định.
  3. Hiện thực hóa tính năng nhận dạng giọng nói: Cho phép người dùng tìm kiếm bạn bè và bài viết bằng khẩu lệnh tiếng Việt và tiếng Anh.
  4. Xây dựng hệ thống giao tiếp thời gian thực: Thiết lập kênh trò chuyện nhóm và cuộc gọi thoại/video độ trễ thấp sử dụng WebRTC.
  5. Phân tích tương tác người dùng: Hệ thống hóa cơ chế đo lường và thống kê lượt xem (view count) thời gian thực cho hình ảnh, video và bài đăng.

Giải pháp và phạm vi nghiên cứu

  • Tiếp cận: Ứng dụng Single Page Application (SPA) với ReactJS và Redux quản lý state tập trung, kết hợp RESTful API trên nền Node.js/Express và NoSQL database MongoDB Atlas. Xử lý suy luận AI trực tiếp tại client-side thông qua TensorFlow.js nhằm giảm tải tài nguyên tính toán cho máy chủ.
  • Kết quả kỳ vọng: Hệ thống đạt độ trễ socket $<100\text{ms}$, thời gian phản hồi API trung bình $<200\text{ms}$, độ chính xác phân loại độc hại đạt ngưỡng xác thực $>90%$.
  • Phạm vi & Giới hạn: Triển khai trên môi trường Web Browser (hỗ trợ Web Speech API và WebRTC), chưa phát triển ứng dụng Native Mobile riêng biệt.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Tiêu chí Facebook / Instagram Twitter (X) Giải pháp MERN của Đồ án
Kiến trúc dữ liệu Hybrid Graph/Relational (Cassandra, TAO) Distributed Relational & Key-Value Document-oriented NoSQL (MongoDB)
Kiểm duyệt nội dung Server-side AI quy mô lớn, độ trễ xử lý hàng rào Hậu kiểm dựa trên báo cáo người dùng Tiền kiểm Client-side AI (TensorFlow.js)
Giao tiếp P2P Máy chủ trung gian SFU/MCU băng thông lớn Giới hạn Audio Space WebRTC PeerJS trực tiếp (P2P Mesh)
Tìm kiếm giọng nói Tích hợp trợ lý ảo riêng Chưa hỗ trợ tìm kiếm giọng nói web Web Speech API đa ngôn ngữ (VI/EN) 
                       Yêu cầu hệ thống (MoSCoW)

Thiết kế hệ thống

Kiến trúc hệ thống được xây dựng theo mô hình 3 tầng (3-Tier Architecture):

  1. Client Tier: React.js 18.x kết hợp Redux Toolkit quản trị Global State, Axios xử lý HTTP Request, và PeerJS Client.
  2. Application Server Tier: Node.js v16.x kết hợp ExpressJS đóng vai trò API Gateway, tích hợp Middleware xác thực JWT và WebSockets Event Dispatcher.
  3. Database Tier: MongoDB Atlas Cluster với cấu trúc Document JSON linh hoạt, đánh chỉ mục (Index) tự động trên khóa _id và các trường định danh.
graph TD
    Client[ReactJS Client / Redux] -->|REST API Requests| Express[ExpressJS / NodeJS Server]
    Client -->|P2P Media Stream| PeerServer[WebRTC Signaling / PeerJS]
    Client -->|Local Inference| TF[TensorFlow.js Toxicity Engine]
    Express -->|CRUD Queries| Mongo[(MongoDB Atlas NoSQL)]
    Express -->|WebSocket Events| Socket[Real-time Socket Server]
    Socket -->|Instant Notifications| Client

Công nghệ sử dụng và phiên bản

  • Frontend: ReactJS 18.2.0, Redux 4.2.0, react-speech-recognition 3.10.0, react-text-toxicity 0.1.3, PeerJS 1.4.7.
  • Backend: NodeJS 16.15.0, ExpressJS 4.18.2, Socket.io 4.5.4, Mongoose 6.8.0, JSON Web Token 9.0.0.
  • Cơ sở dữ liệu: MongoDB Atlas v5.0+.

Thiết kế Database Schema chính

  • Users: _id, username, email, password (bcrypt hash), avatar, followers (Array of ObjectId), following (Array of ObjectId).
  • Posts: _id, content, images (Array), likes (Array of ObjectId), comments (Array of ObjectId), user (Ref Users), viewsCount (Number, default: 0).
  • Messages: _id, conversation (Ref Conversation), sender (Ref Users), recipient (Ref Users), text, media (Array), callInfo (Object).

Thiết kế API Endpoints chính

Method Endpoint Quyền truy cập Chức năng
POST /api/auth/login Public Xác thực người dùng, trả về Access Token
POST /api/posts Private (User) Tạo bài viết mới kèm kiểm duyệt dữ liệu
PATCH /api/posts/:id/view Private (User) Cập nhật lượt xem tự động cho bài viết
GET /api/users/search Private (User) Truy vấn người dùng theo từ khóa text/voice
POST /api/message Private (User) Gửi tin nhắn và kích hoạt Socket Event

Phương pháp phát triển (Methodology)

Dự án áp dụng mô hình Agile/Scrum rút gọn kéo dài từ ngày 15/08/2022 đến ngày 23/12/2022:

  • Giai đoạn 1 (15/08 - 30/09/2022): Khảo sát lý thuyết, thiết kế Use Case, Sequence Diagram và khởi tạo khung kiến trúc MERN.
  • Giai đoạn 2 (02/10 - 15/10/2022): Xây dựng các chức năng CRUD cơ bản (Authentication, Post Feed, User Profile).
  • Giai đoạn 3 (16/10 - 05/11/2022): Tích hợp Web Speech API cho Voice Search và WebRTC cho Audio/Video Calling.
  • Giai đoạn 4 (10/11 - 03/12/2022): Tích hợp mô hình AI Toxicity Classifier, Chat Group và hệ thống View Counting.
  • Giai đoạn 5 (04/12 - 23/12/2022): Kiểm thử toàn diện (Unit Test, Integration Test), tối ưu mã nguồn và đóng gói tài liệu.

Implementation và kết quả

Quy trình phát triển và Thuật toán cốt lõi

1. Mô hình lọc nội dung tiêu cực (Toxicity Classification)

Hệ thống sử dụng mô hình học chuyển giao (Transfer Learning) dựa trên Bộ mã hóa câu phổ quát (Universal Sentence Encoder) được huấn luyện trên tập dữ liệu Civil Comments (~2 triệu mẫu nhãn). Văn bản đầu vào được phân tích qua 6 nhãn nhị phân: identity_attack, insult, obscene, severe_toxicity, sexual_explicit, threat.

import useTextToxicity from "react-text-toxicity";

const PostCreationComponent = () => {
  const [content, setContent] = useState("");
  const { predictions, loading } = useTextToxicity(content);

  const handlePublishPost = async () => {
    // Ngưỡng phát hiện vi phạm đặt ở mức xác suất 0.90 (90%)
    const isToxic = predictions?.some(
      (prediction) => prediction.match === true && parseFloat(prediction.probability) >= 0.90
    );

    if (isToxic) {
      alert("Nội dung bài đăng chứa từ ngữ vi phạm tiêu chuẩn cộng đồng!");
      return;
    }
    
    // Tiến hành gọi API lưu bài viết nếu hợp lệ
    await api.post("/api/posts", { content });
  };
};

2. Xử lý giọng nói với Web Speech API

Chức năng tìm kiếm giọng nói trích xuất luồng âm thanh thông qua hàm getUserMedia, chuyển đổi tín hiệu dạng sóng sang biểu đồ phổ âm thanh (Spectrogram) và gửi đến Web Speech API để đối sánh văn bản:

import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const VoiceSearchBar = ({ onSearchResult }) => {
  const { transcript, listening, resetTranscript, browserSupportsSpeechRecognition } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Trình duyệt không hỗ trợ Web Speech API.</span>;
  }

  const handleStartSearch = (lang = 'vi-VN') => {
    resetTranscript();
    SpeechRecognition.startListening({ continuous: false, language: lang });
  };

  useEffect(() => {
    if (transcript) {
      onSearchResult(transcript);
    }
  }, [transcript]);
};

3. Thiết lập kết nối Audio/Video Call qua WebRTC & PeerJS

Giao thức P2P sử dụng Signaling server để trao đổi Session Description Protocol (SDP) và ICE Candidates:

import Peer from "peerjs";

// Khởi tạo đối tượng Peer với định danh người dùng
const peer = new Peer(currentUserId, {
  host: "/",
  port: 5000,
  path: "/peerjs"
});

// Xử lý luồng cuộc gọi đến
peer.on("call", (incomingCall) => {
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then((localStream) => {
      incomingCall.answer(localStream); // Trả lời cuộc gọi với local media stream
      incomingCall.on("stream", (remoteStream) => {
        remoteVideoRef.current.srcObject = remoteStream; // Hiển thị video đối phương
      });
    })
    .catch((err) => console.error("Lỗi truy cập thiết bị media:", err));
});

Kiểm thử và Đánh giá hiệu năng

                 Biểu đồ phân phối độ trễ hệ thống (ms)
  Socket.io Latency   [████░░░░░░░░░░░░░░░░░░░░] 42ms
  REST API Response   [████████░░░░░░░░░░░░░░░░] 85ms
  AI Client Inference [████████████░░░░░░░░░░░░] 128ms
  WebRTC P2P Handshake[████████████████████████] 240ms
Hạng mục kiểm thử Kịch bản kiểm thử Kết quả đạt được Trạng thái
Xác thực JWT Cấp token, bảo vệ Private Route Token hết hạn sau 24h, auto refresh Đạt (100%)
Kiểm duyệt AI 100 mẫu bình luận độc hại / thông thường Độ chính xác phát hiện vi phạm: 91.8% Đạt
Voice Search 50 mẫu khẩu lệnh tiếng Việt có dấu Tỷ lệ nhận diện đúng từ khóa: 88.5% Đạt
Tải ảnh tốc độ cao Upload đồng thời 10 hình ảnh độ phân giải cao Tối ưu hóa xử lý qua Cloudinary API Đạt

Đổi mới và đóng góp

  1. Kiểm duyệt nội dung phi tập trung (Decentralized Content Moderation): Thay vì dồn tải xử lý ngôn ngữ tự nhiên (NLP) về cụm máy chủ trung tâm gây thắt nút cổ chai (bottleneck), giải pháp ứng dụng mô hình client-side inference bằng TensorFlow.js giúp giảm 70% chi phí điện toán máy chủ đối với tác vụ phân loại văn bản.
  2. Tối ưu hóa băng thông thời gian thực: Sử dụng kiến trúc P2P WebRTC qua PeerJS cho phép truyền tải luồng video/audio trực tiếp giữa hai máy khách, cắt giảm 85% băng thông media relay so với giải pháp truyền thống qua WebSocket/RTMP server.
  3. Đa dạng hóa phương thức tương tác: Tích hợp song ngữ (Tiếng Việt - Tiếng Anh) cho cơ chế tìm kiếm bằng giọng nói, gia tăng khả năng tiếp cận (Accessibility) cho người dùng khuyết tật hoặc gặp khó khăn khi thao tác bàn phím.

Ứng dụng thực tế và triển khai

Kịch bản triển khai thực tế

  • Mạng xã hội nội bộ cho doanh nghiệp / trường học: Nơi sinh viên, giảng viên hoặc nhân viên trao đổi thông tin với môi trường giao tiếp lành mạnh được kiểm duyệt tự động.
  • Diễn đàn học tập trực tuyến: Tích hợp các nhóm thảo luận, gọi video trao đổi bài học và tra cứu thông tin nhanh bằng khẩu lệnh.

Hướng dẫn cài đặt và Cấu hình môi trường

1. Yêu cầu hệ thống

  • Hệ điều hành: Linux (Ubuntu 20.04 LTS trở lên), macOS hoặc Windows 10/11.
  • Node.js: Phiên bản >= 16.15.0, NPM >= 8.5.0.
  • Cơ sở dữ liệu: MongoDB Local v5.0+ hoặc tài khoản MongoDB Atlas Cloud.

2. Các bước triển khai Server & Client

# 1. Clone mã nguồn dự án
git clone https://github.com/username/mern-social-network.git
cd mern-social-network

# 2. Cài đặt và cấu hình Server
cd server
npm install
# Tạo file .env với các tham số:
# PORT=5000
# MONGODB_URL=mongodb+srv://<user>:<password>@cluster.mongodb.net/social_db
# ACCESS_TOKEN_SECRET=your_jwt_secret_key
npm start

# 3. Cài đặt và chạy Client
cd ../client
npm install
npm start

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Phụ thuộc phần cứng client: Mô hình TensorFlow.js trên trình duyệt tiêu tốn RAM và tài nguyên GPU/CPU của thiết bị đầu cuối cấu hình thấp.
  • Hạn chế mạng đối xứng (Symmetric NAT): WebRTC P2P có thể gặp tỷ lệ kết nối thất bại khoảng 10-15% nếu không cấu hình máy chủ TURN/STUN chuyên dụng.
  • Độ nhạy ngữ cảnh tiếng Việt: Mô hình Toxicity mã nguồn mở phát huy hiệu quả cao nhất trên dữ liệu tiếng Anh; một số từ lóng tiếng Việt viết tắt hoặc biến âm phức tạp chưa đạt độ chính xác tối ưu.

Hướng phát triển tương lai

  1. Xây dựng bộ dataset tiếng Việt chuyên sâu cho mô hình Toxicity và chuyển đổi sang kiến trúc BERT đa ngôn ngữ nhẹ (DistilBERT).
  2. Phát triển phiên bản Mobile App sử dụng React Native nhằm tái sử dụng 80% logic Redux và API sẵn có.
  3. Tích hợp máy chủ SFU (Selective Forwarding Unit) như Mediasoup để hỗ trợ cuộc gọi video nhóm từ 10 người trở lên.

Đối tượng hưởng lợi

  • Sinh viên & Học viên: Cung cấp tài liệu tham khảo chi tiết về cách xây dựng một ứng dụng React Universal hoàn chỉnh với kiến trúc 3 tầng chuẩn mực.
  • Lập trình viên Web Fullstack: Nắm bắt phương pháp kết hợp MERN Stack với các công nghệ tân tiến như WebRTC, TensorFlow.js và Web Speech API.
  • Doanh nghiệp vừa và nhỏ: Bộ khung mã nguồn mở có thể tùy biến thành mạng truyền thông nội bộ với chi phí vận hành hạ tầng tối thiểu.

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

1. Cần cấu hình hạ tầng như thế nào để triển khai hệ thống cho 10.000 người dùng hoạt động đồng thời?

Hệ thống cần tối thiểu 1 cụm Node.js (3-4 instances cân bằng tải bằng Nginx hoặc PM2 Cluster), cơ sở dữ liệu MongoDB Atlas M30+ (hỗ trợ Auto-scaling và Replica Sets) cùng hệ thống máy chủ STUN/TURN (như Coturn) để hỗ trợ thông suốt kết nối WebRTC.

2. Mô hình AI lọc nội dung độc hại hoạt động thế nào khi người dùng tắt kết nối Internet?

Do mô hình được nạp trực tiếp vào bộ nhớ trình duyệt qua thư viện @tensorflow-models/toxicity, quá trình suy luận (Inference) hoàn toàn độc lập với đường truyền mạng và hoạt động offline ngay tại máy khách.

3. Tại sao hệ thống chọn MongoDB thay vì hệ quản trị cơ sở dữ liệu quan hệ (RDBMS)?

MongoDB lưu trữ dữ liệu dưới dạng BSON Document linh hoạt, không yêu cầu cấu trúc bảng cố định. Điều này rất phù hợp với dữ liệu mạng xã hội có cấu trúc phân nhánh đa dạng (danh sách like, comment lồng nhau, trạng thái tin nhắn), đồng thời tăng tốc độ đọc ghi đáng kể nhờ cơ chế Indexing và RAM Caching.

4. Hệ thống giải quyết bài toán mất dữ liệu của MongoDB trong trường hợp sập nguồn đột ngột như thế nào?

Dự án kích hoạt cơ chế ghi nhật ký phục hồi (Journaling) trên MongoDB và cấu hình Write Concern { w: "majority", j: true } để đảm bảo dữ liệu được ghi nhận vào ổ cứng trước khi trả về phản hồi thành công.

5. Chi phí duy trì hạ tầng vận hành ước tính là bao nhiêu?

Nhờ tận dụng tính toán client-side và P2P data channel, chi phí vận hành cho quy mô dưới 5.000 người dùng chỉ rơi vào khoảng 15$ - 30$/tháng (chủ yếu cho MongoDB Atlas shared tier và máy chủ VPS cơ bản).

Kết luận

Đồ án "Xây dựng Mạng xã hội bằng MERN Stack" của nhóm sinh viên Trường Đại học Sư phạm Kỹ thuật TP.HCM đã hoàn thành xuất sắc các mục tiêu nghiên cứu và thực nghiệm đề ra. Dự án không chỉ dừng lại ở việc hiện thực hóa các tương tác mạng xã hội tiêu chuẩn mà còn tiên phong tích hợp trí tuệ nhân tạo kiểm duyệt nội dung, điều khiển bằng giọng nói và truyền thông đa phương tiện P2P thời gian thực. Đây là nền tảng kỹ thuật vững chắc, có tính ứng dụng cao và mở ra nhiều tiềm năng phát triển thành các sản phẩm thương mại hoàn chỉnh.