داشبوردهای تجزیه و تحلیل ابزارهای مفیدی برای نظارت و درک داده ها در زمان واقعی هستند. اگر به دنبال ساخت یک داشبورد تحلیلی کارآمد و جامع هستید، ترکیب Node.js، WebSocket و Redis یک گزینه عالی است. در این پست وبلاگ، روند ساخت داشبورد بلادرنگ با استفاده از این فناوری ها را بررسی خواهیم کرد.
نصب Node.js و WebSocket
Node.js یک زمان اجرا جاوا اسکریپت مبتنی بر رویداد ناهمزمان است که برای ساخت برنامه های بسیار مقیاس پذیر طراحی شده است. این برای برنامه های کاربردی داده محور عالی است. WebSocket یک پروتکل برای ارتباط دو طرفه از طریق یک اتصال TCP است که ارتباطات دو جهته با تاخیر کم را ارائه می دهد.
قبل از شروع، باید Node.js و کتابخانه WebSocket را نصب کنید. برای انجام این کار، دستورات زیر را اجرا کنید:
// Install Node.js on Mac
brew install node
// Install WebSocket library
npm install websocket
استفاده از Redis Pub/Sub برای دریافت داده
اکنون که Node.js و کتابخانه WebSocket را نصب کرده ایم، می توانیم یک سیستم Redis Pub/Sub را برای دریافت داده راه اندازی کنیم. Redis یک منبع باز، ذخیره ساختار داده در حافظه است که به عنوان پایگاه داده، حافظه پنهان و واسطه پیام استفاده می شود. سیستم Pub/Sub به مشتریان این امکان را می دهد که در کانال های خاصی مشترک شوند و از آنها پیام دریافت کنند.
ما می‌توانیم از این سیستم برای ارسال پیام‌ها از باطن خود به داشبورد Analytics استفاده کنیم تا داشبورد بتواند داده‌ها را در زمان واقعی نمایش دهد. برای انجام این کار ابتدا یک سرور Redis راه اندازی کنید:
// Start Redis server
redis-server
اکنون می‌توانیم یک اسکریپت Node.js ایجاد کنیم که در یک کانال مشترک شده و پیام‌هایی را از آن دریافت می‌کند. اسکریپت ما شامل دو عملکرد خواهد بود – یکی برای اشتراک در یک کانال و دیگری برای دریافت پیام از کانال:
// Subscribe to a channel
function subscribeToChannel(channel, callback) {
let client = redis.createClient();
client.on('connect', function() {
client.subscribe(channel);
client.on('message', callback);
});
}
// Receive messages from a channel
function receiveMessage(channel, message) {
// Do something with the message
}
// Call the subscribeToChannel function and pass it the channel and callback
subscribeToChannel('myChannel', receiveMessage);
ساخت داشبورد بلادرنگ
اکنون که سیستم Redis Pub/Sub خود را راه اندازی کرده ایم، می توانیم ساخت داشبورد خود را شروع کنیم. برای این کار از Node.js، HTML و CSS استفاده می کنیم. ما از Node.js برای راه اندازی یک سرور و ارائه فایل های HTML و CSS خود استفاده می کنیم و از کتابخانه WebSocket برای ایجاد یک اتصال سوکت بین داشبورد و باطن خود استفاده می کنیم.
ابتدا، اجازه دهید یک فایل index.html ایجاد کنیم که حاوی طرح داشبورد ما باشد. این فایل شامل HTML و CSS لازم برای داشبورد ما خواهد بود – در اینجا یک مثال آورده شده است:
<html>
<head>
<title>Real-Time Dashboard</title>
<style>
h1 {
font-family: sans-serif;
}
.container {
width: 100%;
}
#chart {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>Real-Time Dashboard</h1>
<div class="container">
<canvas id="chart"></canvas>
</div>
</body>
</html>
اکنون یک فایل server.js ایجاد می کنیم که حاوی کد Node.js ما است. این کد یک سرور راه اندازی می کند و فایل های HTML و CSS ما را از دایرکتوری ارائه می کند. همچنین یک اتصال WebSocket را راه‌اندازی می‌کند و هنگامی که پیامی از کانال Redis دریافت می‌کند، پیامی به فرانت‌اند ارسال می‌کند:
// Require the necessary packages
const http = require('http');
const socketIO = require('socket.io');
// Set up a server
const server = http.createServer(onRequest);
const io = socketIO(server);
// Serve the HTML and CSS files
function onRequest(req, res) {
// Serve the index.html and styles.css files here
}
// Listen for connections
io.on('connection', onConnection);
// Set up a socket connection
function onConnection(socket) {
// Subscribe to the Redis channel
subscribeToChannel('myChannel', (message) => {
// Send a message to the frontend
socket.emit('message', message);
});
}
// Start the server
server.listen(3000, () => {
console.log('Server is listening on port 3000');
});
تجسم داده ها
اکنون که سرور Node.js خود را راه اندازی کرده ایم، می توانیم تجسم داده ها را شروع کنیم. برای این کار از یک کتابخانه نمودار مانند Chart.js استفاده می کنیم. این کتابخانه به ما امکان می دهد به راحتی نمودارهایی را با داده های کانال Redis خود ایجاد کنیم.
ابتدا، بیایید کتابخانه Chart.js را به فایل HTML خود اضافه کنیم:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
اکنون می توانیم یک نمودار برای نمایش داده های خود ایجاد کنیم. برای انجام این کار، یک تابع در فایل server.js خود ایجاد می کنیم که پیام ها را از کانال Redis دریافت می کند و نمودار را به روز می کند. در اینجا یک مثال است:
// Receive messages from the Redis channel
function onMessage(message) {
let data = JSON.parse(message);
// Update the graph with the data
updateGraph(data);
}
// Function to update the graph
function updateGraph(data) {
// Update the graph with the data here
}
اکنون می‌توانیم این تابع را هنگام دریافت پیام فراخوانی کنیم – خط کد زیر را به تابع onConnection خود اضافه کنید:
// Subscribe to the Redis channel
subscribeToChannel('myChannel', onMessage);
نتیجه
ساخت داشبورد تجزیه و تحلیل با Node.js، WebSocket و Redis یک راه عالی برای نظارت و درک داده ها در زمان واقعی است. در این پست وبلاگ، فرآیند ساخت داشبورد با استفاده از این فناوری ها را بررسی کرده ایم. ابتدا Node.js و کتابخانه WebSocket را نصب کردیم، سپس یک سیستم Redis Pub/Sub ایجاد کردیم تا داده ها را از باطن خود دریافت کنیم. سپس یک سرور Node.js ساختیم و یک اتصال WebSocket راه اندازی کردیم و در نهایت از Chart.js برای تجسم داده ها استفاده کردیم.
با استفاده از این فرآیند، اکنون می توانید به راحتی داشبورد تجزیه و تحلیل خود را ایجاد کنید. این می تواند به ویژه برای مشاغلی که نیاز به نظارت بر داده های خود در زمان واقعی دارند مفید باشد. با Node.js، WebSocket و Redis، می‌توانید به سرعت و کارآمد یک داشبورد بلادرنگ ایجاد کنید.
