Discussion en temps réel avec Modulus et Node.js

Dans ce tutoriel, je vais vous montrer comment implémenter une application de discussion en temps réel avec Node.js, Socket.IO et MongoDB, puis nous déploierons cette application ensemble vers Modulus..

Tout d’abord, laissez-moi vous montrer le dernier aspect de l’application que nous aurons à la fin de l’article..

Node.js sera le noyau de l'application, avec Express comme MVC, MongoDB pour la base de données et Socket.IO pour la communication en temps réel. Lorsque nous aurons terminé, nous déploierons notre application sur Modulus. La partie MongoDB existe réellement dans Modulus.

1. scénario

John veut utiliser notre application et l'ouvre dans le navigateur.
Sur la première page, il sélectionne un pseudonyme utilisé lors de la discussion et se connecte à la discussion..
Dans la zone de texte, il écrit quelque chose et appuie sur Entrée..
Le texte est envoyé à un service RESTful (Express) et ce texte est écrit à MongoDB..
Avant d'écrire dans MongoDB, le même texte sera diffusé aux utilisateurs actuellement connectés à l'application de discussion..

Comme vous pouvez le constater, il s’agit d’une application très simple, mais elle couvre presque tout pour une application Web. Il n'y a pas de système de canaux dans cette application, mais vous pouvez copier le code source et implémenter le module de canaux pour vous entraîner..

2. Conception de projet à partir de zéro

Je vais d'abord essayer d'expliquer les petits morceaux du projet et de les combiner à la fin. Je vais commencer de l'arrière au début. Commençons par les objets de domaine (modèles MongoDB).

2.1. Modèle

Pour l'abstraction de base de données, nous utiliserons Mongoose. Dans ce projet, nous avons un seul modèle appelé Message. Ce modèle de message contient uniquement texte, créer un rendez-vous,et auteur. Il n'y a pas de modèle pour l'auteur comme Utilisateur, parce que nous ne mettrons pas complètement en place un système d’enregistrement / de connexion utilisateur. Il y aura une simple page fournissant un pseudo, et ce pseudo sera sauvegardé dans un cookie. Ce sera utilisé dans le Message modèle comme texte dans le auteur champ. Vous pouvez voir un exemple de modèle JSON ci-dessous:

texte: "Salut, y a-t-il un développeur Full Stack ici?" auteur: "john_the_full_stack", createDate: "2015.05.15"

Pour créer de tels documents, vous pouvez implémenter un modèle en utilisant les fonctions Mongoose ci-dessous:

var mongoose = require ('mongoose') var Message = new mongoose.Schema (author: String, message: String, createDate: type: Date, par défaut: Date.now); mongoose.model ('Message', Message)

Importez simplement le module Mongoose, définissez votre modèle avec ses champs et ses attributs au format JSON, puis créez un modèle avec le nom Message. Ce modèle sera inclus dans les pages que vous souhaitez utiliser.

Vous avez peut-être une question sur la raison pour laquelle nous stockons le message dans la base de données, alors que nous diffusons déjà ce message à l'utilisateur dans le même canal. Il est vrai qu'il n'est pas nécessaire de stocker les messages de discussion, mais je voulais simplement expliquer la couche d'intégration de la base de données. Quoi qu'il en soit, nous allons utiliser ce modèle dans notre projet à l'intérieur des contrôleurs. Contrôleurs?

2.2. Manette

Comme je l'ai dit plus tôt, nous utiliserons Express pour la partie MVC. Et Cici représente la Manette. Pour nos projets, il n'y aura que deux points de terminaison pour la messagerie. L'une d'elles est destinée au chargement des messages de discussion récents et l'autre au traitement des messages de discussion envoyés à stocker dans la base de données, puis à diffuser dans le canal..

… App.get ('/ chat', fonction (req, res) res.sendFile (__ dirname + '/index.html');); app.get ('/ login', fonction (req, res) res.sendFile (__ dirname + '/login.html');); app.post ('/ messages', fonction (req, res, suivante) var message = req.body.message; var auteur = req.body.author; var messageModel = nouveau Message (); messageModel.author = author; messageModel.message = message; messageModel.save (fonction (err, résultat) if (! err) message.find (). sort ('- createDate'). limit (5) .exec (fonction (err, messages) io.emit ("message", messages);); res.send ("Message envoyé!"); else res.send ("Une erreur technique est survenue!"););); app.get ('/ messages', fonction (req, res, suivante) Message.find (). sort ('- createDate'). limit (5) .exec (fonction (err, messages) res. json (messages);););…

Les premier et deuxième contrôleurs servent uniquement à servir des fichiers HTML statiques pour les pages de discussion et de connexion. Le troisième est destiné au traitement de la demande de publication auprès du /messagespoint de terminaison pour la création de nouveaux messages. Dans ce contrôleur, le corps de la demande est tout d'abord converti dans le modèle Message, puis ce modèle est enregistré dans la base de données à l'aide de la fonction Mongoose. enregistrer.

Je ne plongerai pas beaucoup dans Mongoose - vous pouvez consulter la documentation pour plus de détails. Vous pouvez fournir une fonction de rappel pour que la fonction de sauvegarde vérifie s'il y a un problème ou non. En cas de succès, nous avons récupéré les cinq derniers enregistrements triés par ordre décroissant. créer un rendez-vous, et ont diffusé cinq messages aux clients du canal.

Ok on a fini MC.Passons au Vue partie.

2.3. Vue

En général, un moteur de modèle tel que Jade, EJS, un guidon, etc. peut être utilisé dans Express. Cependant, nous n’avons qu’une page et il s’agit d’un message de discussion; je vais donc vous transmettre ce message de manière statique. En fait, comme je l’ai dit plus haut, il existe deux autres contrôleurs pour desservir cette page HTML statique. Vous pouvez voir ce qui suit pour servir une page HTML statique.

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

Ce noeud final sert simplement index.html et login.html en utilisant res.sendFile. Tous les deuxindex.html et login.html sont dans le même dossier que server.js, c'est pourquoi nous avons utilisé __dirname avant le nom du fichier HTML.

2.4. L'extrémité avant

Sur la page d’accueil, j’ai utilisé Bootstrap et il n’est pas nécessaire d’expliquer comment j’ai réussi à le faire. Simplement, j'ai lié une fonction à une zone de texte et chaque fois que vous appuyez sur la touche Entrer clé ou Envoyer bouton, le message sera envoyé au service back-end.

Cette page contient également un fichier js requis de Socket.IO pour écouter le canal appelé message. Le module Socket.IO est déjà importé dans le back-end et, lorsque vous utilisez ce module côté serveur, il ajoute automatiquement un point de terminaison pour servir le fichier Socket.IO js, mais nous utilisons celui qui est servi à partir de cdn. . Chaque fois qu'un nouveau message arrive sur ce canal, il sera automatiquement détecté et la liste des messages sera actualisée avec les cinq derniers messages..

Il y a encore une vérification dans le code ci-dessus: la partie cookie. Si vous n'avez pas choisi de pseudo pour le chat, cela signifie que le cookie n'est pas configuré pour le pseudo et vous serez automatiquement redirigé vers la page de connexion..

Sinon, les cinq derniers messages seront récupérés par un simple appel Ajax au /messages point final. De la même manière, chaque fois que vous cliquez sur le bouton Envoyer bouton ou appuyez sur le Entrer clé, le message texte sera extrait de la zone de texte et le surnom sera extrait du cookie; ces valeurs seront envoyées au serveur avec une demande de publication. Il n'y a pas de vérification stricte du pseudo ici, parce que je voulais me concentrer sur la partie temps réel, pas sur la partie authentification de l'utilisateur.

Comme vous pouvez le constater, la structure générale du projet est très simple. Venons-en à la partie déploiement. Comme je l'ai dit précédemment, nous utiliserons Modulus, l'un des meilleurs PaaS pour déployer, mettre à l'échelle et surveiller votre application dans la langue de votre choix..

3. Déploiement

3.1. Conditions préalables

La première chose qui me vient à l’esprit est de vous montrer comment déployer, mais pour un déploiement réussi, nous avons besoin d’une base de données opérationnelle. Voyons comment créer une base de données sur Modulus puis effectuons le déploiement..

Accédez au tableau de bord Modulus après la création d'un compte. Clique le Bases de données menu à gauche, puis cliquez sur Créer une base de données.

Remplissez les champs obligatoires dans le formulaire popup comme ci-dessous.

Lorsque vous remplissez les champs obligatoires et cliquez sur Créer, il créera une base de données MongoDB pour vous et vous verrez l’URL de votre base de données à l’écran. Nous utiliserons MONGO URI,alors copiez cet URI.

Dans notre projet, Mongo URI est extrait de la variable d'environnement. MONGO_URI, et vous devez définir cette variable d'environnement dans le tableau de bord. Allez au tableau de bord, cliquez sur le bouton Projets menu, sélectionnez votre projet dans la liste, puis cliquez sur Administration dans le menu de gauche. Dans cette page, vous verrez la section des variables d’environnement lorsque vous faites défiler la page, comme indiqué ci-dessous..

Vous pouvez déployer sur Modulus de deux manières:

télécharger le fichier ZIP du projet à l'aide du tableau de bord
déploiement à partir de la ligne de commande à l'aide de Modulus CLI

Je vais continuer avec l'option en ligne de commande, car l'autre est facile à faire. Tout d’abord, installez Modulus CLI:

npm install -g module

Accédez au dossier de votre projet et exécutez la commande suivante pour vous connecter à Modulus..

login module

Lorsque vous exécutez la commande ci-dessus, vous serez invité à entrer un nom d'utilisateur et un mot de passe:

Si vous avez créé un compte en utilisant GitHub, vous pouvez utiliser le --github option.

module de connexion --github

Vous êtes maintenant connecté à Modulus et il est temps de créer un projet. Utilisez la commande suivante pour créer un projet:

projet de module créer "chat en temps réel"

Lorsque vous exécutez cette fonction, le programme d'exécution vous sera demandé. Sélectionnez la première option, Node.js, et la seconde vous demandera la taille du servo et vous pourrez la conserver par défaut..

Nous avons créé un projet et cette fois-ci, nous allons déployer notre projet actuel vers Modulus. Exécutez la commande suivante pour envoyer le projet actuel au Chat en temps réel projet du côté du module.

module déployer

Il déploiera votre projet et vous obtiendrez l'URL de votre projet en cours à la fin du message de déploiement réussi:

Discussion en temps réel en cours d'exécution sur realtime-chat-46792.onmodulus.net

Comme vous pouvez le constater, le déploiement sur Modulus est très simple!

Modulus CLI a des commandes très utiles à utiliser lors du déploiement de votre projet ou lors de l'exécution. Par exemple, pour conserver les journaux de votre projet en cours, vous pouvez utiliser module de journaux de projet queue, créer une base de données MongoDB module mongo créer , définir une variable d'environnement module env set , etc. Vous pouvez voir une liste complète des commandes en utilisant l'aide de Modulus.

Conclusion

L'objectif principal de ce didacticiel était de vous montrer comment créer une application de discussion en temps réel avec Node.js, Socket.IO et MongoDB. Pour exécuter un projet en production, Modulus est utilisé en tant que fournisseur PaaS. Modulus présente des étapes très simples pour le déploiement et dispose également d'une base de données interne (MongoDB) pour nos projets. À côté de cela, vous pouvez utiliser des outils très utiles dans le tableau de bord de Modulus, tels que les journaux, les notifications, la mise à l'échelle automatique, l'administration de base de données, etc..

Pour vous inscrire à Modulus, cliquez ici et recevez 10 $ supplémentaires exclusivement pour être un lecteur Tuts +. Utiliser le code promo ModulusChat10.

Pour plus d'informations sur l'offre entreprise Modulus, cliquez ici..

Code