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
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.
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.
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.
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><span>npm install --save socket.io</span>
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.
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>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>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.
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.
Vous pouvez redéployer à Azure en suivant les tutoriels passés (comme la partie 2).
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.
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.
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 .
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.
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.
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.
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.
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.
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.
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.
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.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
