بناء لوحة لصيد الوقت الحقيقي مع جافروري و ويبسكيت آبيس

وتطالب التطبيقات الحديثة بتفسير البيانات في الوقت الحقيقي - سواء لتتبع قياسات الخواديم أو رصد اطعام وسائل الاعلام الاجتماعية أو تحليل الأسواق المالية، ويمكنك لوحة بيانات حديثة أن ترى التغييرات في اللحظة التي تحدث فيها دون أن تُعاد جدولة الصفحات يدوياً، وذلك عن طريق الجمع بين نظام جافاسكريت وأجهزة قياس الإنتاج على الشبكة العالمية، يمكن أن تُنشئ لوحة معلومات متطورة عن الإنتاج الحي والخفي.

Understanding WebSocket APIs

ويبوكيت هو بروتوكول اتصال يوفر وصلات كاملة ومستمرة بين عميل (عادة ما يكون مصففاً) وخادم، خلافاً لما هو تقليدي من برنامج HTTP حيث يتعين على العميل أن يبادر بكل طلب، يتيح على شبكة ويب سوكيت لأي من الطرفين إرسال بيانات في أي وقت بعد المصافحة الأولية، مما يلغي النفقات العامة لطلبات الشرطة المتكررة ويتيح التفاعل الحقيقي في الوقت الحقيقي.

الخصائص الرئيسية لشبكة ويب:

For web applications, the webSocket API is supported by all modern browsers. The server must also implement the webSocket protocol. Popular server-side options include Node.js with the ws library, Python with or managed services like Pusher.

وضع بيئة التنمية الخاصة بك

لوحة كاملة للدماغ في الوقت الحقيقي تتطلب خادماً يبث البيانات و عميلاً يصدرها سنستخدم (نودج) و مكتبة الخادم (فانيلا جافاسكريبت) مع (شارت ج) للعميل

هيئة السيرفر - الجانب (Node.js + ws)

npm init -y
npm install ws

Create a file :

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

ويرسل هذا الخادم قيمة رقمية عشوائية كل ثانيتين، وفي الإنتاج ستحلون محل البيانات المولدة بمصدر بيانات حقيقي (مثلاً، تغييرات قواعد البيانات، تيار كافكا، استطلاعات مؤشرات الأداء التطبيقية).

مؤسسة العملاء الجانبية

Create an ] file with a canvas for Chart.js and the necessary scripts:

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

إنشاء وصلة شبكية

في ، ربط إلى خادمك على شبكة الإنترنت:

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

The constructor takes a URL starting with (or for secure connections). The ] handler parses incoming JSON and forwards it to the chart update function.

معالجة البيانات المتعلقة بالتوقيت الحقيقي

إدارة البيانات بكفاءة أمر حاسم لتجربة لوحات مظلة سلسة سنحافظ على نافذة ثابتة من نقاط البيانات لمنع تلف الذاكرة و تحميلها الزائد

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

إن التحول إلى النقاط القديمة يضمن أن يُظهر الرسم البياني دائما أحدث البيانات، ويمكنك تعديله على أساس عرض العرض وزمن النافذة الزمنية المرغوبة.

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

وباستخدام جدول زمني يتطلب إدراج أو مكيف مماثل، وببساطة، يمكنك معالجة العلامات على أنها خيوط وتعطيل محور الزمن، والمثال الوارد أعلاه يستخدم جدولا زمنيا للترتيب الزمني المناسب.

إضافة مجموعات البيانات المتعددة

ولرصد عدة مقاييس في وقت واحد، تضاف مجموعات بيانات متعددة:

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

أرسلوا شيئاً بمفاتيح متعددة من الخادم وستجدوا كل مجموعة بيانات وفقاً لذلك

الترشيحات المتقدمة

Auto-Scaling Axes

(لبيانات ذات نطاقات غير متوقعة، حددوا ((إف إل تي: 18) و((إف إل تي: 19))) بشكل ديناميكي، حاسبوا (مين/ماكس) على كل تحديث أو استخدام لخيارات (تشارت.ي) وخيارات و.

إعداد البيانات والإنذار

يضاف الحد الأدنى الذي يحفز الإنذارات البصرية أو يرسل إخطارات، مثلا، يبرز القيم التي تتجاوز الحد:

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

القوارب المتعددة

(ج) وضع مخططات منفصلة لمختلف مسارات البيانات، وضمان أن يكون لكل منها وظيفة خاصة بها في مجال التفريغ وتحديث البيانات، ويمكنك إعادة استخدام نفس البيانات المتعلقة بالشبكة على أساس .

معالجة الأخطاء والارتباط

ولا مفر من انقطاع الشبكات، وتنفيذ إعادة ربط تلقائية مع التخلف الهائل:

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

من أجل الإنتاج، تضاف جليس لمنع رعي قضايا القطيع عندما يعيد العديد من العملاء الاتصال في وقت واحد.

الاعتبارات الأمنية

  • Use WSS] - دائماً ما يشتّر حركة الشبك مع TLS في الإنتاج.
  • Authenticate connections - verify tokens during the handshake (e.g., via query parameters or Cookies).
  • Validate incoming data] — never trust client input; sanitize on the server.
  • Reate limiting] – prevent abuse by throtling message rates per connection.

الأداء على الوجه الأمثل

لإبقاء لوحة المتابعة مستجيبة تحت مدخل البيانات العالي:

  • Throttle updates] — batch or debounce client-side rendering if messages arrive faster than the browser can repaint (e.g., every 100ms).
  • استخدمي طلبي فيرم التخدير - مستجدات خريطة متزامنة مع دورة طلاء الـ بروزر -
  • لترهيب نقاط البيانات ] - سواء في الذاكرة أو في إدارة الشؤون الإدارية.
  • Offload heavy calculations] - use web Workers for data transformation.
  • Comppress messages] - consider binary formats (ArrayBuffer) or compression (e.g., permessage-deflate).

اختبار لوحة الدافئة الخاصة بك

اختبار مع خادم شبكة ويب متحركة يمكن أن تحاكي سيناريوهات مختلفة:

  • كوادر البيانات العادية
  • حركة مرور البورست (رسالة مادية في آن واحد)
  • حالات العزل وإعادة الاتصال
  • Malformed JSON

أدوات مثل [موكل بوستمان على الشبكة ] أو أدوات تطوير المصفح يمكن أن تساعد على إلغاء البروتوكول.

النشر

(ب) استخدام مدير عمليات مثل PM2 لإبقاء خادم الشبكة يعمل، وخدم ملفات العملاء الثابتة عن طريق وكيلة بديلة (مغنية، كادي) تتولى أيضاً الإنهاء.

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

ضمان أن يقدم مضيفكم الدعم لـ (ويبوكيت) أو يستخدم خدمة مُخصصة على الشبكة العالمية من أجل التصعيد

خاتمة

بناء لوحة بيانات في الوقت الحقيقي مع شركة جافاسكوبت وشركة ويب سوكيت للكهرباء تعطيك القدرة على رصد البيانات الحية بأقل قدر من التأخير، وذلك عن طريق الجمع بين تواصل مستمر على الشبكة العالمية مع مكتبة تخطيطية مستجيبة مثل شارت.ج، يمكنك إنشاء لوحات مضغوطة تشعر بأنها فورية وتفاعلية، وتمتد هذه البنيانات من عمليات خفض بسيطة إلى نظم الرصد على مستوى المؤسسة، بدءاً من استخدام الأدوات المصورة هنا، ثم تكييف البيانات.

For further reading, consult the MDN webSocket API documentation] and the ]Chart.js documentation.