Việc nhận thông báo thời gian thực khi duyệt ứng dụng web là điều rất phổ biến. Thông báo có thể đến từ chatbot, hệ thống cảnh báo, hoặc được kích hoạt bởi sự kiện mà ứng dụng đẩy đến một hoặc nhiều người dùng. Dù nguồn gốc là gì, các nhà phát triển đang ngày càng sử dụng Redis để xây dựng dịch vụ thông báo.
Trong các ứng dụng hiện đại sử dụng kiến trúc microservices, Redis thường được dùng như một cache đơn giản và cơ sở dữ liệu chính. Nhưng nó cũng đóng vai trò là lớp giao tiếp giữa các dịch vụ nhờ lớp nhắn tin bền vững do Redis Streams cung cấp, cũng như hệ thống sự kiện nhẹ nhàng với các lệnh Pub/Sub (Publish/Subscribe) nổi tiếng.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách dễ dàng tạo một dịch vụ thông báo nhỏ sử dụng Redis Pub/Sub để gửi tin nhắn đến ứng dụng web được phát triển bằng Vue.js, Node.js và WebSockets.
Điều kiện tiên quyết
Dịch vụ demo này sử dụng:
- Docker
- Redis 5.0.x hoặc mới hơn (demo dùng container Docker Redis)
- Node.js 10.x với npm (Node package manager)
- nodemon, công cụ tự động khởi động lại ứng dụng trong quá trình phát triển
- Vue CLI
Khởi động máy chủ Redis
Nếu bạn chưa có instance Redis đang chạy, hãy khởi động bằng Docker; trong terminal, chạy lệnh:
> docker run -it --rm --name redis-server -p 6379:6379 redis
Redis hiện đã sẵn sàng và chấp nhận kết nối.
Tạo máy chủ WebSocket với Node.js
Để cấu hình dự án với cấu trúc phù hợp, mở terminal và nhập các lệnh sau:
Tạo dự án Node.js mới bằng npm (tham số -y sẽ đặt tất cả giá trị mặc định):
Lệnh cuối cùng thêm các dependency WebSocket và Redis vào dự án. Bạn đã sẵn sàng viết code!
Viết máy chủ WebSocket
Mở trình soạn thảo code yêu thích cho Node.js (tôi dùng Visual Studio Code) và nhập “code .” để mở thư mục hiện tại. Tạo file mới tên server.js.
Chương trình Node.js đơn giản này tập trung vào demo và bao gồm:
- Kết nối Redis (dòng 9)
- Đăng ký kênh “app:notifications” (dòng 10)
- Khởi động máy chủ WebSocket (dòng 13)
- Đăng ký kết nối client người dùng (dòng 16)
- Lắng nghe sự kiện subscribe Redis (dòng 19)
- Gửi tin nhắn đến tất cả client WebSocket (dòng 21)
Dòng 5 và 6 cấu hình vị trí Redis server và port cho WebSocket server. Rất đơn giản phải không?
Chạy máy chủ WebSocket
Nếu chưa cài nodemon, hãy cài đặt ngay. Sau đó khởi động WebSocket server bằng lệnh:
Bây giờ hãy tạo frontend để nhận thông báo và hiển thị cho người dùng.
Tạo frontend với Vue.js
Mở terminal mới và chạy lệnh sau từ thư mục notifications:
Nếu chưa cài Vue CLI, cài đặt bằng npm install -g @vue/cli.
Lệnh này tạo dự án Vue mới sẵn sàng chạy và mở rộng.
Cần cài thêm BootstrapVue để dễ dàng sử dụng thư viện CSS và component từ Bootstrap.
Mở thư mục web-client trong trình soạn thảo, sau đó khởi động ứng dụng Vue vừa tạo:
Lệnh cuối cùng khởi động Vue dev server, phục vụ trang và tự động reload khi bạn thay đổi code.
Mở trình duyệt, truy cập https://localhost:8080; bạn sẽ thấy trang chào mặc định của Vue:
Thêm WebSocket vào frontend
Framework Vue khá đơn giản, và bài này sẽ giữ code tối giản. Xem nhanh cấu trúc thư mục:
├── README.md ├── babel.config.js ├── node_modules ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js
Các file ở cấp gốc (babel.config.js, package.json, package-lock.json, node_modules) dùng để cấu hình dự án. Phần quan trọng nhất nằm trong thư mục src:
- File main.js là file JavaScript chính, nạp các thành phần chung và gọi màn hình chính App.vue. Chúng ta sẽ sửa sau để thêm hỗ trợ Bootstrap.
- File App.vue chứa HTML, CSS, JavaScript cho một trang/template cụ thể. Là entry point của ứng dụng, phần này được chia sẻ bởi tất cả màn hình, nên là nơi tốt để viết logic client thông báo.
File public/index.html là entry point tĩnh nơi DOM được tải. Bạn sẽ thấy <div id=”app”> dùng để load ứng dụng Vue.
Demo này rất đơn giản, bạn chỉ cần sửa 2 file: App.vue và main.js. Trong ứng dụng thực tế, bạn nên tạo component Vue.js tái sử dụng.
Cập nhật App.vue để hiển thị tin nhắn WebSocket
Mở App.vue và thêm thông tin dưới đây. Ở cuối trang, ngay trước thẻ </div>, thêm block HTML sau:
Sử dụng ký pháp {{message}} để Vue in nội dung biến message, sẽ định nghĩa ở block tiếp theo.
Trong thẻ <script>, thay thế nội dung bằng:
Ít dòng code này dùng để:
- Kết nối WebSocket server (dòng 13)
- Nhận tin nhắn từ server và gán vào biến cục bộ message (dòng 13-17)
Nếu quan sát kỹ, bạn đã thêm:
- Hàm data() khai báo biến cục bộ có thể ràng buộc với giao diện (dòng 6-10)
- Hàm created() được Vue gọi tự động khi component khởi tạo
Gửi tin nhắn từ Redis đến ứng dụng Vue
WebSocket server và Vue frontend hiện đang chạy và kết nối nhờ vài dòng JavaScript. Đã đến lúc test!
Sử dụng Redis CLI hoặc RedisInsight, publish tin nhắn đến kênh app:notifications. Ví dụ, nếu Redis chạy bằng Docker, kết nối và publish bằng lệnh:
Bạn sẽ thấy tin nhắn xuất hiện ở dưới cùng của ứng dụng trong trình duyệt:
Như bạn thấy, rất dễ dàng đẩy nội dung đến web frontend thời gian thực dùng WebSocket. Bây giờ hãy cải thiện giao diện và thêm UI thân thiện hơn với Bootstrap.
Tạo block alert với Bootstrap
Phần này hướng dẫn dùng component alert Bootstrap, xuất hiện khi nhận tin nhắn mới và tự ẩn sau vài giây bằng đếm ngược đơn giản.
File Main.js
Mở main.js và thêm các dòng sau sau import cuối cùng:
Bốn dòng này import và đăng ký component Bootstrap vào ứng dụng Vue.
File App.js
Trong App.vue, thay thế code bạn thêm trước đó (mọi thứ giữa hai thẻ <hr/> và cả thẻ đó) bằng:
Component này dùng các thuộc tính:
- id=”notification” là id element dùng tham chiếu trong JavaScript/CSS
- :show=”dismissCountDown” hiển thị component chỉ khi dismissCountDown khác null và 0
- dismissible thêm icon nhỏ để người dùng tự đóng
- @dismissed=”dismissCountDown=0″ đóng alert khi dismissCountDown = 0
- @dismiss-count-down=”countDownChanged” là phương thức đếm ngược
Thêm vài dòng JavaScript định nghĩa biến và phương thức cho alert component:
Phần này bạn đã:
- Thêm biến dismissSecs và dismissCountDown vào data() (dòng 4-5) để điều khiển timer hiển thị alert trước khi ẩn
- Tạo phương thức hiển thị/ẩn alert component (dòng 10-26)
- Gọi showAlert() khi nhận tin nhắn mới (dòng 13)
Hãy thử!
Quay lại redis-cli hoặc Redis Insight và post tin nhắn mới đến kênh app:notifications.
Như bạn thấy, dễ dàng dùng Redis tạo dịch vụ thông báo mạnh mẽ cho ứng dụng. Demo này cơ bản, dùng đơn kênh và server, broadcast đến tất cả client.
Mục tiêu là cung cấp cách dễ dàng bắt đầu với WebSocket và Redis Pub/Sub để đẩy tin nhắn từ Redis đến web app. Có nhiều tùy chọn gửi tin nhắn đến client cụ thể dùng nhiều kênh, cũng như scale và bảo mật ứng dụng.
Bạn cũng có thể dùng WebSocket server ngược chiều, để consume tin nhắn cũng như push đến client. Đó là chủ đề lớn cho bài viết khác. Hãy theo dõi thêm bài viết về cách dùng Redis Gears bắt sự kiện trực tiếp trong Redis và đẩy đến các client.
Tham khảo thêm:
- Redis Microservices for Dummies (ebook miễn phí)
- Introduction to Redis Streams (tài liệu Redis)
- Redis Pub/Sub (tài liệu Redis)
- Khóa học trực tuyến miễn phí tại Redis University
- Redis Enterprise Cloud