Πώς να δημιουργήσετε συνδέσεις WebSocket στο Node.js;

Pos Na Demiourgesete Syndeseis Websocket Sto Node Js



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

Αυτό το άρθρο παρουσιάζει τη διαδικασία δημιουργίας συνδέσεων webSocket στο Node.js.

Πώς να δημιουργήσετε συνδέσεις WebSocket στο Node.js;

Η σύνδεση WebSocket αποτελείται από δύο μέρη: ανάπτυξη από την πλευρά του πελάτη και διακομιστή. Ο εικονικός ιστότοπος πρέπει επίσης να δημιουργηθεί που λειτουργεί ως το μέσο μεταξύ των δύο πλευρών. Με τη χρήση του, τα μηνύματα μεταφέρονται και από τις δύο πλευρές. Επισκεφθείτε τα παρακάτω βήματα για τη δημιουργία του WebSocket στο NodeJs.







Βήμα 1: Ρύθμιση του περιβάλλοντος NodeJs

Με τη βοήθεια του « CD ' εντολή, περάστε μέσα από το φάκελο του έργου και μέσα σε αυτόν εκτελέστε την εντολή ' npm init -y ” για να εγκαταστήσετε τις προεπιλεγμένες λειτουργικές μονάδες NodeJs:



npm init - και

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







Βήμα 2: Εγκατάσταση της μονάδας WebSocket

Για να χρησιμοποιήσετε το πρωτόκολλο WebSocket, η ενότητα με το όνομα ' ws ” πρέπει να εγκατασταθεί στο έργο NodeJs. Η εντολή για εγκατάσταση εισάγεται παρακάτω:



npm εγκατάσταση ws

Η παρακάτω έξοδος δείχνει ' ws ” έχει εγκατασταθεί στον επιθυμητό κατάλογο NodeJs:

Βήμα 3: Ρύθμιση διακομιστή WebSocket

Για να ρυθμίσετε την πλευρά διακομιστή του πρωτοκόλλου webSocket, δημιουργήστε ένα νέο ' .js ' πληκτρολογήστε αρχείο μέσα στο φάκελο του έργου με το όνομα ' πλευρά του διακομιστή ” και εισάγετε τον παρακάτω κωδικό:

συνθ wsObj = απαιτώ ( 'ws' ) ;

συνθ ws = νέος wsObj. Υπηρέτης ( { Λιμάνι : 3000 } ) ;

κονσόλα. κούτσουρο ( 'Ο διακομιστής Linux έχει ξεκινήσει' ) ;

Η εξήγηση για τον παραπάνω κώδικα είναι η εξής:

  • Πρώτον, με τη βοήθεια του « απαιτώ() 'μέθοδος, η ' ws Η ενότητα που είναι ήδη εγκατεστημένη στην παραπάνω ενότητα εισάγεται στο τρέχον serverSide.js ' αρχείο.
  • Στη συνέχεια, επικαλέστε το ' Υπηρέτης() μέθοδος ' χρησιμοποιώντας το αντικείμενο του ' ws 'μονάδα με όνομα' wsObj ' και περάστε τον αριθμό θύρας του ' 3000 ” για να ξεκινήσει ο διακομιστής στην καθορισμένη θύρα του Localhost.
  • Επίσης, εμφανίστε κάποιο τυχαίο μήνυμα στο παράθυρο της κονσόλας για να επιβεβαιώσετε ότι ο διακομιστής ξεκίνησε από το τέλος του διακομιστή.

Βήμα 4: Ρύθμιση του προγράμματος-πελάτη WebSocket

Δημιουργήστε ένα άλλο αρχείο με το όνομα ' πελάτης ” για να ρυθμίσετε την πλευρά του πελάτη που συνδέεται με τον διακομιστή. Εισαγάγετε τον παρακάτω κώδικα για να ρυθμίσετε τη βασική πλευρά του πελάτη που εμφανίζει ένα τυχαίο μήνυμα όταν συνδέεται μέσω του διακομιστή:

συνθ αντικ = νέος WebSocket ( 'ws://localhost:3000' ) ;

αντικ. addEventListener ( 'Άνοιξε' , ( ) => {

κονσόλα. κούτσουρο ( 'Είστε συνδεδεμένοι στον διακομιστή Linuxhint!' ) ;

} ) ;

Η περιγραφή για το παραπάνω μπλοκ κώδικα:

  • Πρώτα, δημιουργήστε ένα νέο αντικείμενο για το ' WebSocket() ' πρωτόκολλο που ακούγεται στο Localhost με αριθμό θύρας ' 3000 '.
  • Στη συνέχεια, αποθηκεύστε το νέο αντικείμενο στη μεταβλητή με το όνομα ' αντικ '.
  • Μετά από αυτό, επισυνάψτε τον ακροατή συμβάντος του ' Άνοιξε ' με αυτό ' αντικ '. Αυτό το πρόγραμμα ακρόασης συμβάντων θα εκτελέσει μια ανώνυμη λειτουργία όταν ο διακομιστής φορτωθεί στο Localhost με τον παρεχόμενο αριθμό θύρας.
  • Η λειτουργία εμφανίζει ένα τυχαίο μήνυμα που σχετίζεται με τη σύνδεση πάνω από την κονσόλα.

Βήμα 5: Δημιουργία Ιστοσελίδας

Μέσα στον κατάλογο του έργου, δημιουργήστε ένα ' .html ' πληκτρολογήστε αρχείο με το όνομα ' δείκτης ' που περιέχει τη βασική δομή του HTML μαζί με την ενιαία ετικέτα σεναρίου για την εισαγωγή του ' clientSide.js ' αρχείο:

DOCTYPE html >

< μόνο html = 'σε' >

< κεφάλι >

< μετασύνολο χαρακτήρων = 'UTF-8' >

< τίτλος > Πελάτης τίτλος >

κεφάλι >

< σώμα >

< h1 > Ιστοσελίδα Linuxhint h1 >

σώμα >

< script src = 'clientSide.js' γραφή >

html >

Βήμα 6: Εκτέλεση

Ανοιξε το ' index.html ' πάνω από την ιστοσελίδα απευθείας από τον κατάλογο. Στη συνέχεια, μεταβείτε στο τερματικό ή στη γραμμή εντολών και εκτελέστε την παρακάτω εντολή:

Κόμβος διακομιστής

Το μήνυμα εξόδου δείχνει ότι ο διακομιστής έχει ξεκινήσει.

Τώρα χωρίς να κλείσετε τον διακομιστή, μεταβείτε στο index.html και ανοίξτε το μέσω του προγράμματος περιήγησης ιστού. Εκεί θα εμφανιστεί το μήνυμα επιτυχίας σύνδεσης στο παράθυρο της κονσόλας:

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

συμπέρασμα

Για να δημιουργήσετε μια σύνδεση webSocket στο NodeJs, δημιουργήστε ένα νέο έργο NodeJs και εγκαταστήστε το ' ws ' ενότητα εκτελώντας το ' npm εγκατάσταση ws ' εντολή. Τώρα, δημιουργήστε ένα αρχείο για την πλευρά του διακομιστή και εισάγετε μέσα σε αυτό το ' ws ενότητα. Χρησιμοποιήστε αυτήν την ενότητα για να δημιουργήσετε έναν διακομιστή WebSocket στη θύρα ' 3000 '. Δημιουργήστε ένα άλλο αρχείο για την πλευρά του πελάτη στο οποίο πρέπει να ορίσετε ένα νέο αντικείμενο για ' WebSocket 'με όνομα' αντικ 'και να το ακούσει στο λιμάνι' 3000 '. Αυτό το ιστολόγιο επεξηγεί τη διαδικασία για τη δημιουργία μιας σύνδεσης WebSocket στο NodeJs.