[Open Source] #145 - DumbPad: Hệ thống soạn thảo Markdown cộng tác thời gian thực với Node.js, WebSockets và kiến trúc Operational Transformation tối giản

Việc xây dựng một công cụ soạn thảo cộng tác (Collaborative Editor) như Google Docs thường đòi hỏi những thuật toán cực kỳ phức tạp để giải quyết xung đột dữ liệu. DumbPad giải quyết bài toán này với triết lý "Stupid Simple" — đơn giản đến mức tối đa nhưng vẫn đảm bảo trải nghiệm mượt mà. Đây là giải pháp hoàn hảo cho việc ghi chú nhanh, soạn thảo mã nguồn hoặc viết tài liệu Markdown với khả năng đồng bộ con trỏ và nội dung theo thời gian thực mà không cần đến cơ sở dữ liệu cồng kềnh.

Dưới góc độ kỹ thuật, DumbPad là một minh chứng xuất sắc về việc ứng dụng WebSockets, kỹ thuật Operational Transformation (OT) tối giản và kiến trúc Manager Pattern phía Frontend.

Github: https://github.com/canutin/DumbPad

🛠️ 1. Nền tảng công nghệ: Sức mạnh của sự tinh gọn

DumbPad loại bỏ mọi rào cản về hiệu năng bằng cách tận dụng tối đa các công nghệ lõi:

• Backend Core (Node.js & Express): Sử dụng Node.js để quản lý API và phục vụ các tệp tin văn bản thô. Toàn bộ dữ liệu được lưu trữ trực tiếp dưới dạng tệp .txt, giúp việc sao lưu và quản lý thủ công trở nên cực kỳ dễ dàng.
• Real-time Engine (WebSockets): Sử dụng thư viện ws để thiết lập kênh truyền tin hai chiều độ trễ thấp, phục vụ việc đồng bộ hóa nội dung và vị trí con trỏ (remote cursors) giữa hàng chục người dùng cùng lúc.
• Frontend (Vanilla JS & Marked.js): Nói không với các framework cồng kềnh, DumbPad sử dụng JavaScript thuần để đạt tốc độ tải trang tức thì. Việc render Markdown được đảm nhiệm bởi Marked.js kết hợp với Highlight.js (hỗ trợ lazy-loading ngôn ngữ).
• Infrastructure (Dockerized PWA): Được đóng gói hoàn chỉnh qua Docker, hỗ trợ cài đặt như một ứng dụng di động thông qua tiêu chuẩn PWA, cho phép truy cập nhanh từ màn hình chính điện thoại.

🏗️ 2. Trụ cột kiến trúc: Manager Pattern và Chiến lược xử lý xung đột

Kiến trúc của DumbPad được thiết kế theo hướng module hóa chặt chẽ, tách biệt rõ ràng các nhiệm vụ:

• Frontend Manager Architecture: Để quản lý logic JS thuần, dự án chia thành các lớp quản lý độc lập (CollaborationManager, OperationsManager, CursorManager, SearchManager). Cách tiếp cận này giúp mã nguồn dễ bảo trì và mở rộng tương tự như kiến trúc Component-based.
• Minimalist Operational Transformation (OT): DumbPad triển khai một phiên bản rút gọn của thuật toán OT. Khi nhiều người dùng cùng tác động vào văn bản, hệ thống sẽ tính toán lại chỉ số vị trí (offset) của các ký tự để đảm bảo các thay đổi không ghi đè lên nhau, duy trì tính toàn vẹn của nội dung.
• Constant-time Security: Trong khâu xác thực, dự án sử dụng crypto.timingSafeEqual để so sánh mã PIN. Đây là kỹ thuật chuyên sâu nhằm ngăn chặn các cuộc tấn công "Timing attacks" — nơi hacker có thể đoán mật khẩu dựa trên sự chênh lệch thời gian xử lý của CPU.

🔄 3. Workflow: Vòng đời của một thao tác soạn thảo cộng tác (Sequence Diagram)

Sơ đồ mô tả quy trình từ lúc người dùng gõ phím đến khi nội dung được đồng bộ toàn cầu:

⚡ 4. Các kỹ thuật "Pro-level" trong mã nguồn

1. Smart Proxy IP Extraction: Tệp ipExtractor.js xử lý thông minh các tiêu đề X-Forwarded-For, hỗ trợ kiểm tra "Trusted Proxies" (như Cloudflare, Nginx). Điều này cực kỳ quan trọng trong việc chặn tấn công Brute-force khi ứng dụng chạy sau các lớp cân bằng tải.
2. Lazy-loading Syntax Highlighting: Hệ thống tự động phân tích ngôn ngữ lập trình trong các khối code (code blocks) và chỉ tải các module ngôn ngữ cần thiết từ server, giúp giảm 90% dung lượng JS ban đầu.
3. Fuzzy Internal Search: Tích hợp Fuse.js ở backend để thực hiện tìm kiếm mờ không chỉ trên tên file mà còn len lỏi vào nội dung bên trong các tệp tin, mang lại khả năng tra cứu tri thức cực nhanh.
4. Print-optimized CSS: DumbPad có bộ CSS chuyên dụng cho việc in ấn, tự động mở rộng tất cả các đề mục đang thu gọn và điều chỉnh màu sắc để bản in Markdown trông chuyên nghiệp như một tài liệu PDF được dàn trang.

⚖️ 5. So sánh chiến lược

✅ Kết luận: Tại sao DumbPad là bài học về tính thực dụng?

DumbPad chứng minh rằng một ứng dụng cộng tác không nhất thiết phải dựa trên các hạ tầng khổng lồ. Bằng cách tập trung vào hiệu năng của WebSocket và sự đơn giản của File System, dự án đã tạo ra một công cụ soạn thảo Markdown vừa mạnh mẽ, vừa nhẹ nhàng, sẵn sàng cho mọi nhu cầu ghi chú tức thời.

Đối với các lập trình viên Backend, nghiên cứu DumbPad mang lại giá trị về:

• Kỹ thuật xử lý Cộng tác thời gian thực quy mô nhỏ.
• Tư duy thiết kế Hệ thống tệp tin làm cơ sở dữ liệu.
• Cách xây dựng Bảo mật tầng thấp (Timing-safe, Proxy validation).