Messagerie en temps réel pour Meteor avec des flux de météores

Nous sommes en 2013. Si vous envisagez de créer une application Web, vous devez ajouter des fonctionnalités temps réel à l'application. C'est la norme. Meteor fait un très bon travail pour vous aider à créer rapidement des applications en temps réel. Mais météore est étroitement associé à MongoDB et constitue le seul moyen d’ajouter des capacités en temps réel. Parfois, c'est exagéré.

MongoDB est un match parfait pour Meteor. Mais nous n'avons pas besoin d'utiliser MongoDB pour toutes nos activités en temps réel. Pour certains problèmes, les solutions basées sur la messagerie fonctionnent vraiment bien. C'est le même problème que pubnub et real-time.co traitent également.

Ce serait formidable si nous pouvions avoir une approche hybride en temps réel dans Meteor, combinant l’approche basée sur la collection MongoDB et une approche basée sur la messagerie. C'est ainsi que Meteor Streams est né pour ajouter cette communication en temps réel basée sur la messagerie à Meteor.

Présentation de Meteor Streams

Un Stream est la pierre angulaire de Meteor Streams. C'est un EventEmitter en temps réel. Avec un flux, vous pouvez faire passer des messages entre les clients connectés. Il est très maniable et possède un très bon modèle de sécurité.

Essayons

Créons une application de discussion très simple basée sur une console de navigateur avec Meteor Streams. Nous allons d'abord créer une nouvelle application Meteor:

météore créer hello-stream

Ensuite, nous installons Meteor Streams depuis l’atmosphère:

mrt ajouter des flux

Ensuite, nous devons créer un fichier nommé chat.js et placez-le dans le code suivant:

 chatStream = new Meteor.Stream ('chat'); if (Meteor.isClient) sendChat = function (message) chatStream.emit ('message', message); console.log ('moi:' + message); ; chatStream.on ('message', fonction (message) console.log ('utilisateur:' + message););

Démarrez votre application avec:

météore

Votre application va maintenant fonctionner sur - http: // localhost: 3000.

Maintenant, vous avez une application de chat pleinement fonctionnelle. Pour commencer à discuter, ouvrez la console du navigateur et utilisez le sendChat méthode comme indiqué ci-dessous.

Plongeons plus loin

Il est difficile de comprendre Meteor Streams avec un simple exemple basé sur une console, comme celui que nous venons de construire. Construisons donc une application de chat complète pour mieux connaître Meteor Streams..

L'application

L'application que nous créons est une application de discussion en ligne. Tout le monde peut discuter anonymement. En outre, les utilisateurs peuvent s'inscrire et discuter avec leur identité (nom d'utilisateur). Il possède également un système de filtrage qui filtre les mots mauvais (blasphème)..

À la fin, cela ressemblera à quelque chose comme ça. Vous pouvez récupérer le code source dans github pour voir le résultat final.

Créons l'application

Créons une application Meteor standard et installons Meteor Streams depuis l'atmosphère. Nous ajouterons également le support pour les comptes bootstrap et Meteor..

météore créer awesome-chat-app cd awesome-chat-app météore supprimer météore autopublish meteor ajouter bootstrap comptes-mot de passe comptes-ui mrt ajouter des flux rm awesome-chat-app. * // supprimer les fichiers ajoutés automatiquement

Construisons l'interface

L'interface utilisateur de notre application sera assez simple. Nous avons un div montrant les messages de chat et un contribution zone pour entrer dans les nouveaux messages de discussion. Voir ci-dessous pour le code HTML complet de notre interface utilisateur. Consultez les commentaires en ligne si vous avez besoin d'aide pour comprendre le code..

Ajouter le contenu suivant dans client / home.html:

 App chat génial    > mainBox

Câblage de notre chat

La réactivité de Meteor est un concept génial et très utile. Meteor Streams n’est plus une source de données réactive. Mais cela peut bien fonctionner avec des collections locales uniquement pour apporter de la réactivité.

Comme son nom l'indique, les collections locales uniquement ne synchronisent pas ses données avec le serveur. Ses données ne sont disponibles que dans le client (onglet du navigateur).

Ajouter le contenu suivant dans lib / namespace.js pour créer notre seule collection locale:

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

Il est maintenant temps de connecter nos modèles à la collection. Faisons ce qui suit:

Attribuer la collection à la messages assistant dans le boîte de discussion modèle.
Générer une valeur pour le utilisateur assistant dans le chatMessage modèle.
Quand le Envoyer un chat cliquez sur le bouton, ajoutez le message de discussion tapé dans la collection.

Ajouter le contenu suivant à client / ui.js:

// Assigne une collection à l'assistant 'messages' dans le modèle 'chatBox' Template.chatBox.helpers ("messages": function () return chatCollection.find ();); // génère une valeur pour l'assistant 'utilisateur' dans le modèle 'chatMessage' Template.chatMessage.helpers ("utilisateur": function () return this.userId;); // lorsque vous cliquez sur "Envoyer le chat", ajoutez le message de chat saisi dans la collection Template.chatBox.events ("click #send": function () var message = $ ('# chat-message'). val () ; chatCollection.insert (userId: 'me', message: message); $ ('# message-chat'). val ("););

Avec les modifications ci-dessus, vous pourrez discuter, mais les messages ne s'affichent que sur votre client. Alors passons le reste du travail à Meteor Streams.

Créons le flux

Nous allons créer le flux sur le client et le serveur (avec le même nom) et ajouter les autorisations nécessaires..

Ajoutez le code suivant dans lib / namespace.js pour créer le flux:

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

Il ne suffit pas de créer le flux seul; nous devons donner les autorisations nécessaires, qui permettent aux clients de communiquer à travers elle. Il existe deux types d'autorisations (lecture et écriture). Nous devons prendre en compte l’événement, l’identificateur d’utilisateur et l’identificateur subscriptionId lors de la création de l’autorisation..

identifiant d'utilisateur est l'ID utilisateur du client connecté au flux.
abonnement est l'identifiant unique créé pour chaque client connecté au flux.

Pour notre application de chat, nous devons donner à tous ceux qui l'utilisent un accès complet en lecture et en écriture au bavarder un événement. De cette façon, les clients peuvent l’utiliser pour envoyer et recevoir des messages de discussion..

Ajoutez le code suivant à serveur / permissions.js:

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

Connecter le flux avec l'interface utilisateur

Maintenant que nous avons un flux entièrement fonctionnel, connectons-le à l'interface utilisateur afin que les autres utilisateurs puissent voir les messages que vous envoyez..

La première chose à faire est d’ajouter nos messages de discussion au flux, en cliquant sur le bouton Envoyer un chat bouton. Pour cela, nous devons modifier le code lié à la Envoyer un chat événement de clic du bouton (click #send), comme suit (dans client / ui.js):

Template.chatBox.events ("click #send": function () var message = $ ('# chat-message'). Val (); chatCollection.insert (userId: 'moi', message: message) ; $ ('# message-chat'). val ("); // == VOICI LE CHANGEMENT == // ajouter le message au flux chatStream.emit ('chat', message););

Ensuite, nous devons écouter le flux pour le bavarder événement et ajouter le message au chatCollection qui est rendu dans l'interface utilisateur, de manière réactive. Ajoutez le code suivant au client / ui.js fichier:

chatStream.on ('chat', fonction (message) chatCollection.insert (userId: this.userId, // ceci est l'ID utilisateur de l'expéditeur subscriptionId: this.subscriptionId, // ceci est l''abonnement ID du message de l'expéditeur: message ); );

Maintenant, nous devons modifier la logique qui génère la valeur pour le utilisateur assistant dans le chatMessage modèle comme suit:

Utilisateur connecté - utilisateur-
Utilisateur anonyme - anonyme-

Modifier le code pour le utilisateur assistant dans le chatMessage modèle pour refléter les changements ci-dessus (en client / ui.js):

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

Affichage du nom d'utilisateur à la place du `identifiant d'utilisateur`

Montrer juste le identifiant d'utilisateur n'est pas très utile. Alors changeons-le pour afficher le nom d'utilisateur actuel. Ici, nous utiliserons Meteor Pub / Sub pour obtenir le nom d'utilisateur d'un ID utilisateur donné..

Tout d'abord, permet de configurer les comptes Meteor pour accepter le nom d'utilisateur lors de la création de l'utilisateur. Ajoutez le code suivant à client / users.js:

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

Ensuite, créons la publication pour obtenir l'utilisateur. Ajoutez le code suivant à serveur / utilisateurs.js. Il retourne simplement le nom d'utilisateur pour un ID utilisateur donné.

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

Nous devons maintenant créer un abonnement sur le client pour chaque utilisateur qui nous intéresse. Nous le ferons dans une méthode. De plus, après avoir obtenu le nom d'utilisateur, il doit être affecté à une variable de session. Ensuite, nous pouvons utiliser la variable de session à l'intérieur du utilisateur assistant pour obtenir le nom d'utilisateur de manière réactive.

Ajoutez le code suivant dans client / users.js:

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

Enfin, modifions le utilisateur assistant dans le chatMessage modèle pour obtenir le nom d'utilisateur de la session (en client / ui.js):

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

Filtrer les mauvais mots

Notre application de chat fera en sorte de cacher tout blasphème. Si quelqu'un essaie d'envoyer un message avec des mots incorrects, nous devons les filtrer. Meteor Stream possède une fonctionnalité appelée filtres, conçue pour cela. Voyons comment filtrer le mot imbécile de n'importe quel message de chat.

Ajoutez le code suivant dans serveur / filtres.js:

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

N'hésitez pas à ajouter vos propres filtres.

Notre application de chat est maintenant complète. Vous pouvez voir une version en direct de l'application sur http://streams-chat.meteor.com. De plus, le code source de l'application est disponible sur Github..

Conclusion

Dans ce tutoriel, nous avons construit une application de discussion en utilisant collections locales uniquement pour ajouter de la réactivité et Meteor utilisé Pub / Sub pour obtenir le nom d'utilisateur d'un utilisateur. J'espère que vous pourrez voir à quel point Meteor Stream peut fonctionner avec les fonctionnalités existantes de Meteor. Cependant, il ne s'agit que d'une introduction à Meteor Streams. Pour des ressources supplémentaires, consultez les liens suivants:

Introduction à Meteor Streams - Un article sur MeteorHacks.
Documentation Meteor Streams.
Exemple d'applications.

Code