Construisez une application Web de Chatroom à propulsion Node.js: Node, MongoDB et socket

Les plats clés

• Le tutoriel fournit un guide étape par étape pour construire une application Web de chat en temps réel à l'aide de Node.js, MongoDB et Socket.io. Le salon de discussion sera entièrement déployé dans le cloud.
• Le tutoriel explique comment utiliser socket.io pour créer des applications de communication basées sur des événements bidirectionnelles en temps réel. Il simplifie considérablement le processus d'utilisation de WebSockets.
• Le tutoriel montre comment enregistrer un utilisateur qui rejoint et quitte le salon de discussion et comment diffuser un message reçu sur le canal de chat à toutes les autres connexions sur le socket.
• Le tutoriel montre comment enregistrer les messages de chat dans une base de données MongoDB et comment émettre les 10 derniers messages reçus pour donner un contexte à chaque nouvel utilisateur qui rejoint le salon.
• Le didacticiel se termine par un système de chat capable de diffuser un message reçu via WebSockets à tous les autres clients connectés. Le système enregistre le message à la base de données et récupère les 10 derniers messages pour chaque nouvel utilisateur.

Cet article fait partie d'une série Web Dev Tech de Microsoft. Merci de soutenir les partenaires qui rendent le point de point possible.

Cette série de didacticiels Node.js vous aidera à créer une application Web de chat en temps réel Node.js entièrement déployée dans le cloud. Dans cette série, vous apprendrez à configurer Node.js sur votre machine Windows (ou simplement apprendre les concepts si vous êtes sur Mac), comment développer un frontage Web avec Express, comment déployer une application Node.js Express pour Azure, comment utiliser socket.io pour ajouter une couche en temps réel, et comment déployer tout ensemble.

Le tutoriel utilisera le plug-in Visual Studio en option et les outils Node.js pour Visual Studio comme environnement de développement. J'ai fourni des liens vers des téléchargements gratuits des deux outils. Ceci est un article de niveau débutant à intermédiaire - vous devez connaître HTML5 et JavaScript.

Partie 1 - Introduction à Node.js

Partie 2 - Bienvenue à l'expression avec Node.js et Azure

Partie 3 - Construire un backend avec Node.js, Mongo et Socket.io

Partie 4 - Construire une interface utilisateur de discussion avec bootstrap

Partie 5 - Connecter le salon de discussion avec WebSockets

Partie 6 - La finale et le débogage des applications Remote Node.js

Partie 3 - Construire un backend de salle de discussion avec Node.js, socket.io et mongo

Bienvenue dans la partie 3 de la série de didacticiels Node.js pratique: Créez une application Web de Chatroom à propulsion Node.js. Dans cet épisode, je vais vous montrer comment utiliser votre application Node.js express exprimée pour créer un backend de chat avec la prise en charge de WebSocket.

Que sont les lignes WebSockets? Qu'est-ce que Socket.io?

WebSocket est un protocole conçu pour permettre aux applications Web de créer un canal complet sur TCP (c'est-à-dire avoir une communication bidirectionnelle) entre le navigateur Web et un serveur Web. Il est entièrement compatible avec HTTP et utilise le port TCP numéro 80. WebSocket a permis aux applications Web de devenir en temps réel et de prendre en charge les interactions avancées entre le client et le serveur. Il est pris en charge par plusieurs navigateurs, dont Internet Explorer, Google Chrome, Firefox, Safari et Opera.

Socket.io est une bibliothèque JavaScript et un module Node.js qui vous permet de créer des applications de communication basées sur des événements bidirectionnelles en temps réel simplement et rapidement. Il simplifie considérablement le processus d'utilisation de WebSockets. Nous utiliserons Socket.io v1.0 pour faire de notre application de chat.

ajout de socket.io à package.json

package.json est un fichier qui contient diverses métadonnées pertinentes pour le projet, y compris ses dépendances. NPM peut utiliser ce fichier pour télécharger les modules requis par le projet. Jetez un œil à cette explication interactive de package.json et de ce qu'elle peut contenir.

Ajoutons Socket.io au projet en tant que dépendance. Il y a deux façons de le faire.

1. Si vous avez suivi la série de didacticiels et que vous avez un projet dans la configuration Visual Studio, cliquez avec le bouton droit sur la partie NPM du projet et sélectionnez «Installer de nouveaux packages NPM…»

Une fois la fenêtre ouverte, recherchez «socket.io», sélectionnez le résultat supérieur et cochez la case «Ajouter à package.json». Cliquez sur le bouton «Installer le package». Cela installera socket.io dans votre projet et l'ajoutera au fichier package.json.

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. Si vous êtes sur OS X ou Linux, vous pouvez obtenir la même action que celle ci-dessus en exécutant la commande suivante dans la racine de votre dossier de projet.

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

ajoutant socket.io à app.js

L'étape suivante consiste à ajouter socket.io à app.js. Vous pouvez y parvenir en remplaçant le code suivant…

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

… avec:

<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>

Cela capturera le serveur HTTP dans une variable appelée servir et passera ce serveur HTTP afin que le module Socket.io puisse lui attacher. Le dernier bloc de code prend la variable de service et exécute la fonction d'écoute qui démarre le serveur HTTP.

Enregistrer un utilisateur qui rejoint et laissant

Idéalement, nous voulons enregistrer un utilisateur rejoignant le salon de discussion. Le code suivant accomplit qu'en accrochant une fonction de rappel à exécuter sur chaque événement de connexion via WebSocket à notre serveur HTTP. Dans la fonction de rappel, nous appelons Console.log pour enregistrer un utilisateur connecté. Nous pouvons ajouter ce code après avoir appelé Serv.Listen.

<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>

Pour faire de même pour un utilisateur déconnecté, nous devons connecter l'événement de déconnexion pour chaque socket. Ajoutez le code suivant à l'intérieur après le journal de la console du bloc de code précédent.

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

Enfin, le code ressemblera à ceci:

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

diffuser un message reçu sur la chaîne de chat

socket.io nous donne une fonction appelée Emit pour envoyer des événements.

Tout message reçu sur la chaîne de chat sera diffusé à toutes les autres connexions sur cette prise en appelant Emit avec l'indicateur de diffusion dans le rappel.

<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>

Enfin, le code ressemblera à ceci:

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

Enregistrer les messages dans une base de données NOSQL

La salle de discussion doit enregistrer les messages de chat dans un magasin de données simple. Normalement, il existe deux façons d'économiser dans une base de données dans Node; Vous pouvez utiliser un pilote spécifique à la base de données ou vous pouvez utiliser un ORM. Dans ce tutoriel, je vais vous montrer comment enregistrer les messages sur MongoDB. Bien sûr, vous pouvez utiliser n'importe quelle autre base de données que vous aimez, y compris les bases de données SQL comme PostgreSQL ou MySQL.

Vous devez vous assurer que vous avez un MongoDB à vous connecter. Vous pouvez utiliser un service tiers pour héberger votre MongoDB tel que MongoHQ ou Mongolab. Jetez un œil à ce tutoriel pour voir comment vous pouvez créer un MongoDB en utilisant le module complémentaire Mongolab à Azure. Vous pouvez arrêter de lire lorsque vous arrivez à la section «Créer l'application», assurez-vous simplement d'enregistrer le Mongolab_uri quelque part où vous pouvez accéder facilement plus tard.

Une fois que vous avez créé un MongoDB et que vous avez le Mongolab_uri pour la base de données - sous les informations de connexion que vous avez copiées dans votre presse-papiers - vous voudrez vous assurer que l'URI est disponible pour l'application. Il n'est pas la meilleure pratique d'ajouter des informations sensibles telles que cet URI dans votre code ou dans un fichier de configuration dans votre outil de gestion de code source. Vous pouvez ajouter la valeur à la liste des chaînes de connexion dans le menu de configuration de votre application Web Azure (comme dans le tutoriel que vous avez utilisé) ou vous pouvez l'ajouter à la liste des paramètres de l'application (avec nom CustomConnstr_mongolab_uri). Sur votre machine locale, vous pouvez l'ajouter aux variables d'environnement avec le nom CustomConnstr_mongolab_uri et la valeur de l'uri.

L'étape suivante consiste à ajouter la prise en charge de MongoDB à notre projet. Vous pouvez le faire en ajoutant la ligne suivante à l'objet de dépendances dans package.json. Assurez-vous d'enregistrer vos modifications dans le fichier.

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

Cliquez avec le bouton droit sur la partie NPM du projet dans l'explorateur de solutions pour révéler le menu contextuel-cliquez avec le bouton droit. Cliquez sur «Installer les packages manquants» dans le menu de contenu pour installer le package MongoDB afin qu'il puisse être utilisé comme module.

Nous voulons importer ce module pour pouvoir utiliser l'objet client MongoDB dans app.js. Vous pouvez ajouter les lignes de code suivantes après les premiers appels de fonction (''), tels que la ligne 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>

Nous voulons nous connecter à la base de données à l'aide de l'URI que nous avons dans la variable d'environnement CustomConnstr_Mongolab_uri. Une fois connecté, nous voulons insérer le message de chat reçu dans la connexion de socket.

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

Comme vous pouvez le voir dans le code ci-dessus, nous utilisons l'objet process.env pour obtenir la valeur de variable d'environnement. Nous entrons dans une collection dans la base de données et nous appelons la fonction d'insert avec le contenu dans un objet.

Chaque message est maintenant enregistré dans notre base de données MongoDB.

émettant les 10 derniers messages reçus

Bien sûr, nous ne voulons pas que nos utilisateurs se sentent perdus une fois en train de rejoindre le salon de discussion, nous devons donc nous assurer d'envoyer les 10 derniers messages reçus au serveur, donc à tout le moins, nous pouvons leur donner un contexte. Pour ce faire, nous devons connecter MongoDB. Dans ce cas, je m'abstiens d'envelopper tout le code de socket avec une connexion à la base de données afin que je puisse toujours faire fonctionner le serveur même s'il perd la connexion de la base de données.

Nous voulons également trier et limiter ma requête aux 10 derniers messages, nous utiliserons le MongoDB généré _ID car il contient un horodatage (bien que dans des situations plus évolutives, vous voudrez créer un horodatage dédié dans le message de chat ) Et nous appellerons la fonction limite pour limiter les résultats à seulement 10 messages.

Nous diffuserons les résultats de MongoDB afin que je puisse les émettre dès que possible dans la salle de discussion à leur arrivée.

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

Le code ci-dessus fait le travail comme expliqué dans les paragraphes précédents.

Déploiement sur Azure

Vous pouvez redéployer à Azure en suivant les tutoriels passés (comme la partie 2).

Conclusion

En conclusion, nous avons un système de discussion capable de diffuser un message reçu via WebSockets à tous les autres clients connectés. Le système enregistre le message à la base de données et récupère les 10 derniers messages pour donner un contexte à chaque nouvel utilisateur qui rejoint la salle de discussion.

Restez à l'écoute pour la partie 4!

Partie 4 - La construction d'une interface utilisateur de discussion avec bootstrap est là. Vous pouvez rester à jour sur cet article et dans d'autres articles en suivant mon compte Twitter.

Plus d'apprentissage pour le nœud sur azure

Pour un apprentissage plus approfondi sur le nœud, mon cours est disponible ici sur Microsoft Virtual Academy.

ou quelques vidéos de format plus court sur des sujets de nœuds similaires:

• Série en six parties: création d'applications avec node.js

• Une promenade à travers le nœud (coding4fun)

Cet article fait partie de la série Web Dev Tech de Microsoft. Nous sommes ravis de partager Project Spartan et son nouveau moteur de rendu avec vous. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows sur moderne.ie .

Questions fréquemment posées (FAQ) sur la création d'une application Web de discussion alimentée Node.js

Comment puis-je assurer la sécurité de mon application Web de chat construite avec Node.js, MongoDB et Socket.io?

La sécurité est un aspect crucial de toute application Web. Pour une application Web de chat construite avec Node.js, MongoDB et Socket.io, vous pouvez implémenter plusieurs mesures de sécurité. Tout d'abord, utilisez HTTPS au lieu de HTTP pour vous assurer que toutes les communications entre votre serveur et les clients sont cryptées. Deuxièmement, validez toutes les données entrantes pour empêcher les attaques d'injection SQL. Troisièmement, utilisez JWT (jetons Web JSON) pour l'authentification des utilisateurs. Enfin, mettez régulièrement à mettre à jour toutes vos dépendances vers leurs dernières versions pour éviter les vulnérabilités de sécurité potentielles.

Puis-je intégrer d'autres bases de données avec Node.js pour mon application Web de chat?

Oui, Node.js est Très flexible et peut s'intégrer à diverses bases de données. Bien que MongoDB soit un choix populaire en raison de son évolutivité et de sa flexibilité, vous pouvez également utiliser d'autres bases de données comme MySQL, PostgreSQL ou SQLite en fonction de vos besoins spécifiques. Le choix de la base de données dépend en grande partie des exigences de données de votre application et des fonctionnalités spécifiques de la base de données.

Comment puis-je mettre à l'échelle mon application Web de chat Node.js pour gérer plus d'utilisateurs?

Pour évoluer votre échelle Application Web de Chatroom Node.js, vous pouvez utiliser un équilibreur de chargement pour distribuer le trafic entrant sur plusieurs serveurs. Vous pouvez également utiliser le module de clustering dans Node.js pour créer des processus enfants qui partagent tous les ports du serveur. De plus, envisagez d'utiliser une base de données NOSQL comme MongoDB, qui peut facilement évoluer horizontalement pour gérer plus de données.

Puis-je utiliser d'autres technologies en temps réel au lieu de Socket.io pour mon application Web de chat?

Oui, il existe plusieurs autres technologies en temps réel que vous pouvez utiliser au lieu de socket.io. Il s'agit notamment de WebSockets, d'événements de serveur (SSE) et de services tiers comme Pusher ou Firebase. Chacune de ces technologies a ses propres forces et faiblesses. est une partie essentielle du processus de développement. Pour une application Web Node.js Chatroom, vous pouvez utiliser des frameworks de test comme Mocha ou Jest pour écrire des tests unitaires et des tests d'intégration. Vous pouvez également utiliser des outils comme Postman ou Insomnia pour les tests API. De plus, envisagez d'utiliser des outils de test de bout en bout comme Cypress ou Puppeteer pour simuler les interactions utilisateur et assurez-vous que votre application fonctionne comme prévu.

Comment puis-je déployer mon application Web de Chatroom Node.js sur un serveur en direct?

Il existe plusieurs plates-formes qui vous permettent de déployer votre application Web de Chatroom Node.js. Il s'agit notamment de Heroku, AWS, Google Cloud et Azure. Chaque plate-forme a son propre processus de déploiement, mais généralement, vous devrez créer un compte, configurer un nouveau projet et suivre les instructions de la plate-forme pour déployer votre application.

Puis-je ajouter une prise en charge multimédia à mon application Web de Chatroom Node.js?

Oui, vous pouvez ajouter une prise en charge multimédia à votre application Web Node.js Chatroom. Cela peut être fait en intégrant des services tiers comme Cloudinary ou AWS S3 pour stocker et récupérer des fichiers multimédias. Vous pouvez également utiliser socket.io pour envoyer et recevoir des données multimédias en temps réel.

Comment puis-je ajouter l'authentification de l'utilisateur à mon application Web de Chatroom Node.js?

L'authentification de l'utilisateur est une cruciale fonctionnalité pour toute application Web de chat. Pour une application Node.js, vous pouvez utiliser Passport.js, un middleware populaire pour gérer l'authentification des utilisateurs. Il prend en charge diverses stratégies d'authentification, y compris le nom d'utilisateur et le mot de passe locaux, OAuth et JWT.

Puis-je utiliser d'autres frameworks frontal avec Node.js pour mon application Web de chat?

Oui, Node.js est une technologie backend et peut fonctionner avec n'importe quel cadre ou bibliothèque de frontend. Alors que le tutoriel utilise un HTML et CSS simples, vous pouvez utiliser des frameworks de frontend comme React, Angular ou Vue.js pour créer des interfaces utilisateur plus complexes et interactives.

Comment puis-je gérer les erreurs dans mon Node.js Chatroom Web de Chatroom. App?

La gestion des erreurs est une partie importante de toute application Web. Dans Node.js, vous pouvez utiliser le middleware pour gérer les erreurs. Cela implique la création d'une fonction spéciale qui prend quatre arguments: erreur, demande, réponse et ensuite. Vous pouvez ensuite utiliser cette fonction pour enregistrer les erreurs, envoyer des réponses d'erreur au client, ou même rediriger les utilisateurs vers une page d'erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!