Επιστροφή στο blog

Εξέλιξη του Web: από το CGI στα Websockets (και πώς θα σας βοηθήσει να παρακολουθείτε καλύτερα την υποδομή cloud σας)

Εξέλιξη του Web: από το CGI στα Websockets (και πώς θα σας βοηθήσει να παρακολουθείτε καλύτερα την υποδομή cloud σας)

Τα τελευταία χρόνια, websockets έχουν γίνει λίγο-πολύ ένα τυπικό στοιχείο σε όλες τις σύγχρονες εφαρμογές ιστού, αλλά γιατί συμβαίνει αυτό και πώς φτάσαμε εδώ; Το πιο σημαντικό, πώς μπορούν τα websockets να σας βοηθήσουν να παρακολουθείτε την υποδομή cloud σας πιο αποτελεσματικά;

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

Ο παλιός τρόπος λειτουργίας

Στις απαρχές του ιστού, όλα ήταν στατικά. Εάν έπρεπε να αλληλεπιδράσετε με έναν διακομιστή (πέρα από την απόδοση μιας στατικής σελίδας), θα έπρεπε να εκτελέσετε κάποιου είδους CGI-script. Ένα τυπικό παράδειγμα αυτού ήταν κάτι σαν την εγγραφή σε μια λίστα αλληλογραφίας. Εισάγετε τη διεύθυνση email σας και πατάτε ‘submit’, και στη συνέχεια βλέπετε μια ξεχωριστή σελίδα που επεξεργαζόταν τα δεδομένα. Αυτό με τη σειρά του ήταν ένα σενάριο που έπαιρνε την είσοδο και την επεξεργαζόταν στον διακομιστή.

PHP Logo
Μέχρι τη δεκαετία του ’90, το server-side scripting είχε εξελιχθεί σημαντικά. Η τεχνολογία είχε εξελιχθεί από την εκτέλεση απλών εργασιών στη δημιουργία πλήρως δυναμικών σελίδων. Γλώσσες προγραμματισμού όπως PHP, και πιο προηγμένες τεχνολογίες server-side, όπως mod_perl, επέτρεψαν πολύ πιο εξελιγμένο προγραμματισμό ιστού. Αν και αυτές οι τεχνολογίες ήταν σημαντικές, εξακολουθούσαν να περιστρέφονται γύρω από την ιδέα της δημιουργίας σελίδας κατά τη φόρτωση. Μόλις φορτωνόταν, έπρεπε να επαναφορτωθεί ολόκληρη η σελίδα για να ανανεωθεί το περιεχόμενο.

Καθώς ο ιστός εξελισσόταν, εισήλθαμε στην AJAX/Web 2.0-εποχή των ’00s, οι ιστοσελίδες έγιναν πολύ πιο δυναμικές και αποκρινόμενες. Δεν χρειαζόταν πλέον να επαναφορτώσετε τη σελίδα για να ενημερώσετε το περιεχόμενο στην οθόνη. Το μόνο που χρειαζόταν να κάνετε ήταν να ενεργοποιήσετε κάποιες ενέργειες JavaScript. Πολλές σελίδες AJAX εξακολουθούσαν να υποστηρίζονται από PHP, αλλά με την εισαγωγή της client-side JavaScript, μπορούσαν να γίνουν πιο δυναμικές.

Εισαγωγή του AJAX

Με την εισαγωγή του AJAX, έγινε όλο και πιο σημαντική η συνεχής επικοινωνία μεταξύ του διακομιστή και του πελάτη. Ξαφνικά, θα μπορούσατε να έχετε σημαντικό αριθμό κλήσεων API που δημιουργούνται από έναν μεμονωμένο χρήστη σε μια δεδομένη σελίδα. Αυτό το κάνουμε με τη μέθοδο ‘pull’, που σημαίνει ότι ο πελάτης ζητούσε ενημερώσεις από τον διακομιστή σε ένα δεδομένο χρονικό διάστημα (ή με βάση κάποια ενέργεια).

Καθώς μπαίναμε στη δεκαετία των ’10s, ήταν σύνηθες οι ιστοσελίδες να είναι εντελώς διαχωρισμένες μεταξύ του front-end (HTML/JavaScript/CSS) και του back-end (Ruby on Rails, Django κ.λπ.), το οποίο συχνά φιλοξενούνταν σε διαφορετικούς διακομιστές. Ο τρόπος με τον οποίο το front-end επικοινωνούσε με το back-end ήταν μέσω ενός API. Το front-end ήταν λίγο-πολύ στατικό. Με αυτήν την τάση, η πραγματοποίηση κλήσεων API προς τον διακομιστή έγινε ένα σημαντικό σημείο συμφόρησης. Εάν έπρεπε να ανακτήσετε δέκα διαφορετικά πράγματα από τον διακομιστή, αυτό σήμαινε συχνά ότι έπρεπε να κάνετε δέκα διαφορετικές κλήσεις API, με κάθε κλήση να συνεπάγεται σημαντική επιβάρυνση και καθυστέρηση.

Ο σύγχρονος τρόπος

HTML5 LogoΓια την αντιμετώπιση αυτού του προβλήματος της καθυστέρησης και της επιβάρυνσης, τα websockets εισήχθησαν ως μέρος της HTML5 και εφαρμόστηκαν σε όλα τα σύγχρονα προγράμματα περιήγησης. Σε αντίθεση με την παραδοσιακή προσέγγιση ‘pull’ (δηλαδή ο πελάτης να ζητά από τον διακομιστή αλλαγές), ένα websocket είναι, όπως υποδηλώνει το όνομα, μια υποδοχή (socket), όπου ο διακομιστής μπορεί να ‘σπρώξει’ (push) αλλαγές στον πελάτη. Επομένως, εάν δεν υπάρχουν αλλαγές, δεν υπάρχει ανάγκη για επικοινωνία. Επίσης, δεδομένου ότι ο πελάτης μπορεί να επικοινωνεί απευθείας με τον διακομιστή χωρίς την πρόσθετη επιβάρυνση του ανοίγματος και του κλεισίματος συνδέσεων, η εφαρμογή γίνεται πολύ πιο αποκρινόμενη.

Ακριβώς έτσι είναι κατασκευασμένη και η δική μας web application είναι κατασκευασμένη. Η πραγματική εφαρμογή είναι μια στατική σελίδα που ανοίγει μια σύνδεση websocket με το API. Μόλις ανοίξει αυτή η υποδοχή, η εφαρμογή ιστού μπορεί να λαμβάνει ειδοποιήσεις από τον διακομιστή με αλλαγές. Εξακολουθούμε να αποστέλλουμε εντολές στο RESTful API, αλλά προωθούμε ειδοποιήσεις από τον διακομιστή στον πελάτη χρησιμοποιώντας το websocket.

Όχι μόνο για ιστοσελίδες

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

Στη βιβλιοθήκη μας Python, pycloudsigma, έχουμε ενσωματωμένη υποστήριξη για websockets. Έχουμε μάλιστα ένα απλό παράδειγμα για το πώς μπορείτε να το χρησιμοποιήσετε αυτό για να παρακολουθείτε τις δραστηριότητες websocket με λίγες μόνο γραμμές κώδικα. Να’ μια γρήγορη παρουσίαση του monitor_websocket_activity.py που παρακολουθεί τις ενέργειες που ενεργοποιούνται από την εισαγωγή δεδομένων του χρήστη στην εφαρμογή ιστού.
Για περισσότερες πληροφορίες σχετικά με τις υπηρεσίες μας, δείτε τις Δυνατότητες.

author

Viktor Petersson

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.

Σχόλια

Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.