برنامه های مدرن خواستار تجسم داده های زمان واقعی هستند - چه برای ردیابی معیارهای سرور، نظارت بر فید رسانه های اجتماعی، و یا تجزیه و تحلیل بازارهای مالی، یک داشبورد زمان واقعی شما را قادر می سازد تا تغییرات لحظه ای که آنها اتفاق می افتد را ببینید، بدون تازه سازی صفحه دستی با ترکیب جاوا اسکریپت در سمت مشتری با WebSocket APIs، شما می توانید یک داشبورد زنده، پایین که به روز رسانی های جدید می رسد از طریق تکنیک های تولید واقعی، پوشش همه چیز.

آشنایی با WebSocket APIs

WebSocket یک پروتکل ارتباطی است که ارتباطات کامل و مداوم بین یک مشتری (معمولاً یک مرورگر) و یک سرور را فراهم می کند، بر خلاف HTTP سنتی که مشتری باید هر درخواست را آغاز کند، WebSocket به هر دو طرف اجازه می دهد تا داده ها را در هر زمان پس از دست دادن اولیه ارسال کنند.این باعث حذف سربار درخواست های مکرر HTTP و فعال سازی واقعی می شود.

ویژگی های کلیدی WebSocket:

  • [در این باره] [در این باره]، [[[۱]] [۱۰]] [۱]] [۱]] [۱] [۱۰]] [۱]] [۱] [۱]] [۱]] [۱۰] [۱]] [۷]] [۷]] [۹] [۱] [۱]] [۱] [۱]] [۱] [۵] [۵] [۹] [۹] [۱] [۱] [۱] [۱] [۷] [۷] [۵] [۱] [۱] [۱] [۵] [۵] [۵] [۱] [۱] [۵] [۱] [۱]] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱]]] [۵] [۶] [بر [۱] [بر [بر [۵] [۷] [بر [۱] [۱] [۱] [بر [۹] [۵] [۶] [۹] [بر [۹]] [۹] [۵]]] [۹] [۹
  • [در این باره] [در این باره]، [[[۱]] [۱۰] [۱۰]] [۱۰] [۱۰] [۱۰] [۱۰]] [۱۰] [۱۰] [۱] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱] [۱۰] [۱] [۱۰] [۱۰] [۱] [۱] [۱۰] [۱۰] [۱۰] [۱] [۱۰] [۱۰] [۱] [۱۰] [۱۰] [۱] [۱] [۱] [۱] [۱] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰]
  • [در این میان] [[[ویرایش]] [و هر دو مشتری و سرور می توانند پیام ها را فشار دهند.
  • سبک وزن فریمن - حداقل سر سر سر در مقایسه با HTTP.

برای برنامه های وب، WebSocket API توسط تمام مرورگرهای مدرن پشتیبانی می شود.[۱] سرور همچنین باید پروتکل WebSocket را پیاده سازی کند. گزینه های سرور محبوب شامل Node.js با :۳][۳][۳] کتابخانه، پایتون با ، یا خدمات مدیریت شده مانند Pher] .

تنظیم محیط توسعه خود را

داشبورد تمام وقت واقعی نیاز به هر دو سرور دارد که داده ها و یک مشتری را پخش می کند که آن را ارائه می دهد.ما از Node.js و کتابخانه (FLT:1) برای سرور و وانیل جاوا اسکریپت با نمودار.js برای مشتری استفاده می کنیم.

راه اندازی سرور-Side (Node.js + ws)

npm init -y
npm install ws

ساخت فایل (FLT3)

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

این سرور هر دو ثانیه یک مقدار عددی تصادفی را ارسال می کند.در تولید شما داده های تولید شده را با یک منبع داده واقعی جایگزین می کنید (به عنوان مثال، تغییرات پایگاه داده، جریان کافکا، نظرسنجی API).

راه اندازی Client-Side

یک فایل (FLT:5) با یک فایل با یک صفحه برای نمودار.js و اسکریپت های لازم ایجاد کنید:

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

ایجاد اتصال WebSocket

در [[FLT7]]، به سرور 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);
};

[[رده:رده:]] و [[رده:]] و [[رده:رده:]] و [[رده:رده:]] و [[رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده ها و یا در این کار را به کار می کنند.

مدیریت داده های real-Time

مدیریت داده های کارآمد برای یک تجربه داشبورد صاف بسیار مهم است، ما یک پنجره ثابت از نقاط داده را برای جلوگیری از نفخ حافظه و بار نمودار نگه می داریم.

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

تغییر نقاط قدیمی تضمین می کند که نمودار همیشه آخرین داده ها را نشان می دهد.شما می توانید را بر اساس عرض صفحه نمایش و پنجره زمان مورد نظر تنظیم کنید.

تجسم داده ها با Chart.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' }
 }
 }
 }
});

استفاده از مقیاس زمان نیاز به استفاده از جمله [FLT16] یا آداپتور مشابه دارد.برای سادگی، شما می توانید برچسب ها را به عنوان رشته ها و غیر فعال کردن محور زمان استفاده کنید. مثال بالا از مقیاس زمان برای سفارش زمانی مناسب استفاده می کند.

اضافه کردن چندین Datasets

برای نظارت بر چندین معیار به طور همزمان، چندین مجموعه داده اضافه کنید:

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

یک شی را با چندین کلید از سرور ارسال کنید و هر مجموعه داده را به روز کنید.

ویژگی های پیشرفته

ماشین Axes

برای داده های با محدوده های غیر قابل پیش بینی، تنظیم شده (FLT 18) و [FLT 19] به صورت پویا، Calculate min/max در هر روز رسانی و یا استفاده از پورت.js و گزینه.

فیلتر کردن داده ها و هشدارها

آستانه هایی را اضافه کنید که هشدارهای بصری یا اعلان های ارسالی را ایجاد می کنند، به عنوان مثال، ارزش های برجسته ای را در بالای یک محدودیت قرار می دهند:

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

چندین نمودار

نمودار های جداگانه ای برای جریان های مختلف داده ایجاد کنید.اطمینان حاصل کنید که هر کدام دارای عملکرد بوم و به روز رسانی خود هستند.شما می توانید از همان اتصال WebSocket و داده های مسیر بر اساس یک فیلد استفاده کنید.

مدیریت خطا و اتصال مجدد

وقفه های شبکه اجتناب ناپذیر هستند. پیاده سازی مجدد اتوماتیک با backoff نمایی:

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

برای تولید، اضافه کردن jitter برای جلوگیری از مشکلات گله رعد و برق زمانی که بسیاری از مشتریان به طور همزمان دوباره متصل می شوند.

ملاحظات امنیتی

  • استفاده از WSS – همیشه ترافیک WebSocket را با TLS در تولید رمزنگاری کنید.
  • اتصالات غیر واقعی [FLT 1] - تأیید توکن ها در طول دست دادن (به عنوان مثال، از طریق پارامترهای پرس و جو یا کوکی).
  • داده های ورودی را تأیید کنید [FLT 1] - هرگز به ورودی مشتری اعتماد نکنید؛ در سرور نگهداری کنید.
  • [[۱] [۱۰] محدود کردن [[۱۰] [۱۰] - جلوگیری از سوء استفاده از نرخ پیام در هر اتصال.

بهینه سازی عملکرد

برای نگه داشتن داشبورد پاسخگو تحت نفوذ داده های بالا:

  • به روز رسانی های Throttle [FLT 1] - دسته یا رندر سمت مشتری را اگر پیام ها سریعتر از مرورگر می توانند دوباره رنگ شوند (به عنوان مثال، هر 100m).
  • از RequestAnimationFrame [FLT 1] استفاده کنید، به روز رسانی نمودار را با چرخه رنگ مرورگر همگام کنید.
  • اطلاعات را محدود کنید - هر دو در حافظه و در DOM.
  • محاسبات سنگین را بارگذاری کنید، از کارکنان وب برای تحول داده ها استفاده کنید.
  • (به انگلیسی: FLT:0) پیام های فشار (FLT:1) را در نظر بگیرید که فرمت های باینری (ArrayBuffer) یا فشرده سازی (به عنوان مثال، permessage-deflate).

تست داشبورد شما

تست با یک سرور وب سایت های خرد شده که می تواند سناریوهای مختلف را شبیه سازی کند:

  • اطلاعات عادی
  • ترافیک Burst (در یک زمان پیام های زیادی)
  • ارتباطات و اتصال مجدد
  • سازنده : Malform JSON

ابزارهایی مانند WebSocket WebSocket (FLT:1) یا ابزار توسعه دهنده مرورگر می توانند به خنثی کردن پروتکل کمک کنند.

استقرار

برای تولید از یک مدیر فرآیند مانند PM2 برای نگه داشتن سرور WebSocket استفاده می کند و فایل های مشتری استاتیک را از طریق یک پروکسی معکوس (nginx، Caddy) که همچنین (FLT 25 خاتمه می یابد، به عنوان مثال nginx config اسنیپx:

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

اطمینان حاصل کنید که ارائه دهنده میزبانی شما از WebSocket pass از طریق WebSocket پشتیبانی می کند یا از سرویس اختصاصی WebSocket برای مقیاس پذیری استفاده می کند.

نتیجه گیری

ساخت یک داشبورد زمان واقعی با جاوا اسکریپت و WebSocket APIs به شما قدرت نظارت بر داده های زنده با حداقل تاخیر را می دهد.با ترکیب یک اتصال مداوم WebSocket با یک کتابخانه نمودار پاسخگو مانند Chart.js، شما می توانید داشبوردهایی را ایجاد کنید که احساس فوری و تعاملی دارند.این مقیاس های معماری از نسخه های ساده به سیستم های نظارت بر سطح سازمانی شروع می کنند، سپس تصاویر اساسی را سفارشی می کنند، و از ویژگی های خاص استفاده می کنند.

برای مطالعه بیشتر، با مستندات API WebSocket مشورت کنید و .Chart.js] .