κατασκευη ιστοσελιδων

We Blog

Δημιουργώντας ένα Online Chat!

Τετάρτη, 03/06/2015 @ 3:29 by INTERNETi

Η περιέργειά μας να δοκιμάσουμε να φτιάξουμε ένα δικό μας Online Chat σε περιβάλλον browser αποδείχτηκε τελικά μια αρκετά δύσκολη πρόκληση.

Σε αντίθεση με την κατασκευή ενός Online Video Chat μέσω του PeerJS, αυτή τη φορά δε βασιστήκαμε σε κανένα γνωστό πρωτόκολλο αποφασίζοντας να κατασκευάσουμε το chat μας από το μηδέν.

Κάναμε χρήση σχεδόν όλων των γνωστών τεχνολογιών περιλαμβάνοντας HTML, CSS, JQuery, AJAX, PHP και MySQL.

Η λογική του να κάνουμε χρήση βάσης δεδομένων για να αποθηκεύουμε την συζήτηση μεταξύ των χρηστών φάνηκε αρκετά χρήσιμη όταν ξεκινήσαμε την υλοποίηση του chat για δυο βασικούς λόγους: Αποθήκευση συνομιλιών για προβολή ιστορικού σε μελλοντικό χρόνο και αυξημένη ασφάλεια μέσω server side scripting που μπορούσε να μας προσφέρει ο συνδυασμός της PHP με τη MySQL. Η αλήθεια είναι ότι πρωτόκολλα όπως το PeerJS για πραγματικό P2P online chat δεν υπήρχαν έναμιση χρόνο πριν όπου και ξεκινήσαμε τις δοκιμές μας.

Ένα από τα πλεονεκτήματα του εν λόγω chat όμως είναι ότι δεν περιλαμβάνει αυστηρά P2P συνομιλίες, δίνοντας έτσι τη δυνατότητα συνομιλιών πολλαπλών χρηστών ταυτόχρονα.

Η χρήση της τεχνολογίας AJAX ήταν επιβεβλημένη για την ομαλή λειτουργία του chat μιας και μας έδινε τη δυνατότητα να ανανεώνουμε το περιεχόμενο του chat room όταν υπήρχαν νέες εγγραφές. Αποφύγαμε τη συνεχόμενη ανανέωση του room κάθε x δευτερόλεπτα με σκοπό να λιγοστέψουμε τα άσκοπα http requests όσο μπορούμε. Αντιθέτως, αποθηκεύσαμε το id της τελευταίας εγγραφής στη βάση και κάθε μισό δευτερόλεπτο ελέγχαμε αν υπάρχει κάποιο μεγαλύτερο. Αν ίσχυε κάτι τέτοιο, ανανεώναμε το περιεχόμενο του room.

Η μεγαλύτερη πρόκληση ήταν η επίτευξη σωστών χρονισμών για ομαλή λειτουργία εν ώρα συζήτησης.

Άλλες λεπτομέρειες που έπρεπε να προσέξουμε περιελάμβαναν το αυτόματο auto scroll του room ώστε να φαίνονται οι τελευταίες εγγραφές από κάτω προς τα πάνω, το auto focus στο text box μετά από κάθε submit νέου μηνύματος, καθώς και τα απαραίτητα emoticons που έκαναν το room λίγο πιο διασκεδαστικό!

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

Για να δείτε την εφαρμογή μπορείτε να επισκεφτείτε το:

http://www.interneti.gr/chat/

<Ελληνικά/> <English/>