Biến Mất Xung Đột, Chỉ Còn Mượt Mà: Hướng Dẫn Xây Dựng Ứng Dụng Hợp Tác Với Phoenix LiveView và CRDTs

Lê Lân

25/07/2025

Xây Dựng Ứng Dụng Cộng Tác Thời Gian Thực Với Phoenix LiveView và CRDTs

Mở Đầu

Phần lớn các ứng dụng cộng tác sẻ chia hiện nay gặp vấn đề nghiêm trọng khi nhiều người cùng chỉnh sửa: đoạn văn bản biến mất, con trỏ va chạm, và các thay đổi của người dùng bị ghi đè hoặc mất đi.

Trong thế giới số hóa hiện đại, nhu cầu xây dựng các ứng dụng cộng tác thời gian thực — như Google Docs — ngày càng trở nên cấp thiết. Tuy nhiên, việc duy trì sự đồng bộ dữ liệu mượt mà trong nhiều người dùng luôn là thách thức không nhỏ. Bài viết này sẽ giới thiệu cách xây dựng các giao diện đa người dùng không xung đột, dựa trên Phoenix LiveView và Conflict-free Replicated Data Types (CRDTs)_. Bạn sẽ học được cách quản lý sự kiện từ người dùng, sử dụng cấu trúc dữ liệu có khả năng hợp nhất, hiển thị con trỏ trực tiếp và quản lý trạng thái tồn tại qua các kết nối mạng yếu. Tất cả đều được thực hiện từ phía server, không cần JavaScript phức tạp, bảo đảm hiệu năng và độ tin cậy cao.

Thách Thức: Hợp Tác Thực Sự Trong Ứng Dụng Web

Vấn Đề Khi Nhiều Người Cùng Chỉnh Sửa

Khi hai hoặc nhiều người cùng lúc nhập liệu trên một tài liệu, làm sao để các thay đổi không bị ghi đè hay mất mát? Với cách quản lý trạng thái đơn giản (naïve state), thay đổi của người dùng đến sau sẽ ghi đè lên dữ liệu của người trước, gây ra mất mát thông tin.

<b></b>

⚡ Cập nhật tức thì qua WebSocket

🔀 Cấu trúc dữ liệu cho phép hợp nhất dữ liệu (mergeable)

🖥️ Hiển thị trạng thái hiện diện, con trỏ, vùng chọn của người dùng khác

🧠 Trạng thái duy trì qua độ trễ và mất kết nối

Phoenix LiveView và CRDTs Đóng Vai Trò Gì?

Phoenix LiveView đảm nhận vận chuyển dữ liệu qua WebSocket và tái tạo giao diện người dùng theo trạng thái server. CRDTs giúp dữ liệu được đồng bộ giữa nhiều client mà không gây ra xung đột, dù thứ tự nhận sự kiện có khác nhau đồng thời.

Bước 1: Phát Tán Hành Động Người Dùng (Broadcast User Actions)

Mỗi Thao Tác Là Một Phép Toán Riêng Biệt

Thay vì gửi toàn bộ nội dung văn bản sau một lần chỉnh sửa, ứng dụng gửi từng hành động cụ thể, ví dụ:

Phoenix.PubSub.broadcast(MyApp.PubSub, "doc:123", %{ op: :insert, pos: 24, char: "a", user_id: "u9"})

Cách Đăng Ký và Nhận Thông Tin Trong LiveView

def mount(%{"doc_id" => doc_id}, _session, socket) do
  Phoenix.PubSub.subscribe(MyApp.PubSub, "doc:#{doc_id}")
  {:ok, assign(socket, crdt: MyCRDT.new())}
end

def handle_info(%{op: _, pos: _, char: _, user_id: _} = change, socket) do
  updated_crdt = MyCRDT.apply(socket.assigns.crdt, change)
  {:noreply, assign(socket, crdt: updated_crdt)}
end

<b>Ý nghĩa quan trọng:</b> Mỗi hành động chỉnh sửa là một sự kiện riêng biệt được truyền giữa các client thông qua PubSub, giúp đồng bộ chính xác và kịp thời.

Bước 2: Sử Dụng CRDT Có Khả Năng Hợp Nhất (Mergeable CRDT)

Lựa Chọn CRDT Dạng Chuỗi (Sequence-based)

CRDT dạng chuỗi như RGA hoặc Yjs rất phù hợp để lưu lại việc chèn/xóa văn bản vì:

Mỗi thao tác là một phần tử có thể đính kèm mã định danh duy nhất

Cho phép gộp các thay đổi từ nhiều client mà không gây mất dữ liệu

Không cần khóa (lock) hay ghi đè dữ liệu

Bạn có thể dùng các giải pháp như:

delta_crdt_ex để đồng bộ đa nút (peer sync)

Một GenServer tùy chỉnh chứa CRDT và phát lại dữ liệu delta

Mỗi LiveView duy trì bản sao nội bộ để tăng tốc độ hiển thị

Điểm mạnh của CRDTs là luôn hội tụ trạng thái cuối cùng dù thứ tự nhận sự kiện khác nhau, giúp ứng dụng cực kỳ ổn định.

Bước 3: Hiển Thị Trạng Thái Chung (Render the Shared State)

Dùng LiveView để render danh sách ký tự được biến đổi từ CRDT:

<div class="prose whitespace-pre-wrap font-mono">
  <%= for char <- MyCRDT.to_list(@crdt) do %>
    <%= char %>
  <% end %>
</div>

Ưu Điểm

LiveView chỉ cập nhật phần văn bản thay đổi nhờ cơ chế vá DOM thông minh (DOM patching)

Đáp ứng nhanh, mượt mà với độ trễ chỉ vài mili giây

Có thể xử lý tài liệu lớn mà tránh gây giật lag hay hiện tượng nhấp nháy

Bước 4: Hiển Thị Con Trỏ và Trạng Thái Hiện Diện (Live Cursors & Presence)

Theo Dõi Người Dùng Đang Hoạt Động

Sử dụng Phoenix.Presence để theo dõi những ai đang chỉnh sửa, vị trí con trỏ của họ:

presence_list = Phoenix.Presence.list(MyApp.Presence, "doc:123")
# Ví dụ kết quả:
%{
  "u9" => %{metas: [%{cursor: {2, 18}, name: "Alice"}]},
  "u5" => %{metas: [%{cursor: {7, 43}, name: "Bob"}]}
}

Hiển Thị Trên Giao Diện

<%= for {user_id, %{metas: [meta | _]}} <- @presence do %>
  <div
    class="absolute w-2 h-4 bg-blue-300 rounded-sm transition-all"
    style={"left: #{meta.cursor.x}px; top: #{meta.cursor.y}px;"}
    title={meta.name}
  ></div>
<% end %>

Bạn có thể tùy chỉnh con trỏ theo nhu cầu như animation, màu sắc, hoặc tooltip hiển thị tên người dùng.

Bước 5: Lưu Trữ và Phát Lại Sự Kiện (Persist & Replay)

Ghi Lại Các Thao Tác Vào Log Sự Kiện

Mỗi thay đổi được batch và lưu vào database:

Repo.insert!(%ChangeEvent{doc_id: "123", payload: change})

Phục Hồi Trạng Thái Khi Người Dùng Kết Nối Lại

Phát lại các sự kiện từ log

Khôi phục lại CRDT

Đồng bộ và tái tạo trạng thái hiện tại

Điều quan trọng là CRDT đảm bảo việc hợp nhất không phụ thuộc vào thứ tự phát sự kiện, nên bạn luôn có được trạng thái chính xác và hội tụ.

Mở Rộng: Ứng Dụng Cho Whiteboard, Sơ Đồ, Bảng Biểu

Text chỉ là khởi đầu. Bạn có thể biến mỗi phần tử trên bảng vẽ thành một mục CRDT riêng biệt, ví dụ:

%{ id: "shape-42", type: :circle, x: 200, y: 150, radius: 40 }

Khi kéo thả:

Phoenix.PubSub.broadcast(MyApp.PubSub, "whiteboard:room1", %{ op: :move, id: "shape-42", x: 260, y: 180, user_id: "u3"})

Mỗi thay đổi được hợp nhất tự động. Dùng TailwindCSS để xử lý hiệu ứng chuyển động, vị trí, mà không cần JavaScript phức tạp.

Tại Sao Giải Pháp Này Hiệu Quả?

Thành phần	Vai trò chính
CRDTs	Làm trạng thái dữ liệu không xung đột
Phoenix LiveView	Truyền tải dữ liệu theo thời gian thực
PubSub + Presence	Quản lý tính cộng tác đa người dùng
Ngôn ngữ Elixir	Một stack hoàn chỉnh, đơn giản

Bạn không cần:

React

Firebase

Hoặc thư viện frontend phức tạp

Chỉ một stack duy nhất với Phoenix + CRDTs và kiến trúc đúng đắn để xây dựng ứng dụng đa người dùng an toàn, mượt mà.

Kết Luận

Xây dựng ứng dụng cộng tác thời gian thực không còn là điều không tưởng với sự hỗ trợ của Phoenix LiveView và CRDTs. Bằng cách thiết kế bản chất dữ liệu cho phép hợp nhất và tận dụng điểm mạnh của WebSocket cùng bộ công cụ hiện đại trong Elixir, bạn có thể tạo ra trải nghiệm người dùng thời gian thực mượt mà, hiệu quả và dễ phát triển.

Hãy bắt đầu áp dụng phương pháp này cho các ứng dụng như trình soạn thảo văn bản đa người dùng, bảng vẽ trực tuyến, hoặc các công cụ cộng tác phức tạp mà không cần lo lắng về xung đột dữ liệu hay lag.

Tham Khảo

Derek Kraan. delta_crdt_ex GitHub Repository

Phoenix Framework Documentation - PubSub, Presence, LiveView

Shrey Goel. "Understanding CRDTs and Real-Time Collaboration", 2023.

Asher Baum. Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns November 25, 2023