Cách tạo dịch vụ thông báo với Redis, Websockets và Vue.js

Việc nhận thông báo thời gian thực khi điều hướng trong một ứng dụng web là rất phổ biến. Thông báo có thể đến từ một bot trò chuyện, một hệ thống cảnh báo hoặc được kích hoạt bởi một sự kiện mà ứng dụng đẩy đến một hoặc nhiều người dùng. Bất kể nguồn thông báo là gì, các nhà phát triển đang ngày càng sử dụng Redis để tạo các dịch vụ thông báo.

Trong các ứng dụng hiện đại được cung cấp bởi kiến ​​trúc microservices, Redis thường được sử dụng như một bộ nhớ đệm đơn giản và như một cơ sở dữ liệu chính. Nhưng nó cũng được sử dụng làm lớp giao tiếp giữa các dịch vụ bằng cách sử dụng lớp nhắn tin liên tục được cung cấp bởi Redis Streams, một hệ thống tổ chức sự kiện nhẹ sử dụng các lệnh Pub / Sub (Xuất bản / Đăng ký) nổi tiếng của nó.

Trong bài đăng blog này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một dịch vụ thông báo nhỏ bằng cách sử dụng Redis Pub / Sub để gửi tin nhắn đến một ứ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 trở lên (bản trình diễn này sử dụng vùng chứa Redis Docker)
• Node.js 10.x với trình quản lý gói Node (npm)
• gật đầu, một công cụ đơn giản tự động khởi động lại ứng dụng của bạn trong quá trình phát triển
• Vue CLI

Khởi động máy chủ Redis

Nếu bạn chưa có phiên bản Redis đang chạy, bạn có thể khởi động nó bằng Docker; trong một thiết bị đầu cuối, hãy chạy lệnh này:

> docker run -it --rm --name redis-server -p 6379:6379 redis

Redis hiện đã hoạt động và sẵn sàng chấp nhận các kết nối.

Tạo máy chủ WebSocket với Node.js

Để định cấu hình dự án với cấu trúc thích hợp, hãy mở một thiết bị đầu cuối và nhập các lệnh sau:

Tạo một dự án Node.js mới bằng cách sử dụng npm (tham số -y sẽ đặt tất cả các giá trị thành giá trị mặc định) :

Lệnh cuối cùng ở trên thêm các phụ thuộc WebSocket và Redis vào dự án của bạn. Bây giờ bạn đã sẵn sàng để viết một số mã!

Viết máy chủ WebSocket

Mở trình chỉnh sửa mã yêu thích của bạn cho Node.js (Tôi sử dụng Visual Studio Code) và chỉ cần nhập mã “mã.” để mở thư mục hiện tại. Trong trình chỉnh sửa của bạn, hãy tạo một tệp mới có tên server.js .

Chương trình Node.js đơn giản này chỉ giới hạn ở phần trình diễn và tập trung vào:

• Đang kết nối với Redis (dòng 9)
• Đăng ký nhận tin nhắn từ “app:thông báo” kênh (dòng 10)
• Khởi động máy chủ WebSocket (dòng 13)
• Đăng ký kết nối máy khách của người dùng (dòng 16)
• Nghe các sự kiện đăng ký Redis (dòng 19)
• Và gửi thông báo đến tất cả các ứng dụng WebSocket (21).

Dòng 5 và 6 chỉ đơn giản được sử dụng để định cấu hình vị trí máy chủ Redis và cổng để sử dụng cho máy chủ Web Socket. Như bạn có thể thấy, nó khá đơn giản.

Chạy máy chủ WebSocket

Nếu bạn chưa cài đặt gật đầu , cài đặt nó ngay bây giờ. Sau đó khởi động máy chủ WebSocket bằng lệnh sau:

Bây giờ, hãy tạo giao diện người dùng sẽ nhận thông báo và in chúng cho người dùng.

Tạo giao diện người dùng với Vue.js

Mở một thiết bị đầu cuối mới và chạy lệnh sau từ thông báo thư mục:

Nếu bạn chưa cài đặt công cụ Vue CLI, hãy thực hiện ngay bây giờ bằng lệnh npm install -g @ vue / cli .

Lệnh này tạo một dự án Vue mới sẵn sàng được thực thi và mở rộng.

Một gói cuối cùng để cài đặt cho phần trình diễn này là BootstrapVue, giúp dễ dàng sử dụng thư viện CSS và các thành phần từ khung Bootstrap phổ biến.

Mở thư mục web-client trong trình soạn thảo mã yêu thích của bạn, sau đó khởi động ứng dụng Vue mới được tạo:

Lệnh cuối cùng khởi động máy chủ phát triển Vue sẽ phục vụ các trang và cũng tự động tải lại các trang khi bạn thay đổi chúng.

Mở trình duyệt của bạn và truy cập https:// localhost:8080; nơi bạn sẽ thấy trang chào mừng Vue mặc định:

Thêm WebSocket vào giao diện người dùng

Khung công tác Vue khá đơn giản và đối với bài đăng này, chúng tôi sẽ giữ cho mã đơn giản nhất có thể. Vì vậy, hãy nhanh chóng xem xét 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 tệp ở cấp cơ sở ( babel.config.js , package.json , package-lock.json , node_modules ) được sử dụng để cấu hình dự án. Phần thú vị nhất, ít nhất là bây giờ, nằm trong src thư mục:

• main.js tệp là tệp JavaScript chính của ứng dụng, tệp này sẽ tải tất cả các phần tử chung và gọi App.vue màn hình chính. Chúng tôi sẽ sửa đổi nó sau để thêm hỗ trợ Bootstrap.
• App.vue là một tệp chứa HTML, CSS và JavaScript cho một trang hoặc mẫu cụ thể. Là một điểm nhập cho ứng dụng, phần này được chia sẻ bởi tất cả các màn hình theo mặc định, vì vậy đây là một nơi tốt để viết phần thông báo-khách hàng trong tệp này.

public / index.html là điểm nhập tĩnh từ nơi DOM sẽ được tải. Nếu bạn nhìn vào nó, bạn sẽ thấy một

Sử dụng ký hiệu {{message}}, bạn chỉ cho Vue in nội dung của biến thông báo mà bạn sẽ xác định trong khối tiếp theo.

Trong