I. Giới thiệu

Gần đây, sếp của mình đang phát triển một ứng dụng web giúp khách hàng trao đổi, vẽ và trình bày ý tưởng với nhau. Mặc dù hệ thống sẽ đơn giản hơn Google Docs, nhưng nó sẽ giải quyết những nhu cầu cơ bản nhất cho người dùng.

Cuối tuần vừa rồi, mình đã dành thời gian để lập trình một ứng dụng đơn giản nhằm tìm hiểu cách thực hiện điều này. Trong bài viết này, mình sẽ hướng dẫn bạn từ ý tưởng đến cách thực hiện ứng dụng này.

Định nghĩa WebSocket

WebSocket là một giao thức truyền thông hai chiều diễn ra trên một kết nối TCP duy nhất. Nó cho phép giao tiếp giữa trình duyệt và máy chủ trong thời gian thực mà không cần mở lại kết nối mỗi khi dữ liệu được gửi. WebSocket rất hữu ích cho các ứng dụng cần cập nhật thông tin liên tục như chat, trò chơi trực tuyến, bảng điều khiển thời gian thực,...

II. Ý tưởng

Mình đã phác thảo một sơ đồ với ba bước cơ bản trong quá trình làm việc với ứng dụng:

1. Tạo channel: Người host sẽ tạo một đường dẫn với thông tin channel và gửi cho mọi người để họ có thể tham gia.
2. Khởi tạo kết nối: Khi người dùng nhấp vào link, hệ thống sẽ khởi tạo một kết nối WebSocket tương ứng với UUID mà người dùng gửi lên server.
3. Cập nhật dữ liệu: Mỗi khi có người dùng (host hoặc bất kỳ ai) thay đổi dữ liệu, một API sẽ được gọi lên web app server để gửi dữ liệu đến các kết nối WebSocket trong channel.

Lưu ý rằng đây chỉ là ý tưởng cơ bản. Để có thể sử dụng trong thực tế, cần giải quyết nhiều vấn đề phức tạp hơn, đặc biệt là khi có nhiều người có mặt trong channel cùng sửa dữ liệu.

III. Triển khai

1. Back end

Ở phần back end, mình sử dụng thư viện WebSocket của Go. Mình tạo một biến để lưu thông tin các channel dưới dạng map, trong đó mỗi channel lại có một map chứa các kết nối của nó.

var mapWsConn = make(map[string]map[string]*websocket.Conn)

Các API trong server

Mình xây dựng một server với 4 API như sau:

• LoadPage
• InitWebsocket
• CloseWebsocket
• SaveData

Ví dụ về API LoadPage

func LoadPage(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Access-Control-Allow-Origin", "*")
    // Đọc file HTML và gửi về cho client
}

Ví dụ về API InitWebsocket

func InitWebsocket(w http.ResponseWriter, r *http.Request) {
    // Triển khai kết nối WebSocket cho channel
}

Ví dụ về API CloseWebsocket

func CloseWebsocket(w http.ResponseWriter, r *http.Request) {
    // Đóng kết nối WebSocket
}

Ví dụ về API SaveData

func SaveData(w http.ResponseWriter, r *http.Request) {
    // Lưu dữ liệu và thông báo đến các kết nối WebSocket khác
}

2. Front end

Phần giao diện, mình đã lấy mẫu HTML và CSS từ mạng. Đoạn JavaScript mình tự viết để xử lý kết nối WebSocket và hiển thị nội dung.

let ws;

function initWS() {
    // Khởi tạo kết nối WebSocket
}

Các sự kiện trong Front end

• Kết nối: Khi kết nối mở, ta thông báo cho console.
• Nhận dữ liệu: Khi nhận được dữ liệu từ server, cập nhật vào giao diện.
• Đóng kết nối: Khi kết nối đóng, thực hiện một số thao tác cần thiết.

Theo dõi sự thay đổi trong Text Editor

const div = document.getElementById('content');
div.addEventListener('input', function() {
    // Lưu dữ liệu mỗi khi người dùng thay đổi
});

IV. Kết quả

Dưới đây là video demo về ứng dụng của mình trong việc sử dụng WebSocket để chỉnh sửa tài liệu thời gian thực.

V. Nguồn

• Source code HTML
• Source code trên GitHub
• Link bài viết trên blog của mình
  source: viblo