Erstellen Sie einen Node.JS-betriebenen Chatroom-Web-App: Knoten, MongoDB und Socket

Key Takeaways

• Das Tutorial bietet eine Schritt-für-Schritt-Anleitung zum Erstellen einer Echtzeit-Chatroom-Web-App mit Node.js, MongoDB und Socket.io. Der Chatroom wird vollständig in der Cloud bereitgestellt.
• In dem Tutorial wird erläutert, wie Socket.io verwendet wird, um echtzeit-bidirektionale eventbasierte Kommunikations-Apps zu erstellen. Es vereinfacht den Prozess der Verwendung von WebSockets erheblich.
• Das Tutorial zeigt, wie ein Benutzer angemeldet ist und den Chatroom verlässt und wie man eine Nachricht über den Chat -Kanal an allen anderen Verbindungen in der Socket übernimmt.
.
Das Tutorial zeigt, wie Chat -Nachrichten in einer MongoDB -Datenbank gespeichert werden und wie die letzten 10 Nachrichten ausgegeben werden, um jedem neuen Benutzer, der sich dem Chatroom anschließt, einen Kontext zu geben.
Das Tutorial endet mit einem Chat -System, das eine Nachricht über Websockets an alle anderen verbundenen Clients übertragen kann. Das System speichert die Nachricht in der Datenbank und ruft die letzten 10 Nachrichten für jeden neuen Benutzer ab.

Dieser Artikel ist Teil einer Web Dev Tech -Serie von Microsoft. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Diese Node.js-Tutorial-Serie hilft Ihnen dabei, eine in der Cloud bereitgestellte Echtzeit-Chatroom-Web-App mit Node.JS-gestütztem Chatroom-Web-App zu erstellen. In dieser Serie erfahren Sie, wie Sie Node.js auf Ihrem Windows -Computer einrichten (oder einfach die Konzepte lernen, wenn Sie sich auf dem Mac befinden), wie Sie ein Web -Frontend mit Express entwickeln, wie Sie eine Node.js Express -App für die Bereitstellung eines Node.js -Apps zu entwickeln. Azure, wie man Socket.io verwendet, um eine Echtzeitschicht hinzuzufügen und wie man alles zusammenstellt.

Das Tutorial verwendet das optionale Visual Studio und die Node.JS-Tools für das Visual Studio-Plug-In als Entwicklungsumgebung. Ich habe Links zu kostenlosen Downloads beider Tools bereitgestellt. Dies ist ein Anfänger bis mittlerer Artikel-Sie werden erwartet, dass Sie HTML5 und JavaScript kennen.

Teil 1 - Einführung in Node.js

Teil 2 - Willkommen, mit Node.js und Azure

zu exprimieren

Teil 3 - Erstellen eines Backends mit Node.js, Mongo und Socket.io

Teil 4 - Erstellen einer Chatroom -Benutzeroberfläche mit Bootstrap

Teil 5 - Verbinden des Chatrooms mit WebSockets

Teil 6 - Finale und Debugging Remote Node.js Apps

Teil 3 - Bauen eines Chatroom -Backends mit Node.js, Socket.io und Mongo

bauen

Willkommen in Teil 3 der praktischen Node.JS-Tutorial-Serie: Erstellen Sie eine Node.JS-gestützte Chatroom-Web-App. In dieser Rate zeige ich Ihnen, wie Sie Ihre vorhandene Express-basierte Node.js-App verwenden, um ein Chatroom-Backend mit WebSocket-Support zu erstellen.

Was sind Websockets? Was ist Socket.io?

WebSocket ist ein Protokoll, mit dem Webanwendungen ein Vollduplex-Kanal über TCP (d. H. BIDirektionale Kommunikation) zwischen dem Webbrowser und einem Webserver erstellen können. Es ist vollständig mit HTTP kompatibel und verwendet die TCP-Portnummer 80. WebSocket hat es Webanwendungen ermöglicht, in Echtzeit zu werden und erweiterte Interaktionen zwischen dem Client und dem Server zu unterstützen. Es wird von mehreren Browsern unterstützt, darunter Internet Explorer, Google Chrome, Firefox, Safari und Opera.

socket.io ist ein JavaScript-Bibliothek und ein Node.js-Modul, mit dem Sie einfach und schnell in Echtzeit-bidirektionaler eventbasierter Kommunikations-Apps erstellen können. Es vereinfacht den Prozess der Verwendung von WebSockets erheblich. Wir werden Socket.io v1.0 verwenden, um unsere Chatroom -App zu erstellen.

Hinzufügen von Socket.io to package.json

package.json ist eine Datei mit verschiedenen Metadaten, die für das Projekt relevant sind, einschließlich seiner Abhängigkeiten. NPM kann diese Datei verwenden, um die vom Projekt erforderlichen Module herunterzuladen. Schauen Sie sich diese interaktive Erklärung von package.json und was es enthalten kann.

Fügen wir dem Projekt als Abhängigkeit Socket.io hinzu. Es gibt zwei Möglichkeiten, dies zu tun.

1. Wenn Sie der Tutorial-Serie verfolgt und ein Projekt in Visual Studio-Setup haben, klicken Sie mit der rechten Maustaste auf den NPM-Teil des Projekts und wählen Sie „Neue NPM-Pakete installieren…“

Sobald das Fenster geöffnet ist, suchen Sie nach "Socket.io", wählen Sie das obere Ergebnis und aktivieren Sie das Kontrollkästchen "In package.json". Klicken Sie auf die Schaltfläche "Paket installieren". Dadurch wird Socket.io in Ihr Projekt installiert und es zur Paket.json -Datei hinzugefügt.

package.json

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

1. Wenn Sie sich unter OS X oder Linux befinden, können Sie dieselbe Aktion wie die oben genannten erreichen, indem Sie den folgenden Befehl im Root Ihres Projektordners ausführen.

<span>npm install --save socket.io</span>

app.js

Hinzufügen von Socket.io addieren

Der nächste Schritt besteht darin, app.js. socket.io hinzuzufügen. Sie können dies erreichen, indem Sie den folgenden Code ersetzen…

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

… mit:

<span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Dies erfasst den HTTP -Server in einer Variablen namens Serve und passt diesen HTTP -Server so, dass das Socket.io -Modul daran anhängen kann. Der letzte Codeblock nimmt die Dienervariable an und führt die Hörenfunktion aus, die den HTTP -Server startet.

protokollieren Sie einen Benutzer, der

verbindet und verlässt

Idealerweise möchten wir einen Benutzer protokollieren, der sich dem Chatroom anschließt. Der folgende Code führt dazu, dass durch die Ausführung einer Rückruffunktion auf jedem einzelnen Verbindungsereignis über WebSocket an unseren HTTP -Server ausgeführt wird. In der Rückruffunktion rufen wir console.log an, um zu protokollieren, dass ein Benutzer verbunden ist. Wir können diesen Code hinzufügen, nachdem wir serve.listen anrufen.

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

Um dasselbe zu tun, wenn ein Benutzer das Trennen der Trennung für jeden Sockel anschließen muss. Fügen Sie den folgenden Code nach dem Konsolenprotokoll des vorherigen Codeblocks hinzu.

<span>npm install --save socket.io</span>

Schließlich sieht der Code so aus:

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Übertragung einer Nachricht, die auf dem Chat -Kanal empfangen wird

Socket.io gibt uns eine Funktion namens Emit zum Senden von Ereignissen.

Jede auf dem Chat -Kanal empfangene Nachricht wird an alle anderen Verbindungen in diesem Socket übertragen, indem er mit dem Broadcast -Flag im Rückruf aufgerufen wird.

<span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Schließlich sieht der Code so aus:

io<span>.on('connection', function (socket) {
</span>    <span>console.log('a user connected');
</span><span>});</span>

Speichern von Nachrichten in einer NoSQL -Datenbank

Speichern

Der Chatroom sollte Chat -Nachrichten in einem einfachen Datenspeicher speichern. Normalerweise gibt es zwei Möglichkeiten, eine Datenbank im Knoten zu speichern. Sie können einen datenbankspezifischen Treiber verwenden oder ein ORM verwenden. In diesem Tutorial werde ich Ihnen zeigen, wie Sie die Nachrichten in MongoDB speichern. Natürlich können Sie jede andere Datenbank verwenden, die Sie mögen, einschließlich SQL -Datenbanken wie Postgresql oder MySQL.

Sie sollten sicherstellen, dass Sie eine MongoDB haben, mit der Sie eine Verbindung herstellen können. Sie können einen Drittanbieterdienst verwenden, um Ihre MongoDB wie Mongohq oder Mongolab zu hosten. Schauen Sie sich dieses Tutorial an, um zu sehen, wie Sie mit dem Mongolab-Add-On in Azure einen MongoDB erstellen können. Sie können aufhören zu lesen, wenn Sie in den Abschnitt „Erstellen Sie die App erstellen“. Stellen Sie einfach sicher, dass Sie die mongolab_uri irgendwo speichern, auf die Sie später leicht zugreifen können.

Sobald Sie einen MongoDB erstellt haben und die Mongolab_uri für die Datenbank - unter Verbindungsinformationen, die Sie in Ihr Zwischenablage kopiert haben - möchten Sie sicherstellen, dass die URI für die Anwendung verfügbar ist. Es ist nicht bester Praxis, vertrauliche Informationen wie diesen URI in Ihren Code oder in eine Konfigurationsdatei in Ihrem Quellcode -Management -Tool hinzuzufügen. Sie können den Wert der Verbindungszeichenfolge im Konfigurationsmenü Ihrer Azure -Webanwendung (z. B. im von Ihnen verwendeten Tutorial) hinzufügen, oder Sie können ihn der App -Einstellungsliste hinzufügen (mit Namen CustomConnstr_Mongolab_uri). Auf Ihrer lokalen Maschine können Sie es den Umgebungsvariablen mit dem Namen CustomConnstr_Mongolab_uri und des Wertes des URI hinzufügen.

Der nächste Schritt besteht darin, unser Projekt zu unterstützen. Sie können dies tun, indem Sie das Abhängigkeitsobjekt in package.json die folgende Zeile hinzufügen. Stellen Sie sicher, dass Sie Ihre Änderungen in der Datei speichern.

socket<span>.on('disconnect', function () {
</span>        <span>console.log('user disconnected');
</span>    <span>});</span>

Klicken Sie auf den NPM-Teil des Projekts im Lösungs-Explorer mit der rechten Maustaste, um das Rechtsklick-Kontextmenü anzuzeigen. Klicken Sie aus dem Inhaltsmenü auf "Fehlende Pakete installieren", um das MongoDB -Paket zu installieren, damit es als Modul verwendet werden kann.

Wir möchten das Modul importieren, um das MongoDB -Client -Objekt in app.js. Sie können die folgenden Codezeilen nach dem ersten erforderlichen ('') Funktionsaufrufen hinzufügen, z. B. in Zeile 11.

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

Wir möchten mit dem URI, den wir in der Umgebungsvariable CustomConnStr_Mongolab_uri haben, eine Verbindung zur Datenbank herstellen. Sobald Sie angeschlossen sind, möchten wir die in der Socket -Verbindung empfangene Chat -Nachricht einfügen.

<span>npm install --save socket.io</span>

Wie Sie im obigen Code sehen können, verwenden wir den Prozess. Wir gehen in eine Sammlung in der Datenbank und nennen die Einfügenfunktion mit dem Inhalt in einem Objekt.

Jede Nachricht wird jetzt in unserer MongoDB -Datenbank gespeichert.

emittieren die letzten 10 empfangenen Nachrichten

Natürlich möchten wir nicht, dass sich unsere Benutzer nach dem Eintritt in den Chatroom verloren fühlen. Daher sollten wir sicherstellen, dass die letzten 10 Nachrichten an den Server empfangen werden, sodass wir ihnen zumindest einen Kontext geben können. Dazu müssen wir MongoDB anschließen. In diesem Fall habe ich es nicht, den gesamten Socket -Code mit einer Verbindung zur Datenbank zu wickeln, damit der Server auch dann funktioniert, auch wenn er die Datenbankverbindung verliert.

Wir möchten auch meine Abfrage sortieren und auf die letzten 10 Nachrichten beschränken. Wir werden den MongoDB generiert, der generiert ist, da sie einen Zeitstempel enthält (obwohl Sie in skalierbaren Situationen einen dedizierten Zeitstempel in der Chat -Nachricht erstellen möchten ) und wir werden die Limit -Funktion aufrufen, um die Ergebnisse auf nur 10 Nachrichten zu beschränken.

Wir werden die Ergebnisse von MongoDB streamen, damit ich sie so schnell wie möglich in den Chatroom ausgeben kann.

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Der obige Code erledigt den Job, wie in den vorherigen Absätzen erläutert.

Bereitstellen in Azure

Sie können nach Azure umsetzen, indem Sie den früheren Tutorials folgen (wie Teil 2).

Schlussfolgerung

Abschließend haben wir ein Chat -System, mit dem eine Nachricht über Websockets an alle anderen vernetzten Clients gesendet werden kann. Das System speichert die Nachricht an die Datenbank und ruft die letzten 10 Nachrichten ab, um jedem neuen Benutzer, der sich dem Chatroom anschließt, einen Kontext zu geben.

Bleiben Sie auf Teil 4!

Teil 4 - Aufbau einer Chatroom -Benutzeroberfläche mit Bootstrap ist hier. Sie können über diesen und anderen Artikel auf dem Laufenden bleiben, indem Sie meinem Twitter-Konto folgen.

Mehr Lernen für den Knoten auf Azure

Für eingehenderes Lernen auf dem Knoten ist mein Kurs hier in der Microsoft Virtual Academy verfügbar.

oder einige kürzere Formatvideos zu ähnlichen Knotenfächern:

• Sechs-Teil-Serie: Erstellen von Apps mit Node.js

• Ein Spaziergang durch Knoten (coding4fun)

Dieser Artikel ist Teil der Web Dev Tech -Serie von Microsoft. Wir freuen uns, Projekt Spartan und seinen neuen Rendering -Engine mit Ihnen zu teilen. Holen Sie sich kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac-, iOS-, Android- oder Windows -Gerät bei modernen.

häufig gestellte Fragen (FAQs) zum Erstellen eines Knotens.js Powered Chatroom Web App

Wie kann ich die Sicherheit meiner Chatroom -Web -App sicherstellen, die mit Node.js, MongoDB und Socket.io? Für eine Chatroom -Web -App mit Node.js, MongoDB und Socket.io können Sie mehrere Sicherheitsmaßnahmen implementieren. Verwenden Sie zunächst HTTPS anstelle von HTTP, um sicherzustellen, dass alle Mitteilungen zwischen Ihrem Server und den Clients verschlüsselt sind. Zweitens validieren Sie alle eingehenden Daten, um SQL -Injektionsangriffe zu verhindern. Drittens verwenden Sie JWT (JSON Web Tokens) für die Benutzerauthentifizierung. Schließlich aktualisieren Sie regelmäßig alle Ihre Abhängigkeiten auf ihre neuesten Versionen, um potenzielle Sicherheitslücken zu vermeiden. Sehr flexibel und kann in verschiedene Datenbanken integriert werden. Während MongoDB aufgrund seiner Skalierbarkeit und Flexibilität eine beliebte Wahl ist, können Sie je nach Ihren spezifischen Anforderungen auch andere Datenbanken wie MySQL, PostgreSQL oder SQLite verwenden. Die Auswahl der Datenbank hängt weitgehend von den Datenanforderungen Ihrer Anwendung und den spezifischen Funktionen der Datenbank ab. Node.js Chatroom -Web -App, können Sie einen Lastausgleichs -Balancer verwenden, um eingehende Datenverkehr auf mehrere Server zu verteilen. Sie können das Clustering -Modul auch in node.js verwenden, um untergeordnete Prozesse zu erstellen, die alle Serverports teilen. Erwägen Sie außerdem, eine NoSQL-Datenbank wie MongoDB zu verwenden, die leicht horizontal skalieren kann, um mehr Daten zu verarbeiten. > Ja, es gibt mehrere andere Echtzeit-Technologien, die Sie anstelle von Socket.io verwenden können. Dazu gehören WebSockets, Server-Sent-Ereignisse (SSE) und Dienste von Drittanbietern wie Pusher oder Firebase. Jede dieser Technologien hat seine eigenen Stärken und Schwächen. Die Wahl hängt daher von Ihren spezifischen Anforderungen ab. ist ein wesentlicher Bestandteil des Entwicklungsprozesses. Für eine Node.js -Chatroom -Web -App können Sie Tests -Frameworks wie Mokka oder Scherz verwenden, um Unit -Tests und Integrationstests zu schreiben. Sie können auch Tools wie Postman oder Schlaflosigkeit für API -Tests verwenden. Erwägen Sie außerdem, End-to-End-Test-Tools wie Cypress oder Puppenspieler zu verwenden, um die Benutzerinteraktionen zu simulieren und sicherzustellen, dass Ihre App wie erwartet funktioniert. 🎜>

Es gibt mehrere Plattformen, mit denen Sie Ihre Node.js -Chatroom -Web -App bereitstellen können. Dazu gehören Heroku, AWS, Google Cloud und Azure. Jede Plattform verfügt über einen eigenen Bereitstellungsprozess, aber im Allgemeinen müssen Sie ein Konto erstellen, ein neues Projekt einrichten und die Anweisungen der Plattform befolgen, um Ihre App bereitzustellen.

Kann ich meiner Node.js -Chatroom -Web -App Multimedia -Unterstützung hinzufügen? Dies kann durch Integration von Diensten von Drittanbietern wie Cloudinary oder AWS S3 zum Speichern und Abrufen von Multimedia-Dateien erfolgen. Sie können Socket.io auch verwenden, um Multimedia-Daten in Echtzeit zu senden und zu empfangen. Funktion für jede Chatroom -Web -App. Für eine Node.js -App können Sie Passport.js verwenden, eine beliebte Middleware zur Behandlung der Benutzerauthentifizierung. Es unterstützt verschiedene Authentifizierungsstrategien, einschließlich lokaler Benutzername und Kennwort, OAuth und jwt. ist Backend -Technologie und kann mit jedem Frontend -Framework oder jeder Bibliothek arbeiten. Während das Tutorial einfache HTML und CSS verwendet, können Sie Frontend -Frameworks wie React, Angular oder Vue.js verwenden, um komplexere und interaktivere Benutzeroberflächen zu erstellen. App?

Fehlerbehandlung ist ein wichtiger Bestandteil einer Webanwendung. In node.js können Sie Middleware verwenden, um Fehler zu behandeln. Dies beinhaltet die Erstellung einer speziellen Funktion, die vier Argumente annimmt: Fehler, Anfrage, Antwort und Weiter. Sie können diese Funktion dann verwenden, um Fehler zu protokollieren, Fehlerantworten an den Client zu senden oder Benutzer sogar auf eine Fehlerseite umzuleiten.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Node.JS-betriebenen Chatroom-Web-App: Knoten, MongoDB und Socket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!