ECHTZEIT-CHAT-APP MIT NODE.JS, EXPRESS.JS UND SOCKET.IO

In diesem Tutorial lernen wir, wie man eine einfache Echtzeit-Chat-Anwendung mit Node, Express und . erstellt Socket.io . Unsere Chat-App unterstützt benutzerdefinierte Benutzernamen, Beitreten und Verlassen von Nachrichten und natürlich die Nachrichten selbst, alles in Echtzeit. Hier ein Blick auf die fertige App:

Socket.io läuft auf unserer Express-betriebenen Node-App.

ist stmx-coin eine gute investition

Vollständiger Chat einschließlich Beitritt und Verlassen.

Stellen Sie vor dem Eintauchen sicher, dass Sie die Voraussetzungen für dieses Tutorial erfüllen:

Voraussetzungen

Grundlegende JavaScript-Kenntnisse sind erforderlich. Wenn Sie eine Auffrischung benötigen, besuchen Sie unsere Klasse zu JavaScript .Vertraut sein mit HTML und CSS hilft, wird aber nicht benötigt, da beide ohne Änderungen bereitgestellt werden.

Installieren von Node und NPM

Um das npm-Modul zu installieren, das wir für unseren Bot benötigen, benötigen wir zuerst Node.js , zu JavaScript Laufzeit.

Grundlegende JavaScript-Kenntnisse sind erforderlich. Wenn Sie eine Auffrischung benötigen, besuchen Sie unsere Klasse zu JavaScript .Vertraut sein mit HTML und CSS hilft, wird aber nicht benötigt, da beide ohne Änderungen bereitgestellt werden.

Das Node.js-Installationsprogramm.

Das Node.js-Installationsprogramm sollte auch installiert sein NPM für dich. Um zu bestätigen, dass Sie beide richtig installiert haben, müssen Sie öffnen Windows-Eingabeaufforderung wenn Sie Windows verwenden, oder Terminal wenn Sie einen Mac oder Linux verwenden.

So überprüfen Sie, ob Sie Node installiert haben:

node -v

So überprüfen Sie, ob Sie NPM installiert haben:

npm -v

Wenn beide Befehle a . zurückgeben Versionsnummer , du kannst loslegen.

Express einrichten

Erstellen Sie an einer beliebigen Stelle einen Ordner, der als Stammverzeichnis für Ihre App dienen soll. Navigieren Sie zu diesem Ordner und initialisieren Sie ein neues Projekt, indem Sie es ausführen

npm init

Fühlen Sie sich frei, die gewünschten Informationen einzugeben. Nachdem die Ausführung abgeschlossen ist, erhalten Sie eine Datei namens |_+_|. |_+_| . installieren indem Sie diesen Befehl ausführen:

package.json

Lassen Sie uns nun eine Datei für Node erstellen, die als unser Server ausgeführt wird. Erstellen Sie eine Datei namens |_+_| und füge das ein:

express

Mit diesen wenigen Codezeilen machen wir eine ganze Reihe von Dingen. Wir verwenden Express, um ein statisches |_+_| . bereitzustellen Datei an den Browser, wenn er eine GET-Anforderung an der Wurzel erkennt (|_+_|) und dann unseren Server anweist, auf den von uns definierten Port zu hören. Sie können den Server sofort ausführen, indem Sie entweder |_+_| oder |_+_|, da wir jedoch noch nicht mit |_+_| begonnen haben, wird nichts passieren.

Wie der Server aussieht, wenn Sie ihn ausführen.

Erstellen von index.html

Lass uns |_+_| . erstellen als Datei dienen, die wir vom Server erhalten. Platzieren Sie dieses Markup darin:

npm install -save express

Dies ist eine grundlegende Datei, die das Markup für unsere Chatbox und unser Eingabeformular einrichtet. Der Einfachheit halber werden wir sowohl unsere Stile als auch den JavaScript-Code in diese Datei einbinden. Sie können sie jedoch jederzeit in separaten Dateien ablegen.

Hier sind alle Stile, die Sie benötigen:

index.js

Und hier ist der Anfang des JavaScripts:

 const app = require('express')(); const http = require('http').Server(app); const port = process.env.PORT || 3000; app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html'); }); http.listen(port, function() { console.log('Listening on *:' + port); });

Der Code hier ist wirklich einfach. Die ersten drei Zuweisungen sind nur das Abfragen der Seite nach dem Formular, der Eingabeschaltfläche und unserer Nachrichtenliste. Die vierte ist die Eingabeaufforderung, die Sie fragt, welchen Benutzernamen Sie verwenden möchten. Danach hängen wir einen Listener an, um das Absenden des Formulars zu verhindern, fügen die gesendete Nachricht hinzu, indem wir die |_+_| . aufrufen Funktion, dann setzen wir den Wert der Eingabe zurück, damit wir ihn für die nächste Nachricht verwenden können.

Die |_+_| Funktion nimmt einen String als Parameter und verwendet ihn, um den Inhalt eines brandneuen |_+_| Element. Dieses neue Element wird dann an das |_+_| . angehängt aufführen. Schließlich scrollen wir zum unteren Rand des Hauptteils, damit neue Nachrichten immer im Blickfeld sind.

Die gesamte Datei sollte ungefähr so aussehen:

index.html

Wenn Sie nun zu |_+_| gehen würden, sollte Ihr laufender Server Ihnen diese Datei nun bereitstellen. Beim Laden der Seite sollten Sie aufgefordert werden, Ihren gewünschten Benutzernamen einzugeben. Danach sollten Sie die Beitrittsnachricht mit Ihrem gewünschten Benutzernamen sehen.

Wählen Sie Ihren Benutzernamen.

Chat betreten.

E-Hentai-App

Senden einer Nachricht.

Wenn Sie dies sehen, haben Sie bisher alles richtig gemacht!

Einrichten Socket.io auf dem Server

Wie bereits erwähnt, verwenden wir Socket.io für die Echtzeitkommunikation zwischen Server und Client. Die Bibliothek ist ein Wrapper um die WebSockets-API, der all dies ermöglicht. Sie könnten direkt mit WebSockets arbeiten, aber Socket.io macht hinter den Kulissen viel Arbeit für uns, um sicherzustellen, dass unsere Arbeit mit Sockets so schmerzfrei wie möglich ist.

Beginnen wir mit der tatsächlichen Verwendung Socket.io . Installieren Sie es, indem Sie diesen Befehl ausführen:

/

Öffne dein |_+_| und füge das oben hinzu:

npm run start

Diese Zeile ermöglicht es uns, mit der Verwendung zu beginnen Socket.io auf dem Server. Lassen Sie uns direkt in den gesamten Code eintauchen, den wir für diese App benötigen. Fügen Sie dies zu Ihrem |_+_| hinzu:

node index.js

Was dieser Code macht, ist das Anhängen von Listenern an jedes Ereignis, das wir an jedem eingehenden Socket haben möchten, der erfolgreich verbunden wurde. Mit anderen Worten, wenn eine Socket-Verbindung hergestellt wird, sind dies die Ereignisse, auf die wir lauschen möchten.

In unserem Fall sind die Ereignisse, die wir haben, |_+_| die den Benutzernamen auf dem Socket für die spätere Verwendung festlegt und diese Daten dann zurücksendet, um andere darauf hinzuweisen, dass jemand beigetreten ist, |_+_| die den Benutzernamen anhängt und dann an alle anderen sendet, dass eine neue Nachricht gesendet wurde, und |_+_| die auch allen anderen mitteilt, dass jemand den Chat verlassen hat.

Ob Sie es glauben oder nicht, aber das ist der gesamte Code, den wir auf dem Server benötigen, damit unsere Chat-App funktioniert. Jetzt können wir auf den Client umziehen!

Einrichten Socket.io auf dem Client

Um mit der Verwendung zu beginnen Socket.io auf dem Client müssen wir es importieren. Der Einfachheit halber verwenden wir dafür ein CDN. Fügen Sie dieses Skript-Tag zu Ihrem |_+_| hinzu:

index.html

Jetzt können Sie es wie folgt verwenden:

index.html

Nachdem wir nun die Möglichkeit haben, Nachrichten an und von dem Server zu senden und zu empfangen, lassen Sie uns diese neuen Befugnisse in unsere App integrieren. Ihr Formular-Listener sollte jetzt dem Server mitteilen, wenn Sie eine Nachricht gesendet haben. Da der Server den Benutzernamen bereits kennt, müssen wir nur die eigentliche Nachricht senden, was wir so machen:

 Real-time Chat App 
 Send

Ihr neuer Formular-Listener sollte nun so aussehen:

Python-zu-Java-Übersetzer

body { margin: 0; font-family: sans-serif; } form { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; box-sizing: border-box; padding: 0.25rem; } form input { border: 0; padding: 0.5rem; width: 100%; outline: 0; margin-right: 0.5rem; border-radius: 0.25rem; background: #ccc; } form button { width: 6rem; background-color: #1b8c00; color: white; border: none; padding: 0.5rem; cursor: pointer; border-radius: 0.25rem; text-transform: uppercase; } form button:hover { background-color: #166d01; } .messages { margin: 0; padding: 0; margin-bottom: 3rem; } .messages li { padding: 0.5rem; } .messages li:nth-child(odd) { background: #eee; }

Fügen wir nun unsere clientseitigen Listener für Ereignisse hinzu, die vom Server kommen. Dies sind wiederum |_+_| und |_+_|:

const form = document.querySelector('form'); const input = document.querySelector('.input'); const messages = document.querySelector('.messages'); const username = prompt('Please enter a username: ', ''); form.addEventListener('submit', function(event) { event.preventDefault(); addMessage(username + ': ' + input.value); input.value = ''; return false; }, false); addMessage('You have joined the chat as '' + username + ''.'); function addMessage(message) { const li = document.createElement('li'); li.innerHTML = message; messages.appendChild(li); window.scrollTo(0, document.body.scrollHeight); }

In allen drei Fällen müssen wir lediglich eine neue Nachricht mit den entsprechenden Informationen hinzufügen. Dies bedeutet, dass eine neue Nachricht hinzugefügt wird, wenn ein |_+_| Ereignis empfangen wird, und dann dasselbe, wenn jemand dem Chat beitritt oder ihn verlässt.

Wenn wir die Seite schließlich laden, müssen wir dem Server und damit anderen mitteilen, dass wir beigetreten sind. Wir tun dies, indem wir ein |_+_| . aussenden Nachricht mit dem von uns selbst gewählten Benutzernamen:

addMessage

Fügen Sie dies alles zusammen, und Ihr fertiges clientseitiges JavaScript sollte ungefähr so aussehen:

addMessage

Abschluss

Füge alles zu deinem Finale zusammen |_+_| sollte so aussehen:

li

Und dein letztes |_+_| so was:

wie man Feg-Token auf Coinbase Wallet kauft

messages

Stellen Sie sicher, dass Sie Ihren Server neu starten, um Ihren neuen Code zu verwenden. Sobald Sie dies getan haben, sollten Sie in der Lage sein, mehrere Registerkarten in Ihrem Browser zu öffnen, jeder Registerkarte einen eindeutigen Namen zu geben, in Echtzeit mit allen zu chatten, zu verlassen und beizutreten und die Nachrichten auf den anderen Clients zu sehen, genau wie Sie es erwarten würden .

Socket.io läuft auf unserer Express-betriebenen Node-App.

Vollständiger Chat einschließlich Beitritt und Verlassen.

Weiterlesen:

☞ Beispiel für Node js Express-Upload von Datei/Bild

☞ Erstellen einer GraphQL-API mit Nodejs und MongoDB

☞ Async vs. Sync Handling Concurrency in JS

☞ 4 Möglichkeiten zum Leeren eines Arrays in Node.js

☞ MongoDB Nodejs-Tutorial mit Beispielen

☞ Umbenennen von Dateien mit Node.js

☞ Dockerisieren einer Node.js-Webanwendung

☞ Testen von Node API mit Mocha & Chai

#node-js #javascript #express

know.io