בניית DASHBOARD אנליטיקה בזמן אמת עם Node.js ו- Mongodb

בלוג

בניית DASHBOARD אנליטיקה בזמן אמת עם Node.js ו- Mongodb

זוהי כותרת התמונה

תנאים מוקדמים

Node.js 8.10.0 ומעלה
MongoDB 3.4 ומעלה.
ל חשבון דוחף.

מגדיר

נתחיל באמצעות מחולל היישומים האקספרס:

# if you don't already have it installed npm install express-generator -g # create a new express app with view engine set to Handlebars (hbs) express --view=hbs express-realtime-analytics-dashboard cd express-realtime-analytics-dashboard && npm install

לאחר מכן נוסיף את התלות שלנו:

החלפת מטבעות bb&t
npm install --save dotenv mongoose moment pusher

להלן פירוט של מה מיועד כל מודול:

  • Dotenv היא חבילה קטנה לטעינת נתונים רגישים (כלומר אישורי אפליקציית Pusher שלנו) מקובץ .env.
  • נְמִיָה עוזר לנו למפות את המודלים שלנו למסמכי MongoDB.
  • רֶגַע t מסייע במניפולציה קלה של תאריכים ושעות.
  • דוֹחֵף מספק ממשקי API בזמן אמת.

רישום כל הבקשות

ניצור תוכנת ביניים שתרשום כל בקשה למסד הנתונים שלנו. תוכנת הביניים שלנו תהיה תוכנת 'אחרי התיכון', כלומר היא תפעל לאחר עיבוד הבקשה אך רק לפני שליחת התגובה. נשמור את הפרטים הבאים:

  • כתובת האתר היחסית (למשל, /| _+_ |)
  • שיטת HTTP (למשל, GET)
  • הזמן שלקח להגיב לבקשה
  • היום בשבוע
  • השעה ביום,
    בואו ניצור את | _+_ |. צור את הקובץ | _+_ | עם התוכן הבא:
users

החלף את הקוד ב | _+_ | עם העוקבים:

RequestLog model

כאן, אנו מצרפים תוכנת אמצע המחברת מאזין ל סיים אירוע התגובה. אירוע זה מופעל כשהתגובה סיימה לשלוח. המשמעות היא שנוכל להשתמש בזה לחישוב זמן התגובה. במאזין שלנו, אנו יוצרים יומן בקשות חדש ב- MongoDB.

מציג את הניתוחים שלנו בלוח המחוונים

ראשית, ניצור אובייקט שירות ניתוח שמחשב עבורנו את הנתונים הסטטיסטיים העדכניים ביותר. הכנס את הקוד הבא לקובץ | _+_ | בשורש הפרויקט שלך:

models/request_log.js

השירות שלנו עושה שימוש צבירות MongoDB כדי לאחזר את הנתונים הסטטיסטיים הבאים:

  • | _+_ | הוא הזמן הממוצע שנלקח מהמסלולים שלנו להחזרת תגובה.
  • | _+_ | מכיל מידע ספציפי לכל מסלול, כגון זמן התגובה הממוצע ומספר הבקשות.
  • | _+_ | מכיל רשימה של כל הימים, לפי סדר הבקשות ליום.
  • | _+_ | מכיל רשימה של כל השעות, לפי סדר הבקשות לשעה.
  • | _+_ | הוא המספר הכולל של הבקשות שקיבלנו.

לאחר מכן, אנו מגדירים מסלול ללוח המחוונים הוסף את הקוד הבא ממש לפני | _+_ | בשורה | _+_ |

let mongoose = require('mongoose'); let RequestLog = mongoose.model('RequestLog', { url: String, method: String, responseTime: Number, day: String, hour: Number }); module.exports = RequestLog;

לבסוף, אנו יוצרים את הנוף. אנו נשתמש ב- Bootstrap לעיצוב מהיר ו- Vue.js לאגירת נתונים קלה. צור את הקובץ | _+_ | .hbs עם התוכן הבא:

app.js

הפיכת לוח המחוונים בזמן אמת

כדי להפוך את לוח המחוונים שלנו לזמן אמת, עלינו לחשב מחדש את הניתוח עם הגעת הבקשות החדשות. המשמעות היא ש:

  • הודע לכל הלקוחות על הניתוח המעודכן כאשר יש בקשה חדשה
  • הקשיב לאנליטיקס החדש בממשק הקדמי שלנו ועדכן את הנוף בהתאם
    Pusher יפעיל את הפונקציונליות שלנו בזמן אמת. היכנס אל לוח המחוונים שלך וליצור אפליקציה חדשה. העתק את אישורי האפליקציה שלך מהקטע מפתחות אפליקציות. צור קובץ .env והוסף בו את האישורים שלך:
const express = require('express'); const path = require('path'); const moment = require('moment'); const RequestLog = require('./models/request_log'); const app = express(); require('mongoose').connect('mongodb://localhost/express-realtime-analytics'); app.use((req, res, next) => { let requestTime = Date.now(); res.on('finish', () => { if (req.path === '/analytics') { return; } RequestLog.create({ url: req.path, method: req.method, responseTime: (Date.now() - requestTime) / 1000, // convert to seconds day: moment(requestTime).format('dddd'), hour: moment(requestTime).hour() }); }); next(); }); // view engine setup app.set('views', path.join(__dirname, 'views')); require('hbs').registerHelper('toJson', data => JSON.stringify(data)); app.set('view engine', 'hbs'); module.exports = app;

עכשיו שנה את הקוד ב | _+_ | אז זה נראה כך:

analytics_service.js

בחזית, נמשוך את Pusher ונאזין להודעת העדכון בערוץ הניתוח. לאחר מכן נעדכן את ערכי window.analytics, ונאפשר ל- Vue לעדכן עבורנו את ממשק המשתמש. הוסף את הקוד הבא לסוף | _+_ | שלך:

const RequestLog = require('./models/request_log'); module.exports = { getAnalytics() { let getTotalRequests = RequestLog.count(); let getStatsPerRoute = RequestLog.aggregate([ { $group: { _id: {url: '$url', method: '$method'}, responseTime: {$avg: '$response_time'}, numberOfRequests: {$sum: 1}, } } ]); let getRequestsPerDay = RequestLog.aggregate([ { $group: { _id: '$day', numberOfRequests: {$sum: 1} } }, { $sort: {numberOfRequests: 1} } ]); let getRequestsPerHour = RequestLog.aggregate([ { $group: { _id: '$hour', numberOfRequests: {$sum: 1} } }, {$sort: {numberOfRequests: 1}} ]); let getAverageResponseTime = RequestLog.aggregate([ { $group: { _id: null, averageResponseTime: {$avg: '$responseTime'} } } ]); return Promise.all([ getAverageResponseTime, getStatsPerRoute, getRequestsPerDay, getRequestsPerHour, getTotalRequests ]).then(results => { return { averageResponseTime: results[0][0].averageResponseTime, statsPerRoute: results [1], requestsPerDay: results[2], requestsPerHour: results[3], totalRequests: results[4], }; }) } };

החלף את מפתח האפליקציה שלך ואת מזהה האפליקציה שלך עם אישורי אפליקציית Pusher שלך.

הגיע הזמן שנבדוק את האפליקציה שלנו. בואו ניצור כמה מסלולי דמה - אחד בעצם. מסלול זה ייקח זמן שונה לטעינה, בהתאם לכתובת האתר, כך שנוכל לראות את ההשפעה על הנתונים הסטטיסטיים שלנו. ביקור | _+_ | יחכה שלוש שניות, | _+_ | לשנייה אחת וכן הלאה. הוסף את זה ל | _+_ | שלך, ממש לפני | _+_ | קַו:

averageResponseTime

עכשיו כדי לראות את האפליקציה בפעולה. הפעל את שרת MongoDB שלך על ידי הפעלת | _+_ |. (ב- Linux/macOS, ייתכן שיהיה עליך להריץ אותו כ | _+_ |).

לאחר מכן הפעל את האפליקציה שלך על ידי הפעלה:

statsPerRoute

בקר במרכז השליטה של ​​Analytics בכתובת http: // localhost: 3000/analytics . לאחר מכן, שחק עם האפליקציה על ידי ביקור בכמה דפים (כתובת אתר ההמתנה עם ערכים שונים למספר השניות) וצפה בסטטיסטיקה המוצגת בלוח המחוונים משתנה בזמן אמת.

הערה: ייתכן שתראה כי מספר הבקשות גדל ביותר מאחת בעת ביקור בדף. הסיבה לכך היא שהיא גם סופרת את הבקשות לקבצי CSS (כלולות ב- Express).

סיכום

במאמר זה בנינו תוכנת אמצע העוקבת אחר כל בקשה, שירות שמחשב עבורנו ניתוחים מבוסס על רצועות אלה ולוח מחוונים המציג אותן. הודות ל- Pusher, הצלחנו לעדכן את לוח המחוונים בזמן אמת עם הגעת הבקשות. קוד המקור המלא זמין ב- GitHub .

למד עוד

בניית נתונים בזמן אמת ביישומי אינטרנט באמצעות Node.js

#node-js #mongodb