của Rahat Khanna
Thế giới cần mọi thứ nhanh chóng ngay bây giờ. Có rất nhiều luồng dữ liệu được tạo ra bởi các hệ thống khác nhau mỗi ngày. Họ phục vụ trong việc đưa ra quyết định trong nhiều ngành công nghiệp. Giám sát và phân tích thời gian thực đã trở nên rất quan trọng ngày nay. Các luồng dữ liệu bao gồm giám sát lưu lượng truy cập trang web theo thời gian thực, hiệu suất máy chủ, cập nhật thời tiết và cảm biến IOT. Điều quan trọng là phải phân tích và diễn giải lượng dữ liệu bùng nổ này, trong đó các biểu đồ và đồ thị tương tác là một giải pháp tuyệt vời.
Trong bài viết này, chúng ta sẽ xây dựng Máy chủ Node.js để hiển thị các API nhằm cung cấp dữ liệu lịch sử cho một số liệu (trong trường hợp này là thời tiết ở London). Nó cũng sẽ cung cấp một API để nhập các điểm dữ liệu mới. Chúng tôi cũng sẽ xây dựng một ứng dụng giao diện người dùng với Biểu đồ đường để hiển thị sự thay đổi nhiệt độ trong thời tiết ở Luân Đôn trong thời gian thực. Ứng dụng chúng tôi xây dựng sẽ giống như thế này:
Đăng ký máy đẩy
Bước đầu tiên để bắt đầu hướng dẫn này là Đăng ký tại Pusher hoặc đăng nhập bằng thông tin xác thực hiện có của bạn nếu bạn đã có tài khoản. Sau khi đăng nhập, bạn sẽ cần tạo một ứng dụng mới và chọn Vanilla JavaScript cho giao diện người dùng cùng với Node.js cho giao diện người dùng. Sau đó, bạn sẽ được đưa đến một trang đích chứa mã ‘bắt đầu’ cho cả giao diện người dùng và giao diện người dùng, chúng tôi sẽ sử dụng mã này sau trong hướng dẫn.
API máy chủ Node.js cho hệ thống giám sát và phân tích
Các API cần thiết cho bất kỳ hệ thống phân tích nào cho bất kỳ số liệu hoặc thực thể nào là:
- API nhập — Một API để nhập các điểm dữ liệu mới cho bất kỳ thực thể cụ thể nào. Trong máy chủ của chúng tôi cho bài đăng trên blog này, chúng tôi sẽ tạo một API để nhập dữ liệu nhiệt độ mới vào một thời điểm cụ thể cho Luân Đôn. API này có thể được gọi bởi bất kỳ hệ thống thời tiết toàn cầu hoặc bất kỳ cảm biến IOT nào.
- API dữ liệu lịch sử — API này sẽ trả về tất cả dữ liệu trong phạm vi tính từ ngày này. Đối với máy chủ của chúng tôi, chúng tôi sẽ tạo một API đơn giản. Nó sẽ trả về một số dữ liệu lịch sử tĩnh với các điểm dữ liệu giới hạn cho các giá trị nhiệt độ của Luân Đôn trong bất kỳ ngày nào.
Khung xương máy chủ Node.js Express
Chúng ta sẽ tạo một Express Server cơ bản cùng với việc khởi tạo phiên bản máy chủ thư viện Pusher. Chúng tôi sẽ tạo một thư mục mới cho dự án của chúng tôi và tạo một tệp mới máy chủ.js. Thêm đoạn mã sau vào tập tin này:
API để lấy dữ liệu nhiệt độ lịch sử
Bây giờ, chúng tôi sẽ thêm một số dữ liệu tĩnh về nhiệt độ của Luân Đôn vào những thời điểm nhất định trong ngày và lưu trữ nó trong bất kỳ biến JavaScript nào. Chúng tôi cũng sẽ hiển thị một tuyến đường để trả lại dữ liệu này bất cứ khi nào ai đó gọi nó bằng lệnh gọi GET HTTP.
API để nhập điểm dữ liệu nhiệt độ
Bây giờ chúng tôi sẽ thêm mã để hiển thị API để nhập nhiệt độ tại một thời điểm cụ thể. Chúng tôi sẽ hiển thị API HTTP GET với nhiệt độ và thời gian làm tham số truy vấn. Chúng tôi sẽ xác thực rằng chúng không phải là tham số trống. Chúng tôi lưu trữ chúng bằng cách đẩy vào điểm dữ liệu mảng biến JavaScript tĩnh của chúng tôi londonTempDữ liệu. Vui lòng thêm đoạn mã sau vào máy chủ.js tập tin
Đoạn code trên ngoài việc lưu trữ trong nguồn dữ liệu, chúng ta còn kích hoạt một sự kiện ‘nhiệt độ mới’ trên một kênh mới ‘biểu đồ nhiệt độ london’. Đối với mọi nguồn dữ liệu hoặc biểu đồ duy nhất, bạn có thể tạo một kênh mới.
Sự kiện do máy chủ của chúng tôi kích hoạt sẽ được giao diện người dùng xử lý để cập nhật biểu đồ/đồ thị theo thời gian thực. Sự kiện có thể chứa tất cả dữ liệu quan trọng mà biểu đồ cần để hiển thị chính xác điểm dữ liệu. Trong trường hợp của chúng tôi, chúng tôi sẽ gửi nhiệt độ tại thời điểm mới đến giao diện người dùng của chúng tôi.
Xây dựng ứng dụng Front-End bằng Vanilla JavaScript và Chart.js
Bây giờ, chúng ta sẽ xây dựng ứng dụng front-end. Nó sẽ hiển thị Biểu đồ dạng đường thể hiện sự thay đổi nhiệt độ của Thành phố Luân Đôn vào các thời điểm khác nhau trong ngày. Cách tiếp cận chính để hiển thị biểu đồ thời gian thực là:
- Chúng tôi phải thực hiện lệnh gọi Ajax ban đầu để tìm nạp dữ liệu lịch sử và hiển thị biểu đồ với dữ liệu hiện có.
- Chúng tôi sẽ đăng ký bất kỳ sự kiện nào cho các điểm dữ liệu mới được lưu trữ trên một kênh cụ thể.
Mẫu HTML cơ bản
Chúng ta sẽ tạo một thư mục mới có tên công cộng trong thư mục gốc của dự án của chúng tôi và sau đó tạo một tệp mới index.html trong thư mục này. Tệp này sẽ chứa mã HTML cơ bản để hiển thị tiêu đề đơn giản và tiêu đề phụ có tên ứng dụng cùng với một vài biểu tượng. Chúng tôi cũng sẽ nhập khẩu Trình đẩy JavaScript thư viện từ URL CDN của nó.
Thêm thư viện biểu đồ
Trong các ứng dụng JavaScript và HTML, chúng ta phải sử dụng SVG hoặc Canvas để xây dựng các thành phần đồ họa nhằm biểu diễn các biểu đồ toán học. Có rất nhiều thư viện mã nguồn mở có thể giúp bạn hiển thị các loại biểu đồ khác nhau. Chúng bao gồm Biểu đồ thanh, Biểu đồ hình tròn, Biểu đồ đường và Biểu đồ phân tán.
Đối với dự án của chúng tôi, chúng tôi sẽ chọn Chart.js vì nó có API khá đơn giản và hiển thị các biểu đồ mạnh mẽ bằng cách sử dụng thẻ Canvas HTML. Bạn có thể chọn bất kỳ thư viện biểu đồ nào nhưng hãy nhớ rằng thư viện phải có phương tiện để cập nhật biểu đồ mà không cần hiển thị lại hoàn toàn. Chart.js cung cấp một phương thức trên bất kỳ biểu đồ khởi tạo nào để cập nhật nó.
Thêm mã sau vào tệp index.html của bạn ở những nơi thích hợp
Thêm tệp JavaScript và khởi tạo thư viện phía máy khách của Pusher
Bây giờ chúng ta sẽ tạo một tệp mới app.js trong thư mục chung của chúng tôi và cũng thêm đoạn mã sau để khởi tạo thư viện phía máy khách của Pusher.
Trong đoạn mã trên, chúng tôi cũng đã thêm một số phương thức tiện ích để thực hiện lệnh gọi Ajax và cũng hiển thị hoặc ẩn các phần tử khỏi API DOM.
Thêm mã để lấy dữ liệu lịch sử
Bây giờ, chúng tôi sẽ thêm mã để lấy dữ liệu nhiệt độ lịch sử để hiển thị biểu đồ với các giá trị ban đầu. Chúng tôi cũng sẽ khởi tạo một đối tượng Biểu đồ mới với một cấu hình cụ thể để hiển thị Biểu đồ đường. Bạn có thể đọc thêm về cách tạo các cấu hình này tại tài liệu Chart.js.
Vui lòng thêm đoạn mã sau vào tệp app.js:
Trong đoạn mã trên, chúng tôi đã thêm một chức năng có tên kết xuất Biểu đồ thời tiết. Điều này sẽ được sử dụng để hiển thị biểu đồ bằng dữ liệu mới nhất được nhúng trong chartConfig biến dưới khóa bộ dữ liệu. Nếu chúng ta muốn vẽ nhiều biểu đồ đường trên cùng một canvas, chúng ta có thể thêm nhiều phần tử hơn vào mảng này.
Các dữ liệu trong mỗi phần tử của mảng sẽ hiển thị các điểm khác nhau trên đồ thị. Chúng tôi sẽ thực hiện một yêu cầu ajax để /getNhiệt độ api để lấy tất cả các điểm dữ liệu và đặt chúng vào khóa này. Sau đó, chúng tôi sẽ gọi phương thức kết xuất để hiển thị biểu đồ. Bây giờ chúng ta có thể chạy lệnh node server.js rồi truy cập trình duyệt bằng URL sau để xem biểu đồ ban đầu được hiển thị bằng dữ liệu.
http://localhost:9000/Để tạo kiểu cho ứng dụng của chúng tôi đúng cách, vui lòng thêm CSS sau vào tệp style.css mới bên trong thư mục chung. Thêm đoạn mã sau vào tệp đó:
Mã để cập nhật biểu đồ về sự kiện mới nhận được
Bây giờ chúng tôi muốn đăng ký kênh duy nhất mà trên đó máy chủ của chúng tôi sẽ gửi các sự kiện cập nhật cho biểu đồ này. Đối với dự án của chúng tôi, kênh được đặt tên london-temp-chart và sự kiện được đặt tên nhiệt độ mới. Vui lòng thêm mã sau để xử lý sự kiện và sau đó cập nhật biểu đồ trong thời gian thực:
Để xem mã này hoạt động, bạn phải làm mới trình duyệt và bạn sẽ thấy biểu đồ ban đầu. Bây giờ chúng ta phải nhập một điểm dữ liệu mới. Bạn sẽ cần gọi API sau bằng cách sử dụng một số công cụ gọi API giả hoặc sử dụng URL sau với các giá trị khác nhau trong trình duyệt.
http://localhost:9000/addTemperature?temperature=17&time=1500Để kiểm tra mã cập nhật biểu đồ của bạn, bạn có thể sử dụng mã tạm thời sau trong app.js tập tin. Nó sẽ thực hiện các yêu cầu Ajax giả tới URL trên sau một khoảng thời gian cụ thể.
Đây là repo GitHub để tham khảo mã hoàn chỉnh.
Phần kết luận
Cuối cùng, ứng dụng phân tích thời gian thực của chúng tôi đã sẵn sàng. Chúng ta sẽ thấy biểu đồ nhiệt độ thời tiết của thành phố London được cập nhật theo thời gian thực.
Chúng tôi có thể sử dụng mã từ bài đăng trên blog này cho bất kỳ thư viện biểu đồ nào. Nó cũng có thể hiển thị bất kỳ loại biểu đồ nào như Biểu đồ thanh, Biểu đồ phân tán hoặc Biểu đồ hình tròn để cập nhật theo thời gian thực.
Mã này cũng có thể được sử dụng trong nhiều Ứng dụng doanh nghiệp. Ví dụ: theo dõi bảng điều khiển, báo cáo phân tích, ứng dụng quản lý cảm biến và ứng dụng tài chính. Thư viện Pusher giúp chúng tôi gửi các sự kiện thời gian thực tới tất cả các ứng dụng phía máy khách được kết nối. Các ứng dụng này có thể sử dụng dữ liệu để cập nhật biểu đồ trong thời gian thực.
Bài viết này ban đầu được xuất bản trên blog của Pusher.
