Πώς να δημιουργήσετε ένα γράφημα σε πραγματικό χρόνο χρησιμοποιώντας JavaScript και Pusher

Ο κόσμος χρειάζεται τα πάντα πολύ γρήγορα τώρα. Υπάρχουν πολλές ροές δεδομένων που δημιουργούνται από διαφορετικά συστήματα κάθε μέρα. Χρησιμεύουν στη λήψη αποφάσεων σε πολλές βιομηχανίες. Η παρακολούθηση και η ανάλυση σε πραγματικό χρόνο έχουν γίνει πολύ σημαντικές σήμερα. Οι ροές δεδομένων περιλαμβάνουν παρακολούθηση σε πραγματικό χρόνο της κυκλοφορίας ιστότοπων, της απόδοσης του διακομιστή, των ενημερώσεων καιρού και των αισθητήρων IOT. Είναι σημαντικό να αναλύσετε και να ερμηνεύσετε αυτήν την έκρηξη δεδομένων, για τα οποία τα διαδραστικά διαγράμματα και γραφήματα είναι μια εξαιρετική λύση.

Σε αυτό το άρθρο, θα δημιουργήσουμε έναν διακομιστή Node.js για να εκθέσουμε API για την παροχή ιστορικών δεδομένων για μια μέτρηση (σε αυτήν την περίπτωση, ο καιρός στο Λονδίνο). Θα παρέχει επίσης ένα API για την απορρόφηση νέων σημείων δεδομένων. Θα κατασκευάσουμε επίσης μια εφαρμογή front-end με ένα γράφημα γραμμών για να εμφανίσουμε τις αλλαγές θερμοκρασίας στον καιρό του Λονδίνου σε πραγματικό χρόνο. Η εφαρμογή που δημιουργούμε θα μοιάζει με αυτό:

Εγγραφή στο Pusher

Το πρώτο βήμα για να ξεκινήσετε αυτό το σεμινάριο είναι να εγγραφείτε στο Pusher ή να συνδεθείτε με τα υπάρχοντα διαπιστευτήριά σας εάν έχετε ήδη λογαριασμό. Αφού συνδεθείτε, θα χρειαστεί να δημιουργήσετε μια νέα εφαρμογή και να επιλέξετε Vanilla JavaScript για το front-end μαζί με το Node.js για το back-end. Στη συνέχεια, θα μεταφερθείτε σε μια σελίδα προορισμού που περιέχει τον κωδικό «ξεκινώντας» για το front-end και το back-end, τον οποίο θα χρησιμοποιήσουμε αργότερα στο σεμινάριο.

API διακομιστή Node.js για παρακολούθηση και σύστημα Analytics

Τα βασικά API για οποιαδήποτε συστήματα ανάλυσης για οποιαδήποτε μέτρηση ή οντότητα είναι:

  1. API απορρόφησης - Ένα API για την απορρόφηση των νέων σημείων δεδομένων για κάθε συγκεκριμένη οντότητα. Στον διακομιστή μας για αυτήν την ανάρτηση ιστολογίου, θα δημιουργήσουμε ένα API για την πρόσληψη νέων δεδομένων θερμοκρασίας σε μια συγκεκριμένη ώρα για το Λονδίνο. Αυτό το API μπορεί να κληθεί από οποιοδήποτε παγκόσμιο καιρικό σύστημα ή από οποιονδήποτε αισθητήρα IOT.
  2. API ιστορικών δεδομένων - Αυτό το API θα επιστρέψει όλα τα δεδομένα εντός εύρους από αυτήν την ημερομηνία. Για τον διακομιστή μας, θα δημιουργήσουμε ένα απλό API. Θα επιστρέψει ορισμένα στατικά ιστορικά δεδομένα με περιορισμένα σημεία δεδομένων για τις τιμές θερμοκρασίας του Λονδίνου για οποιαδήποτε ημέρα.

Node.js Express Server Skeleton

Θα δημιουργήσουμε έναν βασικό διακομιστή Express μαζί με την παρουσίαση της παρουσίας διακομιστή βιβλιοθήκης Pusher. Θα δημιουργήσουμε έναν νέο φάκελο για το έργο μας και θα δημιουργήσουμε έναν νέο διακομιστή αρχείων.js . Προσθέστε τον ακόλουθο κώδικα σε αυτό το αρχείο:

API για λήψη ιστορικών δεδομένων θερμοκρασίας

Τώρα, θα προσθέσουμε κάποια στατικά δεδομένα σχετικά με τη θερμοκρασία του Λονδίνου σε συγκεκριμένες ώρες κατά τη διάρκεια μιας ημέρας και θα τα αποθηκεύσουμε σε οποιαδήποτε μεταβλητή JavaScript. Θα εκθέσουμε επίσης μια διαδρομή για την επιστροφή αυτών των δεδομένων κάθε φορά που κάποιος το καλεί χρησιμοποιώντας μια κλήση GET HTTP.

API για να απορροφήσει το σημείο δεδομένων θερμοκρασίας

Τώρα θα προσθέσουμε τον κωδικό για την έκθεση ενός API για την κατάποση της θερμοκρασίας σε μια συγκεκριμένη στιγμή. Θα εκθέσουμε ένα GET HTTP API με θερμοκρασία και χρόνο ως παράμετροι ερωτήματος. Θα επικυρώσουμε ότι δεν είναι κενές παράμετροι. Τους αποθηκεύσει πιέζοντας το datapoints σειρά από στατικές την Javascript μεταβλητή μας londonTempData . Προσθέστε τον ακόλουθο κώδικα στο αρχείο server.js

Στον παραπάνω κώδικα, εκτός από την αποθήκευση στην πηγή δεδομένων, θα ενεργοποιήσουμε επίσης ένα συμβάν «νέα-θερμοκρασία» σε ένα νέο κανάλι «london-temp-chart» . Για κάθε μοναδική πηγή δεδομένων ή ένα γράφημα, μπορείτε να δημιουργήσετε ένα νέο κανάλι.

Το συμβάν που ενεργοποιείται από τον διακομιστή μας θα υποβληθεί σε επεξεργασία από τη διεπαφή για να ενημερώσει το γράφημα / γράφημα σε πραγματικό χρόνο. Το συμβάν μπορεί να περιέχει όλα τα σημαντικά δεδομένα που χρειάζεται το γράφημα για να εμφανίσει σωστά το σημείο δεδομένων. Στην περίπτωσή μας, θα στείλουμε τη θερμοκρασία τη νέα στιγμή στο front-end μας.

Δημιουργία της εφαρμογής Front-End χρησιμοποιώντας JavaScript και Chart.js Vanilla

Τώρα, θα δημιουργήσουμε την εφαρμογή front-end. Θα εμφανίσει ένα γράφημα γραμμών που αντιπροσωπεύει τις αλλαγές στη θερμοκρασία για το London City σε διαφορετικές ώρες κατά τη διάρκεια της ημέρας. Η βασική προσέγγιση για την εμφάνιση γραφημάτων σε πραγματικό χρόνο είναι:

  1. Πρέπει να πραγματοποιήσουμε μια αρχική κλήση Ajax για τη λήψη ιστορικών δεδομένων και την απόδοση του γραφήματος με τα υπάρχοντα δεδομένα.
  2. Θα εγγραφούμε σε οποιεσδήποτε εκδηλώσεις για νέα σημεία δεδομένων που αποθηκεύονται σε ένα συγκεκριμένο κανάλι.

Βασικό πρότυπο HTML

Θα δημιουργήσουμε έναν νέο φάκελο που ονομάζεται δημόσιος στη ρίζα του έργου μας και στη συνέχεια θα δημιουργήσουμε ένα νέο αρχείο index.html σε αυτόν τον φάκελο. Αυτό το αρχείο θα περιέχει τον βασικό κώδικα HTML για να αποδώσει μια απλή κεφαλίδα και μια δευτερεύουσα κεφαλίδα με το όνομα της εφαρμογής μαζί με λίγα εικονίδια. Θα εισαγάγουμε επίσης τη βιβλιοθήκη Pusher JavaScript από τη διεύθυνση URL του CDN.

Προσθήκη βιβλιοθήκης γραφημάτων

Σε εφαρμογές JavaScript και HTML, πρέπει να χρησιμοποιήσουμε είτε SVG είτε Canvas για να δημιουργήσουμε γραφικά στοιχεία για την αναπαράσταση μαθηματικών γραφημάτων. Υπάρχουν πολλές βιβλιοθήκες ανοιχτού κώδικα που μπορούν να σας βοηθήσουν να αποδώσετε διαφορετικούς τύπους γραφημάτων. Αυτά περιλαμβάνουν γραφήματα ράβδων, γραφήματα πίτας, γραφήματα γραμμών και γραφήματα διασποράς.

Για το έργο μας, θα επιλέξουμε το Chart.js, καθώς διαθέτει αρκετά απλό API και παρέχει ισχυρά γραφήματα χρησιμοποιώντας ετικέτα Canvas HTML. Μπορείτε να επιλέξετε οποιαδήποτε βιβλιοθήκη χαρτών, αλλά λάβετε υπόψη ότι η βιβλιοθήκη θα πρέπει να διαθέτει μέσα για την ενημέρωση του γραφήματος χωρίς να το αποδώσει ξανά. Το Chart.js παρέχει μια μέθοδο σε οποιοδήποτε στιγμιαίο γράφημα για την ενημέρωσή του.

Προσθέστε τον ακόλουθο κώδικα στο αρχείο index.html στα κατάλληλα μέρη

Προσθήκη αρχείου JavaScript και βιβλιοθήκη Instantiating Pusher

Τώρα θα δημιουργήσουμε ένα νέο αρχείο app.js στον δημόσιο φάκελό μας και θα προσθέσουμε επίσης τον ακόλουθο κώδικα για να δημιουργήσουμε τη βιβλιοθήκη του πελάτη Pusher.

Στον παραπάνω κώδικα, έχουμε προσθέσει επίσης λίγες μεθόδους χρησιμότητας για να πραγματοποιήσετε μια κλήση Ajax και επίσης να εμφανίσετε ή να αποκρύψετε στοιχεία από το API DOM.

Προσθήκη κώδικα για ανάκτηση ιστορικών δεδομένων

Τώρα, θα προσθέσουμε τον κώδικα για τη λήψη των ιστορικών δεδομένων θερμοκρασίας για την εμφάνιση του γραφήματος με τις αρχικές τιμές. Θα δημιουργήσουμε επίσης ένα νέο αντικείμενο γραφήματος με μια συγκεκριμένη διαμόρφωση για την απόδοση ενός γραφήματος γραμμών. Μπορείτε να διαβάσετε περισσότερα σχετικά με τον τρόπο κατασκευής αυτών των ρυθμίσεων στην τεκμηρίωση του Chart.js.

Προσθέστε τον ακόλουθο κώδικα στο αρχείο app.js:

Στον παραπάνω κώδικα, έχουμε προσθέσει μια συνάρτηση που ονομάζεται renderWeatherChart. Αυτό θα χρησιμοποιηθεί για την απόδοση του γραφήματος χρησιμοποιώντας τα πιο πρόσφατα δεδομένα που είναι ενσωματωμένα στη μεταβλητή chartConfig κάτω από τα βασικά σύνολα δεδομένων . Εάν θέλουμε να σχεδιάσουμε πολλά γραφήματα γραμμών στον ίδιο καμβά, μπορούμε να προσθέσουμε περισσότερα στοιχεία σε αυτόν τον πίνακα.

Το κλειδί δεδομένων σε κάθε ένα από τα στοιχεία του πίνακα θα εμφανίσει τα διαφορετικά σημεία στο γράφημα. Θα κάνουμε ένα αίτημα ajax στο / getTemperature api για να πάρουμε όλα τα σημεία δεδομένων και να τα βάλουμε σε αυτό το κλειδί. Θα καλέσουμε τη μέθοδο απόδοσης για να εμφανιστεί το γράφημα τότε. Τώρα μπορούμε να εκτελέσουμε την εντολή node server.jsκαι μετά να μεταβούμε στο πρόγραμμα περιήγησης με την ακόλουθη διεύθυνση URL για να δούμε το αρχικό γράφημα που αποδίδεται χρησιμοποιώντας τα δεδομένα.

//localhost:9000/

Για να διαμορφώσετε σωστά την εφαρμογή μας, προσθέστε το ακόλουθο CSS σε ένα νέο αρχείο style.css μέσα στον δημόσιο φάκελο. Προσθέστε τον ακόλουθο κώδικα σε αυτό το αρχείο:

Κωδικός για ενημέρωση γραφήματος σε νέο συμβάν που ελήφθη

Τώρα θέλουμε να εγγραφούμε στο μοναδικό κανάλι στο οποίο ο διακομιστής μας θα στέλνει συμβάντα ενημέρωσης για αυτό το γράφημα. Για το έργο μας, το κανάλι ονομάζεται london-temp-chart και η εκδήλωση ονομάζεται νέα θερμοκρασία . Προσθέστε τον ακόλουθο κώδικα για να επεξεργαστείτε το συμβάν και, στη συνέχεια, ενημερώστε το γράφημα σε πραγματικό χρόνο:

Για να δείτε αυτόν τον κώδικα σε δράση, πρέπει να ανανεώσετε το πρόγραμμα περιήγησης και θα δείτε το αρχικό γράφημα. Τώρα πρέπει να απορροφήσουμε ένα νέο σημείο δεδομένων. Θα χρειαστεί να καλέσετε το ακόλουθο API είτε χρησιμοποιώντας κάποιο ψεύτικο εργαλείο κλήσεων API είτε χρησιμοποιώντας την ακόλουθη διεύθυνση URL με διαφορετικές τιμές στο πρόγραμμα περιήγησης.

//localhost:9000/addTemperature?temperature=17&time=1500

Για να δοκιμάσετε τον κώδικα ενημέρωσης γραφήματος, μπορείτε να χρησιμοποιήσετε τον ακόλουθο προσωρινό κώδικα στο αρχείο app.js. Θα υποβάλει πλαστά αιτήματα Ajax στην παραπάνω διεύθυνση URL μετά από ένα συγκεκριμένο χρονικό διάστημα.

Εδώ είναι το GitHub repo για αναφορά στον πλήρη κώδικα.

συμπέρασμα

Τέλος, η εφαρμογή ανάλυσης σε πραγματικό χρόνο είναι έτοιμη. Θα δούμε το διάγραμμα θερμοκρασίας καιρού για την πόλη του Λονδίνου να ενημερώνεται σε πραγματικό χρόνο.

Μπορούμε να χρησιμοποιήσουμε τον κωδικό από αυτήν την ανάρτηση ιστολογίου για οποιαδήποτε βιβλιοθήκη γραφημάτων. Μπορεί επίσης να καταστήσει οποιοδήποτε τύπο γραφήματος όπως το γράφημα ράβδων, το διάγραμμα διασποράς ή το γράφημα πίτας για ενημέρωση σε πραγματικό χρόνο.

Αυτός ο κωδικός μπορεί επίσης να χρησιμοποιηθεί σε πολλές εφαρμογές για επιχειρήσεις. Για παράδειγμα, παρακολούθηση πινάκων ελέγχου, αναφορές αναλυτικών στοιχείων, εφαρμογές ρυθμίσεων αισθητήρων και οικονομικές εφαρμογές. Η βιβλιοθήκη Pusher μας βοηθά να στέλνουμε συμβάντα σε πραγματικό χρόνο σε όλες τις συνδεδεμένες εφαρμογές από τον πελάτη. Αυτές οι εφαρμογές μπορούν να καταναλώσουν τα δεδομένα για να ενημερώσουν τα γραφήματα σε πραγματικό χρόνο.

Αυτό το άρθρο δημοσιεύτηκε αρχικά στο blog του Pusher.