Ứng dụng hiện đại đòi hỏi sự hình dung thời gian thực- dù cho máy phục vụ theo dõi hệ thống mạng xã hội, theo dõi các dữ liệu truyền thông xã hội, hoặc phân tích thị trường tài chính. Một bảng điều khiển thời gian thực cho bạn khả năng xem thay đổi thời điểm chúng xảy ra, không cần cập nhật trang hướng dẫn sử dụng. Bằng cách kết hợp JavaScript bên khách hàng với các thiết bị WebggSet, bạn có thể tạo một bảng điều khiển tính năng trực tiếp, thấp mà cập nhật dữ liệu mới. Hướng dẫn này đi qua một bảng điều khiển sẵn sàng thời gian thực bằng cách bước, che đậy mọi thứ từ Webpet để nâng cao kỹ thuật hình ảnh hoá.

Hiểu các hệ thống đĩa cắm Web

WebSocket là một giao thức liên lạc cung cấp đầy đủ-dular, bền bỉ kết nối giữa một ứng dụng khách (thường là một trình duyệt) và một trình phục vụ. Không như truyền thống HTTP, nơi mà khách hàng phải khởi động mọi yêu cầu, WebSocket cho phép hoặc bên gửi dữ liệu vào bất cứ lúc nào sau khi bắt tay đầu. Việc này loại bỏ chi phí của yêu cầu HTTP lặp đi lặp lại và cho phép tính tương tác thời gian thực.

Đặc điểm chính của WebSocket:

  • Kết nối bền vững – vẫn mở cho đến khi đóng dứt.
  • Low latency) – không có kết nối trên mỗi tin nhắn.
  • Bicon ) – cả khách hàng lẫn máy chủ có thể lưu thông điệp.
  • khung trọng ) – tiêu đề nhỏ nhất trên đầu so với HTTP.

Đối với ứng dụng Mạng, các trình duyệt hiện đại hỗ trợ các gói tin chạy MạngSocket (Socket). Máy phục vụ cũng phải thực hiện giao thức WebSocket- bên máy phục vụ. Có tùy chọn bao gồm Node.js với [FLT: 0] [FLT: 1] thư viện, Python với [FLT: 0], hoặc quản lý dịch vụ quản lý [FLT:] [FLT].].

Thiết lập môi trường phát triển

Một bảng điều khiển thời gian hoàn chỉnh cần thiết cả máy phục vụ phát dữ liệu lẫn một trình khách tạo dữ liệu. Chúng tôi sẽ sử dụng Node.js và thư viện cho máy phục vụ, và JavaScript JavaScript với biểu đồ.js cho ứng dụng khách.

Thiết lập máy phục vụ- Theo hướng (Node.js + ws)

npm init -y
npm install ws

Tạo một tập tin :

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
 console.log('Client connected');

 // Simulate real-time data every 2 seconds
 const interval = setInterval(() => {
 const data = {
 timestamp: new Date().toISOString(),
 value: Math.random() * 100
 };
 ws.send(JSON.stringify(data));
 }, 2000);

 ws.on('close', () => clearInterval(interval));
});

Máy phục vụ này gửi một giá trị số ngẫu nhiên trong hai giây. Trong sản xuất, bạn sẽ thay thế dữ liệu tạo ra bằng một nguồn dữ liệu thật (v. d., thay đổi co sở dữ liệu, thư mục kiểu Kafka, thăm dò hệ thống mạng ATI).

Thiết lập khách hàng-Side

Tạo một tập tin với một bức tranh cho Biểu đồ.js và các tập lệnh cần thiết:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Real-Time Dashboard</title>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
 <canvas id="liveChart" width="800" height="400"></canvas>
 <script src="dashboard.js"></script>
</body>
</html>

Thiết lập kết nối mạng

Trong , kết nối đến máy chủ WebSocket:

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function() {
 console.log('Connection established');
};

socket.onmessage = function(event) {
 const data = JSON.parse(event.data);
 updateChart(data);
};

socket.onclose = function() {
 console.log('Connection closed');
};

socket.onerror = function(error) {
 console.error('WebSocket error:', error);
};

Bộ xây dựng lấy một địa chỉ URL bắt đầu với (hoặc cho kết nối bảo mật). Bộ quản lý phân tích JSON đến và chuyển nó đến chức năng cập nhật biểu đồ.

Xử lý dữ liệu thời gian thực

Chúng ta sẽ duy trì một cửa sổ cỡ lớn của dữ liệu cố định để ngăn chặn sự quá tải và biểu đồ.

const MAX_POINTS = 30;
const labels = [];
const values = [];

function updateChart(data) {
 labels.push(data.timestamp);
 values.push(data.value);

 if (labels.length > MAX_POINTS) {
 labels.shift();
 values.shift();
 }

 myChart.data.labels = labels;
 myChart.data.datasets[0].data = values;
 myChart.update();
}

Chuyển đổi các điểm cũ bảo đảm biểu đồ luôn hiển thị dữ liệu gần nhất. Bạn có thể điều chỉnh dựa trên độ rộng hiển thị và muốn có cửa sổ thời gian.

Đang hiển thị dữ liệu có biểu đồ tần xuất.js

Khởi tạo biểu đồ dòng.js:

const ctx = document.getElementById('liveChart').getContext('2d');
const myChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: [],
 datasets: [{
 label: 'Live Data',
 data: [],
 borderColor: '#3b82f6',
 backgroundColor: 'rgba(59, 130, 246, 0.1)',
 fill: true,
 tension: 0.3
 }]
 },
 options: {
 responsive: true,
 animation: {
 duration: 300 // smooth transitions
 },
 scales: {
 x: {
 type: 'time',
 time: { unit: 'second' },
 title: { display: true, text: 'Time' }
 },
 y: {
 beginAtZero: true,
 title: { display: true, text: 'Value' }
 }
 }
 }
});

Dùng tỷ lệ thời gian bao gồm hay một người thích nghi tương tự. Để đơn giản, bạn có thể coi nhãn là chuỗi và tắt trục thời gian. Ví dụ ở trên dùng tỷ lệ thời gian để sắp xếp theo thứ tự thời gian thích hợp.

Thêm nhiều bộ dữ liệu

Để theo dõi một số thước đo cùng một lúc, thêm nhiều bộ dữ liệu:

datasets: [
 { label: 'CPU', data: [], borderColor: 'red' },
 { label: 'Memory', data: [], borderColor: 'green' },
 { label: 'Network', data: [], borderColor: 'blue' }
]

Gửi một đối tượng có nhiều phím từ máy phục vụ và cập nhật mỗi bộ dữ liệu thích hợp.

Tính năng nâng cao

Trục tự động

Đối với dữ liệu với phạm vi không thể đoán trước, thiết lập và động lực. Tính toán min/max trên mỗi cập nhật hoặc sử dụng Biểu đồ và tùy chọn.

Bộ lọc dữ liệu và cảnh giác

Thêm ngưỡng kích hoạt cảnh báo thị giác hoặc gửi thông báo. Lấy thí dụ, giá trị tô sáng trên giới hạn:

if (data.value > 90) {
 myChart.data.datasets[0].pointBackgroundColor = 'red';
} else {
 myChart.data.datasets[0].pointBackgroundColor = 'blue';
}

Nhiều biểu đồ

Tạo biểu đồ riêng cho luồng dữ liệu khác nhau. Bảo đảm mỗi người có chức năng vẽ và cập nhật riêng. Bạn có thể dùng lại cùng một kết nối và đường dẫn dựa trên trường .

Lỗi khi xử lý và kết nối

Việc ngắt kết nối mạng là không thể tránh khỏi.

function connect() {
 const socket = new WebSocket('ws://localhost:8080');

 socket.onclose = function() {
 console.log('Disconnected, retrying in 3 seconds...');
 setTimeout(connect, 3000);
 };

 socket.onerror = function() {
 socket.close();
 };
 // ... other handlers
}
connect();

Để sản xuất, hãy thêm sự lo lắng để ngăn chặn những vấn đề về bầy bò ầm ĩ khi nhiều khách hàng cùng một lúc kết nối lại.

Những sự suy xét an ninh

  • Dùng WSS – luôn luôn mã hóa các đường dẫn WebSet với hệ thống TLS trong sản xuất.
  • Kết nối ) – kiểm tra các dấu hiệu trong lúc bắt tay (v. d., qua tham số truy vấn hay cookie).
  • Dữ liệu gửi đến – không bao giờ tin tưởng khách đầu vào; cảm biến trên máy phục vụ.
  • Giới hạn ) — ngăn chặn lạm dụng bởi tỷ lệ thư trot mỗi kết nối.

Cách tô màu

Để giữ cho các biểu đồ đáp ứng dưới thông qua dữ liệu cao:

  • Cập nhật ) – sttrat or debounce rendering if message come nhanh hơn bộ duyệt có thể sơn lại (v. g., every 100ms).
  • Dùng yêu cầu hoạt họa ) – đồng bộ hoá biểu đồ với chu kỳ sơn của trình duyệt.
  • Điểm dữ liệu – trong trí nhớ và trong DO.
  • Tính toán mạnh — dùng Web works for Data chuyển đổi.
  • Thông điệp – xem xét định dạng nhị phân (ArrayBuffer) hoặc nén (v. g., cho mỗi thông báo- deflate).

Kiểm tra bảng áp dụng

Thử với một trình phục vụ Socket giả lập có thể mô phỏng nhiều kịch bản khác nhau:

  • Chuyển đổi Dữ liệu chuẩn
  • Giao thông rất nhiều tin nhắn
  • Ngắt kết nối và kết nối
  • JSON sai dạng

Công cụ như trình khách chạy Mạng của đạn hoặc công cụ phát triển trình duyệt có thể giúp gỡ lỗi giao thức.

Tăng cường

Để sử dụng trình quản lý sản xuất như PM2 để giữ cho máy phục vụ Socket chạy. Phục vụ tập tin khách tĩnh bằng ủy nhiệm ngược (nginx, Caddy) cũng xử lý . Ví dụ nginx conchingpet:

location /ws/ {
 proxy_pass http://localhost:8080;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
}

Bảo đảm nhà cung cấp chủ sở hữu hỗ trợ thông qua WebSocket hoặc sử dụng dịch vụ WebSocket dành riêng để tăng tốc.

Kết luận

Xây dựng bảng điều khiển thời gian thực với JavaScript và WebSoet APIs cho bạn sức mạnh để theo dõi dữ liệu trực tiếp với sự chậm trễ tối thiểu. Bằng cách kết hợp một kết nối mạng bền bỉ với thư viện theo dõi các biểu đồ như Biểu đồ.js, bạn có thể tạo bảng điều khiển cảm thấy ngay và tương tác. Chương trình kiến trúc này từ bản phát hành đơn giản đến hệ thống kiểm tra doanh nghiệp. Bắt đầu với các cơ bản được hiển thị ở đây, rồi tùy chỉnh các nguồn dữ liệu, hình ảnh hóa, và hiệu suất tối ưu để phù hợp với trường hợp với trường hợp sử dụng riêng của bạn.

Để đọc thêm, hãy tham khảo tài liệu WebSoet API và ) Cho [FLT.j.