Giới thiệu

🎯 Mô-đun này làm gì?

Mô-đun WS (WebSocket) cho phép bạn nhận thông báo theo thời gian thực - cập nhật nội dung, thay đổi đơn hàng, hành động của người dùng - thiết lập các kết nối liên tục để nhận cập nhật ngay lập tức mà không cần kiểm tra định kỳ, cho phép các tính năng trực tiếp như thông báo, trò chuyện trực tiếp và bảng điều khiển theo thời gian thực.

Hãy coi nó như hệ thống thông báo theo thời gian thực của bạn - thay vì liên tục hỏi "có gì mới không?" (kiểm tra định kỳ), WebSocket giữ kết nối mở và máy chủ sẽ gửi cập nhật đến bạn ngay lập tức khi có sự kiện xảy ra.

📖 Giải thích đơn giản

Mỗi ứng dụng hiện đại đều cần cập nhật theo thời gian thực:

🔔 Thông báo trực tiếp - Cảnh báo ngay lập tức khi có điều gì xảy ra
💬 Trò chuyện trực tiếp - Nhắn tin theo thời gian thực giữa các người dùng
📊 Bảng điều khiển trực tiếp - Thống kê và chỉ số tự động cập nhật
🛒 Cập nhật đơn hàng - Thay đổi trạng thái đơn hàng ngay lập tức
📝 Cập nhật nội dung - Thay đổi và xuất bản nội dung trực tiếp
👥 Hoạt động của người dùng - Sự hiện diện và hành động của người dùng theo thời gian thực
🔄 Đồng bộ dữ liệu - Đồng bộ hóa tự động giữa các thiết bị

Vấn đề với việc kiểm tra định kỳ (các yêu cầu lặp lại):

// ❌ Không tốt - Kiểm tra định kỳ mỗi 5 giây
setInterval(async () => {
  const orders = await Orders.getOrders();
  // Kiểm tra xem có gì thay đổi không
  // Lãng phí băng thông, trì hoãn cập nhật, tải máy chủ
}, 5000);

Vấn đề:

🔋 Tiêu tốn pin - Các yêu cầu liên tục lãng phí năng lượng
📡 Lãng phí mạng - Hầu hết các yêu cầu trả về "không có thay đổi"
⏱️ Cập nhật bị trì hoãn - Trì hoãn lên đến 5 giây
🖥️ Tải máy chủ - Các yêu cầu không cần thiết mỗi vài giây

Giải pháp WebSocket:

// ✅ Tốt - Kết nối WebSocket theo thời gian thực
const { WS } = defineOneEntry('https://your-site.oneentry.cloud', {
  token: 'your-app-token'
});

// Đăng ký các sự kiện
WS.subscribe('order.created', (order) => {
  console.log('Đơn hàng mới đã được nhận!', order);
  // Thông báo ngay lập tức, không cần kiểm tra định kỳ!
});

WS.subscribe('content.updated', (content) => {
  console.log('Nội dung đã được cập nhật!', content);
  // Cập nhật giao diện ngay lập tức
});

Lợi ích:

🔋 Hiệu quả - Kết nối liên tục duy nhất
📡 Theo thời gian thực - Cập nhật ngay lập tức, không có độ trễ
⏱️ Độ trễ thấp - Giao hàng thông báo dưới một giây
🖥️ Giảm tải - Máy chủ chỉ gửi khi cần thiết

✨ Khái niệm chính

WebSocket là gì?

WebSocket là một kết nối hai chiều liên tục giữa khách hàng và máy chủ:

Kết nối liên tục - Giữ kết nối mở, không cần bắt tay lại
Hai chiều - Cả khách hàng và máy chủ đều có thể gửi tin nhắn
Theo thời gian thực - Giao hàng tin nhắn ngay lập tức
Dựa trên sự kiện - Đăng ký các sự kiện cụ thể
Hiệu quả - Chi phí thấp hơn so với kiểm tra định kỳ HTTP

WebSocket so với HTTP Polling

Tính năng	WebSocket	HTTP Polling
Kết nối	Liên tục (giữ mở)	Kết nối lặp lại
Độ trễ	Dưới một giây	Phụ thuộc vào khoảng thời gian (2-30 giây)
Hiệu quả	Rất hiệu quả	Lãng phí (nhiều phản hồi trống)
Tải máy chủ	Thấp (chỉ sự kiện)	Cao (các yêu cầu liên tục)
Sử dụng pin	Thấp	Cao (trên thiết bị di động)
Trường hợp sử dụng	Cập nhật theo thời gian thực	Chấp nhận cho các cập nhật không quan trọng

Vòng đời kết nối WebSocket

1. Khách hàng kết nối đến máy chủ WebSocket
   (WS.connect())
   ↓
2. Kết nối được thiết lập
   (sự kiện onOpen được kích hoạt)
   ↓
3. Khách hàng đăng ký các sự kiện
   (WS.subscribe('event.name', callback))
   ↓
4. Máy chủ gửi sự kiện khi chúng xảy ra
   (Giao hàng ngay lập tức)
   ↓
5. Khách hàng nhận tin nhắn sự kiện
   (Hàm callback được thực thi)
   ↓
6. Kết nối giữ mở
   (Không cần kết nối lại)
   ↓
7. Khách hàng ngắt kết nối khi xong
   (WS.disconnect())

Các sự kiện WebSocket phổ biến

Loại sự kiện	Mô tả	Trường hợp sử dụng ví dụ
order.created	Đơn hàng mới được đặt	Hiển thị thông báo "Đơn hàng mới!"
order.updated	Trạng thái đơn hàng thay đổi	Cập nhật trạng thái đơn hàng trong giao diện
content.published	Nội dung mới được xuất bản	Làm mới danh sách nội dung
content.updated	Nội dung đã được chỉnh sửa	Cập nhật nội dung hiển thị
user.registered	Người dùng mới đã đăng ký	Hiển thị người dùng mới trong bảng điều khiển quản trị
payment.completed	Thanh toán đã được xử lý	Cập nhật trạng thái đơn hàng thành "Đã thanh toán"
product.outOfStock	Sản phẩm hết hàng	Hiển thị nhãn "Hết hàng"

Tại sao sử dụng mô-đun WebSocket?

Lợi ích	Mô tả
Cập nhật theo thời gian thực	Thông báo ngay lập tức, không có độ trễ kiểm tra định kỳ
Hiệu quả	Kết nối duy nhất, chi phí thấp
Thân thiện với pin	Không kiểm tra định kỳ liên tục trên di động
Có thể mở rộng	Máy chủ chỉ gửi khi cần thiết
Dựa trên sự kiện	Đăng ký các sự kiện cụ thể
Tính năng trực tiếp	Kích hoạt trò chuyện, thông báo, bảng điều khiển

🚀 Ví dụ nhanh

📋 Những điều bạn cần biết

Quản lý kết nối WebSocket

Các kết nối WebSocket cần được quản lý cẩn thận:

Thực hành tốt nhất:

Kiểm tra trạng thái kết nối trước khi đăng ký
Triển khai logic kết nối lại
Xử lý lỗi kết nối một cách nhẹ nhàng
Ngắt kết nối khi người dùng đăng xuất

Quản lý đăng ký sự kiện

Chỉ đăng ký các sự kiện sau khi kết nối được thiết lập

Thực hành tốt nhất:

Sử dụng các hàm callback có tên để dễ dàng hủy đăng ký
Đăng ký sau khi kết nối mở
Hủy đăng ký khi thành phần không còn
Không đăng ký cùng một sự kiện nhiều lần

Hủy đăng ký sự kiện

Luôn hủy đăng ký khi xong để ngăn ngừa rò rỉ bộ nhớ:

Thực hành tốt nhất:

Hủy đăng ký trong các hàm dọn dẹp
Ngắt kết nối WebSocket khi không cần thiết
Ngăn ngừa rò rỉ bộ nhớ trong SPAs

Chiến lược kết nối lại

Triển khai kết nối lại tự động với độ trễ tăng dần:

Thực hành tốt nhất:

Sử dụng độ trễ tăng dần cho việc kết nối lại
Giới hạn số lần kết nối lại tối đa
Đặt lại bộ đếm khi kết nối thành công
Cho phép ngắt kết nối thủ công mà không cần kết nối lại

Cấu trúc payload sự kiện

Các payload sự kiện theo cấu trúc nhất quán:

Thực hành tốt nhất:

Xác thực cấu trúc payload sự kiện
Xử lý các trường thiếu một cách nhẹ nhàng
Kiểm tra kiểu payload trong TypeScript

Xử lý lỗi

Triển khai xử lý lỗi toàn diện:

Thực hành tốt nhất:

Bắt lỗi trong các trình xử lý sự kiện
Ghi lại lỗi để gỡ lỗi
Hiển thị thông báo lỗi thân thiện với người dùng
Không để lỗi làm sập ứng dụng

Tối ưu hóa hiệu suất

Tối ưu hóa hiệu suất WebSocket:

Thực hành tốt nhất:

Giới hạn tần suất sự kiện cao
Gộp nhiều cập nhật lại với nhau
Giảm thiểu cập nhật giao diện
Tránh các thao tác tốn kém trong các trình xử lý

💡 Lưu ý quan trọng

⚠️ Quản lý trạng thái kết nối

Luôn kiểm tra trạng thái kết nối trước khi đăng ký

🔄 Xử lý kết nối lại

Các kết nối WebSocket có thể bị ngắt đột ngột:

Thay đổi mạng (từ WiFi sang di động)
Máy chủ khởi động lại
Thời gian chờ không hoạt động

Luôn triển khai logic kết nối lại

🧹 Ngăn ngừa rò rỉ bộ nhớ

Hủy đăng ký khi xong để ngăn ngừa rò rỉ bộ nhớ

🔒 Bảo mật

Các kết nối WebSocket được xác thực:

Xác thực dựa trên token (giống như REST API)
Giao thức WebSocket bảo mật (WSS)
Không cần gửi token với mỗi tin nhắn

Thực hành tốt nhất:

Sử dụng WSS (WebSocket bảo mật) trong sản xuất
Không tiết lộ dữ liệu nhạy cảm trong các trình xử lý sự kiện
Xác thực các payload sự kiện trước khi xử lý

📱 Cân nhắc trên di động

WebSocket trên các thiết bị di động:

Sử dụng pin (hiệu quả, nhưng kết nối liên tục)
Các kết nối nền có thể bị ngắt
Thay đổi mạng yêu cầu kết nối lại

Thực hành tốt nhất:

Kết nối lại khi ứng dụng trở lại nền trước
Xử lý các thay đổi trạng thái mạng
Cân nhắc kiểm tra định kỳ cho các cập nhật không quan trọng trên di động

📊 Bảng tham khảo nhanh

Phương thức	Mô tả	Trường hợp sử dụng
connect()	Kết nối đến máy chủ WebSocket	Thiết lập kết nối

❓ Câu hỏi thường gặp (FAQ)

Làm thế nào để tôi kết nối với máy chủ WebSocket?

Sử dụng WS.connect() để thiết lập kết nối. Chờ cho kết nối mở (lắng nghe sự kiện onOpen) trước khi đăng ký các sự kiện. Kết nối được xác thực bằng token ứng dụng của bạn từ defineOneEntry().

Tôi có thể đăng ký các sự kiện nào?

Đăng ký các sự kiện như order.created, order.updated, content.published, payment.completed, user.registered, v.v. Các sự kiện có sẵn phụ thuộc vào cấu hình OneEntry của bạn và thiết lập mô-đun Events trong bảng điều khiển quản trị.

Làm thế nào để tôi xử lý các kết nối bị ngắt?

Triển khai kết nối lại tự động với độ trễ tăng dần. Lắng nghe các sự kiện onClose và onError, sau đó cố gắng kết nối lại sau một khoảng thời gian trì hoãn (ví dụ: 1 giây, 2 giây, 4 giây, 8 giây, tối đa 30 giây). Đặt lại bộ đếm độ trễ khi kết nối thành công.

Tôi nên sử dụng WebSocket hay kiểm tra định kỳ cho ứng dụng của mình?

Sử dụng WebSocket cho các tính năng theo thời gian thực (trò chuyện trực tiếp, thông báo, bảng điều khiển) nơi mà các cập nhật ngay lập tức là quan trọng. Sử dụng kiểm tra định kỳ cho các cập nhật không quan trọng hoặc khi các kết nối WebSocket gặp vấn đề (tường lửa hạn chế, chế độ nền di động).

Làm thế nào để tôi ngăn ngừa rò rỉ bộ nhớ với các đăng ký WebSocket?

Luôn hủy đăng ký các sự kiện khi các thành phần không còn hoặc khi kết nối không còn cần thiết. Trong React, sử dụng các hàm dọn dẹp trong useEffect. Trong Vue, sử dụng hook vòng đời beforeUnmount.

Tôi có thể sử dụng WebSocket trên các thiết bị di động không?

Có, nhưng hãy lưu ý rằng hệ điều hành di động có thể ngắt các kết nối WebSocket nền. Kết nối lại khi ứng dụng trở lại nền trước. Cân nhắc tác động đến pin của các kết nối liên tục trên các thiết bị di động.

🎓 Thực hành tốt nhất

Kiểm tra trạng thái kết nối - Chỉ đăng ký sau khi kết nối mở
Triển khai kết nối lại - Tự động kết nối lại khi ngắt với độ trễ tăng dần
Hủy đăng ký khi dọn dẹp - Ngăn ngừa rò rỉ bộ nhớ trong SPAs
Xử lý lỗi một cách nhẹ nhàng - Bắt lỗi trong các trình xử lý sự kiện
Giới hạn tần suất sự kiện cao - Tránh làm quá tải giao diện với các cập nhật
Xác thực các payload sự kiện - Kiểm tra cấu trúc dữ liệu trước khi xử lý
Sử dụng các callback có tên - Dễ dàng hơn để hủy đăng ký và gỡ lỗi
Ghi lại trạng thái kết nối - Theo dõi các sự kiện mở/đóng/lỗi để gỡ lỗi

Thông tin thêm về giao diện người dùng của mô-đun https://doc.oneentry.cloud/docs/events/introduction

Định nghĩa của mô-đun WS

Bạn có thể đăng ký các sự kiện qua WebSocket để nhận thông báo


const { WS } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 Tài liệu liên quan

Mô-đun Đơn hàng - Các sự kiện đơn hàng để theo dõi đơn hàng theo thời gian thực
Mô-đun Người dùng - Các sự kiện người dùng để thông báo đăng ký
Mô-đun Thanh toán - Các sự kiện thanh toán để cập nhật giao dịch
WebSocket API

Giới thiệu

🎯 Mô-đun này làm gì?​

📖 Giải thích đơn giản​

✨ Khái niệm chính​

WebSocket là gì?​

WebSocket so với HTTP Polling​

Vòng đời kết nối WebSocket​

Các sự kiện WebSocket phổ biến​

Tại sao sử dụng mô-đun WebSocket?​

🚀 Ví dụ nhanh​

📋 Những điều bạn cần biết​

Quản lý kết nối WebSocket​

Quản lý đăng ký sự kiện​

Hủy đăng ký sự kiện​

Chiến lược kết nối lại​

Cấu trúc payload sự kiện​

Xử lý lỗi​

Tối ưu hóa hiệu suất​

💡 Lưu ý quan trọng​

⚠️ Quản lý trạng thái kết nối​

🔄 Xử lý kết nối lại​

🧹 Ngăn ngừa rò rỉ bộ nhớ​

🔒 Bảo mật​

📱 Cân nhắc trên di động​

📊 Bảng tham khảo nhanh​

❓ Câu hỏi thường gặp (FAQ)​

Làm thế nào để tôi kết nối với máy chủ WebSocket?​

Tôi có thể đăng ký các sự kiện nào?​

Làm thế nào để tôi xử lý các kết nối bị ngắt?​

Tôi nên sử dụng WebSocket hay kiểm tra định kỳ cho ứng dụng của mình?​

Làm thế nào để tôi ngăn ngừa rò rỉ bộ nhớ với các đăng ký WebSocket?​

Tôi có thể sử dụng WebSocket trên các thiết bị di động không?​

🎓 Thực hành tốt nhất​

Định nghĩa của mô-đun WS​

🔗 Tài liệu liên quan​

🎯 Mô-đun này làm gì?

📖 Giải thích đơn giản

✨ Khái niệm chính

WebSocket là gì?

WebSocket so với HTTP Polling

Vòng đời kết nối WebSocket

Các sự kiện WebSocket phổ biến

Tại sao sử dụng mô-đun WebSocket?

🚀 Ví dụ nhanh

📋 Những điều bạn cần biết

Quản lý kết nối WebSocket

Quản lý đăng ký sự kiện

Hủy đăng ký sự kiện

Chiến lược kết nối lại

Cấu trúc payload sự kiện

Xử lý lỗi

Tối ưu hóa hiệu suất

💡 Lưu ý quan trọng

⚠️ Quản lý trạng thái kết nối

🔄 Xử lý kết nối lại

🧹 Ngăn ngừa rò rỉ bộ nhớ

🔒 Bảo mật

📱 Cân nhắc trên di động

📊 Bảng tham khảo nhanh

❓ Câu hỏi thường gặp (FAQ)

Làm thế nào để tôi kết nối với máy chủ WebSocket?

Tôi có thể đăng ký các sự kiện nào?

Làm thế nào để tôi xử lý các kết nối bị ngắt?

Tôi nên sử dụng WebSocket hay kiểm tra định kỳ cho ứng dụng của mình?

Làm thế nào để tôi ngăn ngừa rò rỉ bộ nhớ với các đăng ký WebSocket?

Tôi có thể sử dụng WebSocket trên các thiết bị di động không?

🎓 Thực hành tốt nhất

Định nghĩa của mô-đun WS

🔗 Tài liệu liên quan