Echtzeitnachrichten für Meteor mit Meteorströmen

Dies ist 2013. Wenn Sie eine Webanwendung erstellen möchten, müssen Sie der App Echtzeitfunktionen hinzufügen. Es ist der Standard. Mit Meteor können Sie ziemlich schnell Apps in Echtzeit erstellen und erstellen. Meteor ist jedoch eng mit MongoDB gekoppelt und ist der einzige Weg, Echtzeitfunktionen hinzuzufügen. Das ist manchmal übertrieben.

MongoDB passt perfekt zu Meteor. Wir müssen MongoDB jedoch nicht für alle unsere Echtzeitaktivitäten verwenden. Bei einigen Problemen funktionieren messagingbasierte Lösungen sehr gut. Es ist das gleiche Problem, mit dem sich pubnub und real-time.co beschäftigen.

Es wäre großartig, wenn wir in Meteor einen hybriden Echtzeitansatz hätten, der den auf MongoDB Collection basierenden Ansatz und einen auf Messaging basierenden Ansatz kombiniert. So wurde Meteor Streams geboren, um diese auf Messaging basierende Echtzeitkommunikation zu Meteor hinzuzufügen.

Einführung in Meteor Streams

Ein Stream ist der grundlegende Baustein von Meteor Streams. Es ist ein Echtzeit-EventEmitter. Mit einem Stream können Sie Nachrichten zwischen verbundenen Clients hin und her senden. Es ist sehr überschaubar und hat ein sehr gutes Sicherheitsmodell.

Lass es uns versuchen

Lassen Sie uns eine sehr einfache, browserkonsolenbasierte Chat-Anwendung mit Meteor Streams erstellen. Zuerst erstellen wir eine neue Meteor-Anwendung:

Meteor erstellen Hallo-Stream

Als Nächstes installieren wir Meteor Streams aus der Atmosphäre:

mrt Streams hinzufügen

Dann müssen wir eine Datei mit dem Namen erstellen chat.js und in den folgenden Code einfügen:

 chatStream = neuer Meteor.Stream ('chat'); if (Meteor.isClient) sendChat = Funktion (Nachricht) chatStream.emit ('Nachricht', Nachricht); console.log ('me:' + message); ; chatStream.on ('message', Funktion (message) console.log ('user:' + message););

Starten Sie Ihre App mit:

Meteor

Ihre App läuft jetzt weiter - http: // localhost: 3000.

Jetzt haben Sie eine voll funktionsfähige Chat-App. Öffnen Sie zum Starten des Chats die Browserkonsole und verwenden Sie die sendChat Methode wie unten gezeigt.

Lass uns weiter eintauchen

Es ist ziemlich schwierig, Meteor-Streams anhand eines einfachen Konsolen-Beispiels zu verstehen, wie das oben beschriebene. Lassen Sie uns eine Chat-Anwendung mit vollem Funktionsumfang erstellen, um sich mit Meteor Streams vertraut zu machen.

Die App

Die App, die wir erstellen, ist eine webbasierte Chat-Anwendung. Jeder kann anonym chatten. Benutzer können sich auch registrieren und mit ihrer Identität (Benutzername) chatten. Es hat auch ein Filtersystem, das schlechte Wörter (Obszönität) herausfiltert..

Am Ende wird es ungefähr so aussehen. Sie können den Quellcode von github herunterladen, um das Endergebnis zu sehen.

Lassen Sie uns die App erstellen

Erstellen wir eine Standard-Meteor-App und installieren Sie Meteor-Streams aus der Atmosphäre. Wir werden auch Unterstützung für Bootstrap- und Meteor-Konten hinzufügen.

meteor awesome-chat-app erstellen cd awesome-chat-app meteor entfernen unsicheres autopublish-meteor hinzufügen bootstrap-konten-kennwort accounts-ui mrt hinzufügen streams rm awesome-chat-app. * // automatisch hinzugefügte Dateien

Lassen Sie uns die Benutzeroberfläche erstellen

Die Benutzeroberfläche für unsere App wird ziemlich einfach sein. Wir haben ein div Anzeige der Chat-Nachrichten und einer Eingang Box, um neue Chat-Nachrichten einzugeben. Unten finden Sie den vollständigen HTML-Code unserer Benutzeroberfläche. Lesen Sie die Inline-Kommentare, wenn Sie Hilfe zum Verständnis des Codes benötigen.

Fügen Sie den folgenden Inhalt hinzu client / home.html:

 Tolle Chat-App    > mainBox

Verkabeln Sie unseren Chat

Meteors Reaktivität ist ein fantastisches Konzept und sehr nützlich. Meteor Streams ist jetzt keine reaktive Datenquelle. Es kann jedoch gut mit lokalen Sammlungen kombiniert werden, um Reaktivität zu bieten.

Wie der Name schon sagt, synchronisieren lokale Sammlungen die Daten nicht mit dem Server. Ihre Daten sind nur innerhalb des Clients verfügbar (Browser-Registerkarte)..

Fügen Sie den folgenden Inhalt hinzu lib / namespace.js So erstellen Sie unsere lokale Kollektion:

if (Meteor.isClient) chatCollection = new Meteor.Collection (null);

Nun ist es Zeit, unsere Vorlagen mit der Sammlung zu verbinden. Lass uns folgendes tun:

Ordnen Sie die Sammlung dem zu Mitteilungen Helfer in der Chat Box Vorlage.
Generieren Sie einen Wert für die Nutzer Helfer in der chatMessage Vorlage.
Wenn der Chat senden Wenn Sie auf die Schaltfläche klicken, fügen Sie die eingegebene Chat-Nachricht der Sammlung hinzu.

Fügen Sie den folgenden Inhalt hinzu client / ui.js:

// Zuweisen der Sammlung zum Helfer "messages" in der Vorlage "chatBox" Template.chatBox.helpers ("messages": function () return chatCollection.find ();); // Generiere einen Wert für den Helfer "user" in der Vorlage "chatMessage" Template.chatMessage.helpers ("user": function () return this.userId;; // Wenn "Chat senden" angeklickt wurde, fügen Sie die eingegebene Chat-Nachricht der Sammlung Template.chatBox.events hinzu ("click #send": function () var message = $ ('# chat-message'). val () chatCollection.insert (userId: 'me', message: message); $ ('# chat-message'). val ("););

Mit den oben genannten Änderungen können Sie chatten, Nachrichten werden jedoch nur auf Ihrem Client angezeigt. Lassen Sie uns den Rest des Auftrags also an Meteor Streams übergeben.

Lassen Sie uns den Stream erstellen

Wir erstellen den Stream sowohl auf dem Client als auch auf dem Server (mit demselben Namen) und fügen die erforderlichen Berechtigungen hinzu.

Fügen Sie den folgenden Code hinzu lib / namespace.js um den Stream zu erstellen:

chatStream = neuer Meteor.Stream ('chat-stream');

Es reicht nicht aus, nur den Stream zu erstellen. Wir müssen die erforderlichen Berechtigungen erteilen, die es den Kunden ermöglichen, über sie zu kommunizieren. Es gibt zwei Arten von Berechtigungen (Lesen und Schreiben). Beim Erstellen der Berechtigung müssen das Ereignis, die Benutzer-ID und die Abonnement-ID berücksichtigt werden.

Benutzeridentifikation ist die userId des mit dem Stream verbundenen Clients.
Abo-ID ist die eindeutige Kennung, die für jeden mit dem Stream verbundenen Client erstellt wird.

Für unsere Chat-App müssen wir jedem, der die App nutzt, vollen Lese- und Schreibzugriff auf die App gewähren Plaudern Veranstaltung. Auf diese Weise können Clients es zum Senden und Empfangen von Chat-Nachrichten verwenden.

Fügen Sie den folgenden Code hinzu server / permissions.js:

chatStream.permissions.read (function (eventName) return eventName == 'chat';); chatStream.permissions.write (function (eventName) return eventName == 'chat';);

Anschließen des Streams mit der Benutzeroberfläche

Nachdem wir nun einen voll funktionsfähigen Stream haben, verbinden wir ihn mit der Benutzeroberfläche, damit andere die gesendeten Nachrichten sehen können.

Das erste, was wir tun müssen, ist, unsere Chat-Nachrichten dem Stream hinzuzufügen, wenn wir auf klicken Chat senden Taste. Dafür müssen wir den Code ändern, der sich auf die Chat senden Klicken Sie auf das Klickereignis der Schaltfläche (klicken Sie auf "Senden") wie folgt (in client / ui.js):

Template.chatBox.events ("click #send": function () var message = $ ('# chat-message'). Val (); chatCollection.insert (userId: 'me', message: message) ; $ ('# chat-message'). val ("); // == HERE COMES THE CHANGE == // füge die Nachricht zum Stream hinzu chatStream.emit ('chat', message);;

Dann müssen wir uns den Stream anhören Plaudern Ereignis und fügen Sie die Nachricht dem hinzu chatCollection was in der Benutzeroberfläche reaktiv gerendert wird. Fügen Sie dem folgenden Code hinzu client / ui.js Datei:

chatStream.on ('chat', Funktion (Nachricht) chatCollection.insert (userId: this.userId, // das ist die userId der Absender-SubscriptionId: this.subscriptionId, // ist die SubscriptionId der Absendernachricht Botschaft ); );

Jetzt müssen wir die Logik ändern, die den Wert für die erzeugt Nutzer Helfer in der chatMessage Vorlage wie folgt:

Angemeldeter Benutzer - Nutzer-
Anonymer Benutzer - anonym-

Ändern Sie den Code für die Nutzer Helfer in der chatMessage Vorlage, um die obigen Änderungen widerzuspiegeln (in client / ui.js):

Template.chatMessage.helpers ("user": function () var nickname = (this.userId)? 'User-' + this.userId: 'anonymous-' + this.subscriptionId; return nickname;);

Anzeigen des Benutzernamens anstelle von `Benutzeridentifikation`

Zeigt nur die Benutzeridentifikation ist nicht sehr nützlich. Ändern wir es also, um den tatsächlichen Benutzernamen anzuzeigen. Hier verwenden wir Meteor Pub / Sub, um den Benutzernamen für eine bestimmte Benutzer-ID zu erhalten.

Zunächst können Sie Meteor-Konten so konfigurieren, dass sie beim Erstellen des Benutzers den Benutzernamen akzeptieren. Fügen Sie den folgenden Code hinzu Client / Benutzer.js:

Accounts.ui.config (passwordSignupFields: "USERNAME_ONLY");

Dann erstellen wir die Publikation, um den Benutzer zu erhalten. Fügen Sie den folgenden Code hinzu server / users.js. Es gibt einfach den Benutzernamen für eine bestimmte Benutzer-ID zurück.

Meteor.publish ("user-info", function (id) return Meteor.users.find (_ id: id, fields: username: 1););

Jetzt müssen wir für jeden Benutzer, an dem wir interessiert sind, ein Abonnement auf dem Client erstellen. Wir tun dies innerhalb einer Methode. Nachdem der Benutzername abgerufen wurde, muss er außerdem einer Sitzungsvariablen zugewiesen werden. Dann können wir die Sitzungsvariable innerhalb von verwenden Nutzer Helfer, um den Benutzernamen reaktiv zu erhalten.

Fügen Sie den folgenden Code hinzu Client / Benutzer.js:

getUsername = function (id) Meteor.subscribe ('user-info', id); Deps.autorun (function () var user = Meteor.users.findOne (id); if (user) Session.set ('user-' + id, user.username);;

Zum Schluss wollen wir das ändern Nutzer Helfer in der chatMessage Vorlage, um den Benutzernamen aus der Sitzung zu erhalten (in client / ui.js):

Template.chatMessage.helpers ("user": function () if (this.userId == 'me') return this.userId; else if (this.userId) getUsername (this.userId); Session zurückgeben .get ('user-' + this.userId); else return 'anonymous-' + this.subscriptionId;);

Herausfiltern schlechter Wörter

Unsere Chat-App wird dafür sorgen, dass jede Obszönität verborgen bleibt. Wenn jemand versucht, eine Nachricht mit schlechten Worten zu senden, müssen wir diese herausfiltern. Meteor Stream verfügt über eine Funktion, die als Filter bezeichnet wird. Mal sehen, wie wir das Wort herausfiltern können täuschen aus einer Chat-Nachricht.

Fügen Sie den folgenden Code hinzu server / filters.js:

chatStream.addFilter (Funktion (eventName, args) if (eventName == 'chat') var message = args [0]; if (message) message = message.replace (/ fool / ig, '**** '); return [Nachricht]; else return args;);

Fühlen Sie sich frei, Ihre eigenen Filter hinzuzufügen.

Unsere Chat-App ist jetzt abgeschlossen. Eine Live-Version der App finden Sie unter http://streams-chat.meteor.com. Darüber hinaus ist der Quellcode für die App auf Github verfügbar.

Fazit

In diesem Lernprogramm haben wir eine Chat-Anwendung erstellt, die das Programm verwendet Nur lokale Sammlungen für das Hinzufügen von Reaktivität und gebrauchter Meteor Pub / Sub um den Benutzernamen eines Benutzers zu erhalten. Hoffentlich können Sie sehen, wie gut Meteor Streams mit den vorhandenen Meteor-Funktionen arbeiten können. Dies ist jedoch nur eine Einführung in Meteor Streams. Weitere Ressourcen finden Sie unter den folgenden Links:

Meteor Streams - ein Artikel über MeteorHacks.
Meteor Streams Dokumentation.
Beispiel Apps.

Code