Αυτό το άρθρο εστιάζει στην κατανόηση της έννοιας των WebSockets στο Node.js για τη δημιουργία μιας πύλης για αμφίδρομη επικοινωνία σε πραγματικό χρόνο.
WebSockets
Οι υποδοχές Ιστού είναι ένας τύπος καναλιού επικοινωνίας που δημιουργεί αμφίδρομα κανάλια για πληροφορίες σε μία και μακροχρόνια επικοινωνία. Δεν είναι όπως η συνηθισμένη αμφίδρομη επικοινωνία στο διαδίκτυο, επιτρέπει τόσο στον χρήστη όσο και στον διακομιστή να στέλνουν μηνύματα όποτε θέλουν. Η τεχνική που χρησιμοποιείται είναι η χειραψία WebSocket, μια διαδικασία που δημιουργεί μια ομαλή σύνδεση μεταξύ του διακομιστή και του χρήστη, η οποία τους επιτρέπει να μοιράζονται πληροφορίες εμπρός και πίσω χωρίς κανένα πρόβλημα.
Ας δούμε μερικά από τα προνόμια του WebSockets πριν ξεκινήσουμε να δημιουργήσουμε ένα δικό μας.
Πλεονεκτήματα των WebSockets
Το WebSockets προσφέρει πολλαπλά πλεονεκτήματα σε σχέση με το παραδοσιακό HTTP:
Ταχύτερη Ταχύτητα
Όταν ο χρήστης έχει ρυθμίσει το WebSocket, η σύνδεση παραμένει ανοιχτή όλη την ώρα και δεν χρειάζεται να ξεκινήσει ή να σταματήσει τη σύνδεση, κάτι που κάνει τα πράγματα πιο γρήγορα χωρίς καθυστέρηση.
Αποτελεσματική χρήση πόρων
Τα WebSockets χρησιμοποιούν αποτελεσματικά τους πόρους των υπολογιστών. Καθώς δεν χάνεται χρόνος για την έναρξη ή τη διακοπή της σύνδεσης για κάθε αίτημα, ο υπολογιστής λειτουργεί πιο βέλτιστα.
Άμεσες ενημερώσεις
Εάν ο χρήστης φτιάχνει μια εφαρμογή που χρειάζεται να μεταφέρει άμεσα πληροφορίες σε πραγματικό χρόνο, όπως συνομιλίες, αποτελέσματα αθλημάτων κ.λπ. Τα WebSockets διασφαλίζουν ότι οι πληροφορίες ταξιδεύουν γρήγορα.
Τώρα που έχουμε καλύτερη κατανόηση του τι προσπαθούμε να δημιουργήσουμε, ας δημιουργήσουμε ένα δικό μας WebSocket στο Node.js.
Πώς να δημιουργήσετε και να χρησιμοποιήσετε ένα WebSocket στο Node.js;
Ακολουθήστε τα παρακάτω βήματα για να ρυθμίσετε με επιτυχία ένα WebSocket στη συσκευή σας:
Βήμα 1: Ρύθμιση του περιβάλλοντος ανάπτυξης
Πριν από τη δημιουργία ενός WebSocket, υπάρχουν ορισμένα προαπαιτούμενα πακέτα και λειτουργικές μονάδες που πρόκειται να εγκατασταθούν.
Εγκαταστήστε τα παρακάτω πακέτα στη συσκευή σας:
npm init -ynpm εγκατάσταση ws
Η λειτουργία αυτών των γραμμών εντολών είναι η εξής:
- ' npm init -y ” αρχικοποιεί ένα νέο έργο Node.js. Ο ' -και Η εντολή σημαίνει ναι, το οποίο μπορεί να υπαγορευτεί ως αληθές στη γλώσσα του υπολογιστή. Εξασφαλίζει επίσης ότι θα χρησιμοποιήσει όλα τα πακέτα και τις ενότητες στο json αρχείο. ο πακέτο.json Το αρχείο περιέχει όλες τις πληροφορίες σχετικά με το έργο Node.js, όπως εξαρτήσεις, λειτουργικές μονάδες και άλλες ρυθμίσεις.
- Μετά την προετοιμασία του έργου, ο χρήστης μπορεί να εκτελέσει τη δεύτερη εντολή για να εγκαταστήσει το « ws ” πακέτο. Παρέχει ένα βασικό API που δημιουργεί ένα Websocket για διακομιστές και πελάτες.
Αυτές οι δύο εντολές δημιουργούν ένα περιβάλλον ανάπτυξης για τη δημιουργία WebSocket και την επικοινωνία πληροφοριών σε πραγματικό χρόνο.
αρχείο package.json στο Node.js
Ένα αρχείο pakackge.json έχει όλες τις υποστηρικτικές λειτουργίες για το έργο Node.js.
Τα περιεχόμενα του αρχείου package.json θα είναι ως εξής:
Το κόκκινο πλαίσιο στην παραπάνω εικόνα δείχνει την έκδοση της εγκατεστημένης βιβλιοθήκης ws(WebSocket).
Αφού ρυθμίσετε το περιβάλλον ανάπτυξης, προχωρήστε στη δημιουργία ενός WebSocket.
Βήμα 2: Δημιουργία διακομιστή WebSocket
Για να δημιουργήσετε έναν διακομιστή WebSocket δημιουργήστε ένα αρχείο στον επεξεργαστή κώδικα με επέκταση .js και οποιοδήποτε επιθυμητό όνομα.
Παρακάτω είναι ο κώδικας για το αρχείο διακομιστή:
συνθ WebSocket = απαιτώ ( 'ws' ) ;συνθ http = απαιτώ ( 'http' ) ;
συνθ υπηρέτης = http. δημιουργία διακομιστή ( ) ;
συνθ wss = νέος WebSocket. Υπηρέτης ( { υπηρέτης } ) ;
wss. επί ( 'σύνδεση' , ( ws ) => {
κονσόλα. κούτσουρο ( 'Σύνδεση πελάτη' ) ;
ws. επί ( 'μήνυμα' , ( μήνυμα ) => {
κονσόλα. κούτσουρο ( `Ελαβή : $ { μήνυμα } ` ) ;
wss. πελάτες . για κάθε ( ( πελάτης ) => {
αν ( πελάτης !== ws && πελάτης. έτοιμη κατάσταση === WebSocket. ΑΝΟΙΞΕ ) {
πελάτης. στείλετε ( μήνυμα ) ;
}
} ) ;
} ) ;
ws. επί ( 'Κλείσε' , ( ) => {
κονσόλα. κούτσουρο ( 'Ο πελάτης αποσυνδέθηκε' ) ;
} ) ;
} ) ;
υπηρέτης. ακούω ( 3000 , ( ) => {
κονσόλα. κούτσουρο ( 'Ακρόαση διακομιστή σε http://localhost:3000' ) ;
} ) ;
Οι λειτουργίες που εκτελούνται από τον παραπάνω κώδικα είναι:
- ' const WebSocket = Απαιτείται('ws') ' και ' const http = απαιτείται ('http') ” εισάγει τις απαιτούμενες ενσωματωμένες μονάδες για το χειρισμό αιτημάτων HTTP.
- Ο 'const server = http.createServer()' δημιουργεί έναν βασικό διακομιστή στο Node.js.
- ' const wss = νέος WebSocket.Server({ διακομιστής }) ” δημιουργεί ένα WebSocket στον διακομιστή HTTP που δημιουργήθηκε. Για να ακούσετε τα εισερχόμενα μηνύματα του WebSocket, ρυθμίζει έναν διακομιστή υποδοχής Ιστού.
- ' on ('σύνδεση', (ws) => { … }) ' εκτελείται όταν ένας πελάτης δημιουργεί μια σύνδεση WebSocket. Μια στιγμή ' ws ” δημιουργείται που αντιπροσωπεύει τη σύνδεση.
- ' on ('μήνυμα', (μήνυμα) => { … }) ” Αυτός ο κώδικας εκτελείται όταν ένα μήνυμα (από τον συνδεδεμένο πελάτη) λαμβάνεται στον διακομιστή. Καταγράφει το ληφθέν μήνυμα και στη συνέχεια το μεταδίδει σε όλους τους συνδεδεμένους πελάτες.
- ' clients.forEach((client) => { … }) Το ” κάνει βρόχο σε όλους τους συνδεδεμένους πελάτες και στέλνει ένα μήνυμα σε κάθε πελάτη εάν η σύνδεση WebSocket είναι ανοιχτή.
- Ο ' on('close', () => { … }) Ο κώδικας εκτελείται όταν ο πελάτης αποσυνδεθεί από τη σύνδεση WebSocket και στέλνει ένα μήνυμα στον διακομιστή που υποδεικνύει ότι ο πελάτης έχει αποσυνδεθεί.
- ' ακούστε (3000, () => { … }) ' ξεκινά ο διακομιστής HTTP για ακρόαση στη θύρα 3000. Μόλις ο διακομιστής εκτελείται, υποδεικνύει ένα μήνυμα ότι ο διακομιστής ακούει τώρα στο 'http://localhost:3000/”. Users can have some other port that is listening to the connections.
Τώρα που δημιουργήθηκε το WebSocket μας, ας το δοκιμάσουμε από το τέλος του πελάτη.
Βήμα 3: Δημιουργήστε έναν πελάτη για να δοκιμάσετε το Created WebSocket
Τώρα δημιουργήστε ένα βασικό αρχείο HTML που εκτελείται στην ιστοσελίδα για να δοκιμάσετε το WebSocket. Δημιουργήστε ένα index.html αρχείο και χρησιμοποιήστε τον παρακάτω κώδικα:
< html μόλις = 'σε' >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'UTF-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1.0' >
< τίτλος > WebSocket Chat < / τίτλος >
< / κεφάλι >
< σώμα >
< εισαγωγή τύπος = 'κείμενο' ταυτότητα = 'messageInput' κράτησης θέσης = 'Πληκτρολογήστε ένα μήνυμα...' >
< κουμπί στο κλικ = 'να στείλετε μήνυμα()' > Στείλετε < / κουμπί >
< ul ταυτότητα = 'Μηνύματα συνομιλίας' >< / ul >
< γραφή >
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('Συνδέθηκε με τον διακομιστή');
});
ws.addEventListener('message', (event) => {
const chatMessages = document.getElementById('chatMessages');
const messageItem = document.createElement('li');
messageItem.textContent = event.data;
chatMessages.appendChild(messageItem);
});
συνάρτηση sendMessage() {
const messageInput = document.getElementById('messageInput');
const message = messageInput.value;
αν (μήνυμα) {
ws.send(message);
messageInput.value = '';
}
}
< / γραφή >
< / σώμα >
< / html >
Η λειτουργία του παραπάνω κώδικα έχει ως εξής:
- Η βασική μορφή κώδικα για HTML είναι γραμμένη.
- ' ” δημιουργεί ένα πλαίσιο εισαγωγής στην ιστοσελίδα HTML με το σύμβολο κράτησης θέσης που υποδεικνύει ένα μήνυμα για να πληκτρολογήσει ο χρήστης ένα μήνυμα.
- ' ” στέλνει το πληκτρολογημένο μήνυμα από τον χρήστη στον διακομιστή.
- '
- '