WebSockets, αμφίδρομη και ασύγχρονη επικοινωνία

Το ‘web browsing’ είναι γενικά μια απλή διαδικασία: οι χρήστες κάνουν κλικ στους συνδέσμους μιας σελίδας και οδηγούνται μέσω αυτών σε άλλες. Η λειτουργία αυτή, αν και βασική, δεν δίνει από μόνη της την δυνατότητα στους χρήστες να ζητήσουν ή να ενημερώσουν στοιχεία χωρίς να αλλάξουν σελίδα. Για να ξεπεραστεί αυτή η αδυναμία, αναπτύχθηκαν τεχνικές όπως το AJAX, που ουσιαστικά προσφέρουν ένα στρώμα ασύγχρονης επικοινωνίας πάνω στην ήδη υπάρχουσα τεχνολογία. Μέσω ασύγχρονων κλήσεων λοιπόν, ο browser του χρήστη μπορεί να επικοινωνήσει με το website και να λάβει μια απάντηση χωρίς να χρειαστεί να αλλάξει σελίδα.

Οι υπάρχουσες όμως τεχνικές που κάνουν χρήση Javascript (όπως το AJAX) και χρησιμοποιούνται κατά κόρον στις σημερινές υπηρεσίες, είναι ως επί το πλείστον μονόδρομες. Με λίγα λόγια ο χρήστης μπορεί να στείλει το αίτημα (request) στο website ασύγχρονα, αλλά όχι το αντίστροφο. Τεχνικές που επιτρέπουν σε ένα website να στέλνει πληροφορίες στους χρήστες έχουν υλοποιηθεί αλλά δεν μπορούν να χαρακτηριστούν ‘πραγματικού χρόνου’ καθώς οι περισσότερες βασίζονται είτε σε συνεχή ερωτήματα από τον χρήστη στο website (polling) ή στην χρήση ενδιάμεσων λύσεων όπως long polling ή streaming. Οι λύσεις αυτές, αν και έχει αποδειχτεί ότι λειτουργούν στην πράξη, στην ουσία καταναλώνουν πόρους ή δεσμεύουν bandwidth χωρίς λόγο. Ήταν καιρός λοιπόν να δημιουργηθεί ένα νέο κανάλι επικοινωνίας.

Web Sockets

Τα Web Sockets είναι ένα από τα APIs που προσφέρει η HTML5, το οποίο επιτρέπει την αμφίδρομη και ασύγχρονη επικοινωνία μεταξύ πελάτη (client) και website (server).

Μέσω της Javascript ο προγραμματιστής μπορεί να στείλει δεδομένα ασύγχρονα στον server αλλά και να λάβει από αυτόν. Από την πλευρά του πελάτη η όλη διαδικασία είναι αρκετά πιο εύκολη από τα αντίστοιχα AJAX calls που έχουν επικρατήσει τελευταία, καθώς τόσο τα events όσο και τα functions είναι απλά και κατανοητά. No magic involved!

Έτσι λοιπόν, αφού κάποιος δημιουργήσει την σύνδεση στο socket του server (στο οποίο και θα αναφερθούμε σε λίγο), μπορεί μέσω των τεσσάρων παρακάτω events να ελέγχει την συμπεριφορά της σελίδας στις αλλαγές της σύνδεσης αυτής.

onopen : Ενεργοποιείται κατά την σύνδεση στο socket, συνήθως σε αυτή την φάση ο πελάτης στέλνει ένα μήνυμα για να πληροφορήσει τον διακομιστή ότι συνδέθηκε (handshake)
onmessage: Ίσως το πιο βασικό event, το οποίο ενεργοποιείται όταν ο διακομιστής στείλει ένα μήνυμα στον πελάτη. Το event φέρει μαζί και το μήνυμα από τον διακομιστή ώστε ο πελάτης να χρησιμοποιήσει την πληροφορία κατάλληλα
onerror: Καλείται σε περίπτωση σφάλματος
onclose: Καλείται όταν κλείσει η σύνδεση με τον διακομιστή

Πέραν των events, το σχήμα που έχει προταθεί (και υλοποιηθεί) για τα Web Sockets περιλαμβάνει και δύο συναρτήσεις τις “send” και “close”, που στέλνουν δεδομένα στον διακομιστή και κλείνουν την σύνδεση αντίστοιχα.

Στην πλευρά του διακομιστή τώρα, τα πράγματα είναι λίγο πιο πολύπλοκα.

Ο διακομιστής πρέπει να δημιουργήσει ένα socket, το οποίο σε γενικές γραμμές μπορεί να χαρακτηριστεί ως ένα κανάλι επικοινωνίας μέσω του οποίου τα δεδομένα μεταφέρονται αμφίδρομα. Όταν οι πελάτες (χρήστες του website) συνδέονται μέσω των Web Sockets στον διακομιστή, ουσιαστικά θα χρησιμοποιούν αυτό το κανάλι επικοινωνίας.

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

Για να συνδεθεί ένας πελάτης στον διακομιστή χρησιμοποιεί μια μόνο γραμμή σε κώδικα Javascript:

var socketConnection = new WebSocket(“ws://serverWebSocketUrl”);

Όπου το serverWebSocketUrl είναι το URL του διακομιστή με την θύρα στην οποία “ακούει” τις συνδέσεις τύπου Web Socket. Το πρόθεμα ws:// δείχνει πως πρόκειται για μια σύνδεση σε Web Socket.

Σε περίπτωση που βρήκατε το κομμάτι του διακομιστή αρκετά περίπλοκο, η Google έχει αναπτύξει μέσω Python το mod_pywebsocket που είναι ένα extension για τον Apache server και προσφέρει υποστήριξη για το νέο αυτό API. Όσοι όμως προτιμάτε κάτι ακόμη πιο άμεσο μέσω PHP, υπάρχει και το project phpwebsockets που θα σας βοηθήσει να κάνετε τα πρώτα βήματα στον κόσμο των Web Sockets.

Με τον Chrome browser να υποστηρίζει ήδη αυτό το πρωτόκολλο και το Mozilla group να σχεδιάζει την υλοποίησή του στον Firefox 3.7, τα Web Sockets φαίνεται να ανοίγουν ένα νέο δρόμο στην επικοινωνία των web applications από εδώ και στο εξής.

Μερικά από τα demos από υλοποιήσεις των Web Sockets μπορείτε να δείτε παρακάτω. Να σημειώσω πως το δεύτερο video είναι μια δική μου προσπάθεια που όταν ολοκληρωθεί, θα την διαθέσω στο GitHub για πειραματισμό από τον οποιονδήποτε.

Quake σε HTML5 κάνοντας χρήση web sockets για επικοινωνία

Game prototype σε Javascript και HTML5 με την χρήση Web Sockets

Links για περαιτέρω μελέτη:

Στέλιος Πετράκης

Ο Στέλιος Πετράκης (stelabouras) δηλώνει φανατικός gamer και web addict. Εργάζεται ως web developer στην Phaistos Networks, ολοκληρώνει το μεταπτυχιακό του, γράφει posts στο Wiggler.gr, αναπτύσσει και συντηρεί το Slideflickr.com και στον ελεύθερό του χρόνο πειραματίζεται με οτιδήποτε έχει σχέση με web, programming, design και games.