Modern uygulamalar gerçek zamanlı veri görselleştirme talep eder – WebSocket API'leri takip etmek için, yeni veriler olarak güncellemek veya analiz etmek için sosyal medya beslemelerini izlemek için JavaScript'i birleştirerek, webSocket API'leri ile birlikte her şeyi kullanarak gerçek zamanlı bir panolama işlemine yol açabilirsiniz.

WebSocket API'leri anlamak

WebSocket, tekrarlanan HTTP isteklerinin yükünün ardından herhangi bir zamanda veri göndermesi gereken bir iletişim protokolüdir ve gerçek zamanlı interaktiviteyi ortadan kaldırır. WebSocket, her isteği başlatacak şekilde, WebSocket, her zaman tekrarlanan HTTP isteklerinin yükünü ortadan kaldırır ve gerçek zamanlı interaktiviteyi ortadan kaldırır.

WebSocket'in Anahtar Özellikleri:

  • [FONT:0)Persistent bağlantısı[[Dönetici: 1 ) - açıkça kapalı olana kadar açık kalır.
  • [FONT=0) Düşük gecikmeli (Dönetici) - mesaj başına bağlantı yok.
  • [FONT:0]Biyyolojik[Dönerge:0)[Dönergeler ve sunucu mesajları itebilir.
  • [FONT=0)Işık ağırlık – HTTP ile karşılaştırıldığında en az kafalı üst.

Web uygulamaları için, WebSocket API tüm modern tarayıcılar tarafından destekleniyor. sunucu ayrıca WebSocket protokolünü uygulamalı. Popüler sunucu-side seçenekleri Node.js with the )ws) kütüphane, [[FONTFLT:0) veya yönetilen hizmetler uygulamaktadır.

Geliştirme Çevrenizi Ayarlayın

Tam gerçek zamanlı bir pano, hem de yayın yapan bir sunucu gerektirir. Bunu yapan bir müşteri. Node.js ve theDANFLT:1) sunucu için kütüphane ve müşteri için Chart.js ile vanilya JavaScript kullanacağız.

Server-Side Kurulum (Node.js + ws)

npm init -y
npm install ws

Bir dosyaFLİRT:3 oluşturun:

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));
});

Bu sunucu her iki saniyede rastgele sayısal bir değer gönderir. Üretimde, üretilen verileri gerçek bir veri kaynağı ile değiştirirsiniz (örneğin, veritabanı değişiklikleri, Kafka stream, API anket).

Müşteri-Side

Grafik için bir tuvalle bir Excel ile bir dosya oluşturun.js ve gerekli senaryolar:

<!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>

Bir WebSocket Connection Bağlantısını Oluşturun

[Üyetim: 7) WebSocket sunucunuza bağlanır:

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);
};

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

Gerçek Zamanlı Veriye Hazırlanma

Verimli veri yönetimi, düzgün bir pano deneyimi için önemlidir. hafıza bloat ve grafik aşırı yüklemesini önlemek için sabit bir veri noktası tutacağız.

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();
}

Eski noktaları değiştirmek her zaman en son verileri gösterir. Ekran genişliğine ve istenen zaman penceresine dayanarak ayarlayabilirsiniz.

Grafikle Görselleştirme Data with Chart.js

Chart.js line grafiğini ilk olarak:

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' }
 }
 }
 }
});

Bir zaman ölçeği kullanmak, aynı adaptör veya benzer bir adaptör dahil gerektirir. basitlik için, etiketler dizeleri olarak tedavi edebilir ve zaman eksenlerini devre dışı bırakabilirsiniz. Yukarıdaki örnek uygun kronolojik sipariş için zaman ölçeğini kullanır.

Birden fazla Datasets ekin

Aynı anda birkaç metrik izlemek için, birden fazla veri setlerini ekleyin:

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

Sunucudan birden fazla anahtarla bir nesne gönderin ve her veri kümesini buna göre güncelleyin.

Gelişmiş Özellikler Gelişmiş Özellikler

Auto-Scaling Axes

Tahmin edilemez aralıklarla ilgili veriler için, setFLT:18 ve [[Dönetici: Her güncellemede min/max hesaplayın veya Chart.js'surFLT:20 ve [[Dönetici:) seçenekleri.

Data Filtering and Alerts

Görsel uyarıları tetikleyen veya bildirimleri gönderen eşleri ekleyin. Örneğin, bir limitin üzerindeki değerleri vurgulayın:

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

Birden Çok Grafik

Farklı veri akışları için ayrı grafikler oluşturun. Her birinin kendi tuval ve güncelleştirme işlevine sahip olmasını sağlayın. Aynı WebSocket bağlantısını ve rota verilerini algFLT:23'e dayanarak yeniden kullanabilirsiniz.

Hata işleme ve yeniden bağlantı

Ağ kesintileri kaçınılmazdır. Üstel arka ile otomatik yeniden bağlantı kurmak:

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();

Üretim için, birçok müşteri aynı anda yeniden bağlantı kurduğunda jitter ekleyin.

Güvenlik Önergeleri

  • [FONTS:0) WSS) kullanın - her zaman üretimde TLS ile WebSocket trafiği şifreleyin.
  • [FONT=0]Authenticate bağlantıları[[Dönetici: 1)) - Elhake sırasındaki jetleri doğrulayın (örneğin, sorgu parametreleri veya kurabiyeler aracılığıyla).
  • [[Dönetici:0)Validate gelen veriler[[Dönetici: 1) Müşteri girişine asla güvenmeyin; sunucuya sanitize.
  • [FONT:0) Sınırlama[[Dönetici: 1))[[[Dönetici:0)

Performans Optimizasyonu

Yüksek veri altındaki paniğe duyarlı tutmak için:

  • [FONT=0]Throttle Update[[Dönetici: 1) – mesaj tarayıcıdan daha hızlı geri gelirse, her 100ms.
  • [FONT:0)Use requestAnimationFrame) – tarayıcının boya döngüsü ile senkronize edilen senkronizeler.
  • [FONT=0]Limit data puanları[[Dönetici: 1 ) - hem hafızada hem de DOM'da.
  • [FONT:0)Resmiler ağır hesaplamalar[[Dönler: 1 ) – Web İşçilerini veri dönüşümü için kullanın.
  • [FONT=0]Compress mesajları[[Dönem: 1) - ikili formatları (ArrayBuffer) veya sıkıştırma (örneğin, permessage-deflate).

Dashboard'ı test et

Çeşitli senaryoları simüle edebilecek bir alay WebSocket sunucusu ile test edin:

  • Normal veri kaması
  • Burst trafiği (bir zamanlar mesaj)
  • Disconnections and reconnections
  • Malform JSON

Postman WebSocket müşterisi ) veya tarayıcı Geliştirici Araçları protokolü de süzebilir.

Deployment

Üretim için PM2 gibi bir işlem yöneticisi, WebSocket sunucuyu çalıştırın. Statik istemci dosyalarını ters bir proxy (nginx, Caddy) aracılığıyla da işliyor. Örnek nginx configure:

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

hosting sağlayıcınızın WebSocket geçişini desteklediği veya ölçeklenebilirlik için özel bir WebSocket hizmeti kullanmasına yardımcı olun.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

JavaScript ve WebSocket API'leri ile gerçek zamanlı bir pano oluşturmak size iş düzeyinde izleme sistemleri ile canlı verileri izlemek için güç verir.Bu nedenle burada gösterilen temelleri kullanarak, veri kaynaklarını, görselleştirmeleri ve belirli kullanım durumunuzu uygun bir şekilde optimize etmek için doğru ve interaktif hissettiğiniz paniğe sahip olan paneller oluşturabilirsiniz.

Daha fazla okuma için, [[DÜye:0)MDN WebSocket API belgeleri[DÜT:1) ve [[Dönetici:2)Chart.js Belgeleri).