Echtzeit-Chat mit Modulus und Node.js

In diesem Tutorial zeige ich Ihnen, wie Sie eine Echtzeit-Chat-Anwendung mit Node.js, Socket.IO und MongoDB implementieren. Anschließend werden wir diese Anwendung gemeinsam für Modulus bereitstellen.

Lassen Sie mich Ihnen zunächst das endgültige Aussehen der Anwendung zeigen, die wir am Ende des Artikels haben werden.

Node.js ist der Kern der Anwendung, mit Express als MVC, MongoDB für die Datenbank und Socket.IO für Echtzeitkommunikation. Wenn wir fertig sind, werden wir unsere Anwendung für Modulus bereitstellen. Der MongoDB-Teil existiert tatsächlich in Modulus. 

1. Szenario

1. John möchte unsere Anwendung verwenden und öffnet sie im Browser.
2. Auf der ersten Seite wählt er einen Spitznamen aus, der während des Chats verwendet wird, und meldet sich beim Chat an.
3. Im Textbereich schreibt er etwas und drückt Enter.
4. Der Text wird an einen RESTful-Dienst (Express) gesendet und dieser Text wird in MongoDB geschrieben.
5. Vor dem Schreiben in MongoDB wird derselbe Text an die Benutzer gesendet, die derzeit in der Chat-App angemeldet sind.

Wie Sie sehen, ist dies eine sehr einfache Anwendung, die jedoch fast alles für eine Webanwendung abdeckt. In dieser Anwendung gibt es kein Kanalsystem, Sie können jedoch den Quellcode verzweigen und das Kanalmodul für die Praxis implementieren.

2. Projektierung von Grund auf

Ich werde zuerst versuchen, die kleinen Teile des Projekts zu erklären und am Ende miteinander zu kombinieren. Ich werde vom hinteren Ende bis zum vorderen Ende beginnen. Beginnen wir also mit den Domänenobjekten (MongoDB-Modellen)..

2.1. Modell

Für die Datenbankabstraktion verwenden wir Mongoose. In diesem Projekt haben wir nur ein Modell genannt Botschaft. Dieses Nachrichtenmodell enthält nur Text, Erstellungsdatum,und Autor. Es gibt kein Modell für den Autor Nutzer, weil wir ein Benutzerregistrierungs- / Anmeldesystem nicht vollständig implementieren werden. Es wird eine Seite mit einem einfachen Spitznamen geben, die in einem Cookie gespeichert wird. Dies wird im verwendet Botschaft Modell als Text in der Autor Feld. Unten sehen Sie ein Beispiel für ein JSON-Modell:

text: "Hallo, gibt es hier einen Full Stack-Entwickler?" author: "john_the_full_stack", createDate: "2015.05.15"

Um Dokumente wie diese zu erstellen, können Sie ein Modell mithilfe der folgenden Mongoose-Funktionen implementieren:

var mongoose = required ('mongoose') var Nachricht = new mongoose.Schema (author: String, message: String, createDate: type: Date, Standard: Date.now); mongoose.model ('Nachricht', Nachricht)

Importieren Sie einfach das Mongoose-Modul, definieren Sie Ihr Modell mit seinen Feldern und Feldattributen im JSON-Format und erstellen Sie ein Modell mit dem Namen Botschaft. Dieses Modell wird in die Seiten aufgenommen, die Sie verwenden möchten.

Möglicherweise haben Sie eine Frage, warum wir die Nachricht in der Datenbank speichern, wenn wir diese Nachricht bereits auf demselben Kanal an den Benutzer senden. Es ist wahr, dass Sie keine Chat-Nachrichten speichern müssen, aber ich wollte nur die Datenbankintegrationsschicht erläutern. Auf jeden Fall werden wir dieses Modell in unseren Controllern verwenden. Controller?

2.2. Regler

Wie ich bereits sagte, werden wir Express für den MVC-Teil verwenden. Und Chier steht für die Regler. Für unsere Projekte gibt es nur zwei Endpunkte für das Messaging. Eine davon dient zum Laden der letzten Chatnachrichten, und die zweite ist für die Verarbeitung gesendeter Chatnachrichten, die in der Datenbank gespeichert werden sollen, und dann zum Senden in den Kanal. 

… App.get ('/ chat', Funktion (req, res) res.sendFile (__ dirname + '/index.html');); app.get ('/ login', Funktion (req, res) res.sendFile (__ dirname + '/login.html');); app.post ('/ messages', Funktion (req, res, next) var message = req.body.message; var author = req.body.author; var messageModel = neu Message (); messageModel.author = author; messageModel.message = message; messageModel.save (Funktion (err, Ergebnis) if (! err) Message.find (). sort ('- createDate'). limit (5) .exec (Funktion (err, messages) io.emit ("message", messages);); res.send ("Message Sent!"); else res.send ("Technischer Fehler ist aufgetreten!");;); app.get ('/ messages', Funktion (req, res, next) Nachricht.find (). sort ('- createDate'). limit (5) .exec (Funktion (err, messages) res. json (Nachrichten);););… 

Der erste und der zweite Controller dienen nur zum Bereitstellen statischer HTML-Dateien für die Chat- und Anmeldeseite. Die dritte ist für die Bearbeitung der Post-Anfrage an die /MitteilungenEndpunkt zum Erstellen neuer Nachrichten. In diesem Controller wird zunächst der Anfragetext in das Nachrichtenmodell konvertiert, und anschließend wird dieses Modell mithilfe der Mongoose-Funktion in der Datenbank gespeichert sparen. 

Ich werde nicht viel in Mongoose eintauchen - Sie können sich die Dokumentation für weitere Details ansehen. Sie können eine Rückruffunktion für die Speicherfunktion bereitstellen, um zu prüfen, ob ein Problem vorliegt oder nicht. Wenn es erfolgreich ist, haben wir die letzten fünf Datensätze absteigend nach sortiert sortiert Erstellungsdatum, und haben fünf Nachrichten an die Clients im Kanal gesendet. 

Ok, wir sind fertig MC.Wechseln wir zum Aussicht Teil.

2.3. Aussicht

Im Allgemeinen kann eine Vorlagen-Engine wie Jade, EJS, Lenker usw. in Express verwendet werden. Wir haben jedoch nur eine Seite, und dies ist eine Chat-Nachricht, daher werde ich diese statisch abrufen. Wie bereits gesagt, gibt es zwei weitere Controller, die diese statische HTML-Seite bereitstellen. Sie können Folgendes sehen, wenn Sie eine statische HTML-Seite bereitstellen.

app.get ('/ chat', Funktion (req, res) res.sendFile (__ dirname + '/index.html');); app.get ('/ login', Funktion (req, res) res.sendFile (__ dirname + '/login.html'););

Dieser Endpunkt dient einfach zur Verwendung von index.html und login.html res.sendFile. Beideindex.html und login.html befinden sich im selben Ordner wie server.js, weshalb wir verwendet haben __dirname vor dem HTML-Dateinamen.

2.4. Vorderes Ende

Auf der Frontend-Seite habe ich Bootstrap verwendet, und es ist nicht nötig zu erklären, wie ich das geschafft habe. Ich habe einfach eine Funktion an ein Textfeld gebunden und jedes Mal, wenn Sie auf drücken Eingeben Schlüssel oder Senden Schaltfläche wird die Nachricht an den Back-End-Service gesendet. 

Diese Seite enthält auch eine js-Datei von Socket.IO, um den Kanal zu hören Botschaft. Das Socket.IO-Modul ist bereits im Back-End importiert. Wenn Sie dieses Modul auf der Serverseite verwenden, wird automatisch ein Endpunkt für die Bereitstellung der Socket.IO-js-Datei hinzugefügt. Wir verwenden jedoch den von cdn bereitgestellten . Immer wenn eine neue Nachricht in diesen Kanal eingeht, wird sie automatisch erkannt und die Nachrichtenliste mit den letzten fünf Nachrichten aktualisiert.  

Der obige Code enthält einen weiteren Check: den Cookie-Teil. Wenn Sie keinen Spitznamen für den Chat ausgewählt haben, bedeutet dies, dass das Cookie nicht für den Spitznamen gesetzt ist und Sie automatisch zur Anmeldeseite weitergeleitet werden. 

Wenn nicht, werden die letzten fünf Nachrichten von einem einfachen Ajax-Aufruf an den Server abgerufen /Mitteilungen Endpunkt. Auf dieselbe Weise, wenn Sie auf die Schaltfläche klicken Senden oder drücken Sie die Eingeben Mit dem Schlüssel wird die Textnachricht aus dem Textfeld abgerufen, und der Kurzname wird aus dem Cookie abgerufen. Diese Werte werden mit einer Post-Anforderung an den Server gesendet. Es gibt keine strikte Überprüfung des Spitznamens, da ich mich auf den Echtzeit-Teil konzentrieren wollte, nicht auf den Benutzerauthentifizierungsteil.

Wie Sie sehen, ist die Gesamtstruktur des Projekts sehr einfach. Kommen wir zum Bereitstellungsteil. Wie bereits erwähnt, werden wir Modulus verwenden, einen der besten PaaS-Systeme für die Bereitstellung, Skalierung und Überwachung Ihrer Anwendung in der Sprache Ihrer Wahl. 

3. Bereitstellung

3.1. Voraussetzungen

Das Erste, was mir einfällt, ist, Ihnen zu zeigen, wie Sie das Deployment durchführen. Für eine erfolgreiche Bereitstellung benötigen wir jedoch eine funktionierende Datenbank. Sehen wir uns an, wie Sie eine Datenbank für Modulus erstellen und anschließend die Bereitstellung durchführen. 

Wechseln Sie nach dem Erstellen eines Kontos zum Modulus-Dashboard. Drücke den Datenbanken Menü links und klicken Sie auf Datenbank erstellen. 

Füllen Sie die erforderlichen Felder im Popup-Formular wie folgt aus.

Wenn Sie die erforderlichen Felder ausfüllen und auf klicken Erstellen, Es wird eine MongoDB-Datenbank für Sie erstellt, und Sie sehen Ihre Datenbank-URL auf dem Bildschirm. Wir werden verwenden MONGO URI,Kopieren Sie also diesen URI.

In unserem Projekt wird die Mongo-URI aus der Umgebungsvariablen abgerufen MONGO_URI, und Sie müssen diese Umgebungsvariable im Dashboard festlegen. Gehen Sie zum Dashboard und klicken Sie auf Projekte Wählen Sie in der Liste Ihr Projekt aus und klicken Sie auf Verwaltung im linken Menü. Auf dieser Seite sehen Sie den Abschnitt zu den Umgebungsvariablen, wenn Sie auf der Seite nach unten blättern, wie unten gezeigt.

Sie können das Modul auf zwei Arten implementieren: 

• Laden Sie die ZIP-Datei des Projekts mithilfe des Dashboards hoch
• Bereitstellung über die Befehlszeile mithilfe der Modulus-CLI

Ich werde mit der Befehlszeilenoption fortfahren, weil die andere einfach zu tun ist. Installieren Sie zunächst Modulus CLI:

npm install -g modulus

Gehen Sie zu Ihrem Projektordner und führen Sie den folgenden Befehl aus, um sich bei Modulus anzumelden.

modul login

Wenn Sie den obigen Befehl ausführen, werden Sie aufgefordert, einen Benutzernamen und ein Kennwort einzugeben:

Wenn Sie ein Konto mit GitHub erstellt haben, können Sie das verwenden --github Möglichkeit.

modul login --github

Jetzt sind Sie bei Modulus angemeldet und es ist Zeit, ein Projekt zu erstellen. Verwenden Sie den folgenden Befehl, um ein Projekt zu erstellen:

Modul-Projekt "Echtzeit-Chat" erstellen

Wenn Sie diese Funktion ausführen, werden Sie nach der Laufzeit gefragt. Wählen Sie die erste Option (Node.js) aus, und als nächstes werden Sie nach der Servogröße gefragt. Sie können sie als Standard beibehalten.

Wir haben ein Projekt erstellt und dieses Mal werden wir unser aktuelles Projekt bei Modulus einsetzen. Führen Sie den folgenden Befehl aus, um das aktuelle Projekt an die zu senden Echtzeit-Chat Projekt auf der Modulus-Seite.

Modul bereitstellen

Das Projekt wird bereitgestellt, und die laufende Projekt-URL wird am Ende der erfolgreichen Bereitstellungsnachricht angezeigt:

Echtzeit-Chat unter realtime-chat-46792.onmodulus.net

Wie Sie sehen, ist die Bereitstellung auf Modulus sehr einfach! 

Modulus CLI enthält sehr hilfreiche Befehle, die Sie während der Projektbereitstellung oder zur Laufzeit verwenden können. Um beispielsweise Protokolle Ihres laufenden Projekts zu überwachen, können Sie verwenden Modul-Protokoll protokolliert das Ende, um eine MongoDB-Datenbank zu erstellen modulus mongo erstellen , um eine Umgebungsvariable zu setzen modul env eingestellt , usw. Sie können eine vollständige Liste der Befehle anzeigen, indem Sie die Modulus-Hilfe verwenden. 

Fazit

Der Hauptzweck dieses Lernprogramms bestand darin, Ihnen zu zeigen, wie Sie eine Echtzeit-Chat-Anwendung mit Node.js, Socket.IO und MongoDB erstellen. Um ein Projekt in der Produktion zu betreiben, wird Modulus als PaaS-Anbieter verwendet. Modulus hat sehr einfache Schritte für die Bereitstellung und verfügt auch über eine interne Datenbank (MongoDB) für unsere Projekte. Außerdem können Sie im Modulus-Dashboard sehr hilfreiche Tools wie Protokolle, Benachrichtigungen, Auto-Scaling, Datenbankadministration usw. verwenden.

Um sich für Modulus anzumelden, klicken Sie hier und erhalten Sie zusätzlich 10 US-Dollar, um Tuts + -Leser zu sein. Verwenden Sie den Promo-Code ModulusChat10.

Weitere Informationen zum Modulus-Angebot finden Sie hier.