For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/fr/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/fr/llms-full.txt, and this page is available as Markdown at https://docs.ovhcloud.com/fr/guides/public-cloud/databases/mongodb-tuto-connect-nodejs-to-managed-mongodb.md.

Développer et connecter une application Node.js à Public Cloud Databases for MongoDB

Voir en Markdown

Découvrez comment créer une application NodeJS connectée à un service MongoDB managé OVHcloud

Objectif

Dans ce tutoriel, nous allons utiliser la plateforme Node.js pour créer une application de chat en temps réel qui envoie et affiche des messages à un destinataire instantanément, sans rechargement de page. Nous utiliserons le framework JavaScript Express.js ainsi que les bibliothèques Mongoose et Socket.io pour y parvenir.

Warning

OVHcloud fournit des services dont vous êtes responsable de la configuration et de la gestion. Vous êtes donc responsable de leur bon fonctionnement.

Ce tutoriel est conçu pour vous aider autant que possible dans les tâches courantes. Si vous rencontrez des difficultés pour réaliser ces actions, veuillez contacter un prestataire de services spécialisé et/ou en discuter avec notre communauté d'utilisateurs. OVHcloud ne peut pas vous fournir d'assistance technique à ce sujet.

Prérequis

En pratique

Créer une application de chat simple

Notre application doit permettre à plusieurs utilisateurs de discuter ensemble. Les messages doivent se mettre à jour sans rechargement de la page. Pour plus de simplicité, nous éviterons l'authentification.

Nous pouvons commencer par créer un nouveau répertoire de projet et nous y déplacer. Nous pouvons ensuite initialiser notre projet avec la commande suivante :

npm init

Cela nous invitera à saisir des informations sur notre projet.

Après cela, un fichier package.json sera créé :

{
  "name": "demo-chat-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Notre répertoire d'application est maintenant prêt.

La première chose à faire est de créer un serveur. Pour cela, nous allons utiliser un framework appelé Express.

Express.js

Express.js, ou simplement Express, est un framework d'application web pour Node.js. Express fournit un ensemble robuste de fonctionnalités pour les applications web et mobiles ainsi qu'une fine couche de fonctionnalités fondamentales, sans masquer les fonctionnalités de Node.js.

Installez Express.js à l'aide de la commande suivante :

npm install -s express

Dans le fichier package.json, une nouvelle ligne sera ajoutée :

"dependencies": {  
  "express": "4.16.3"
}

Ensuite, nous allons créer un fichier server.js.

Dans ce fichier, nous devons importer Express et créer une référence à une variable à partir d'une instance d'Express. Des contenus statiques comme du HTML, du CSS ou du JavaScript peuvent être servis avec Express.js :

var express = require('express'),
    app = express();

Et nous pouvons commencer à écouter un port avec le code :

app.listen(3000, () => {  
 console.log('server is running on port', server.address().port);  
});

Nous devons maintenant créer un fichier HTML, index.html, qui affichera notre interface.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale="1.0"">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My First Node App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
    integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
    integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
    integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
    crossorigin="anonymous"></script>
</head>

<body>
  <div className="container">
    <div className="jumbotron">
      <h1 className="display-4">Send Message</h1>
      <br />
      <input id="name" className="form-control" placeholder="Name">
      <br />
      <textarea id="message" className="form-control" placeholder="Your Message Here"></textarea>
      <br />
      <button id="send" className="btn btn-success">Send</button>
    </div>
    <div id="messages">

    </div>
  </div>
  <script></script>
</body>

</html>

Notez que la balise vide <script></script> sera l'endroit où nous écrirons le code JavaScript côté client.

Pour indiquer cela à Express, nous allons utiliser un fichier statique. Nous ajoutons une nouvelle ligne dans server.js :

app.use(express.static(__dirname));

Nous pouvons exécuter server.js avec la commande :

node ./server.js

Ou avec un paquet appelé nodemon, afin que les modifications apportées au code soient automatiquement détectées. Téléchargez nodemon avec la commande :

npm install -g nodemon

Le -g signifie global, afin qu'il soit accessible dans tous les projets.

Exécutez le code avec la commande :

nodemon ./server.js

Si vous accédez à localhost:3000, nous pouvons voir le fichier index :

Formulaire de l'application de chat NodeJS

Maintenant que notre serveur est opérationnel, nous devons créer notre base de données. Pour cette application, nous utiliserons une base de données No-SQL avec MongoDB. Notre base de données contiendra une seule collection appelée messages, avec les champs name et message.

Pour connecter cette base de données à l'application, nous utiliserons un autre paquet appelé Mongoose.

Mongoose

Mongoose est un outil de modélisation d'objets MongoDB conçu pour fonctionner dans un environnement asynchrone.

Mongoose peut être installé avec la commande :

npm install -s mongoose

Dans server.js, nous allons importer Mongoose :

var mongoose = require('mongoose');

Nous allons assigner une variable, l'URI de service de notre instance de base de données MongoDB.

var dbUrl = 'mongodb+srv://`<username>`:<password>@mongodb-e49d02ee-o2626ab53.database.cloud.ovh.net/admin?replicaSet=replicaset'

Mongoose se connectera à la base de données MongoDB avec la méthode connect :

mongoose.connect(dbUrl , (err) => {   
   console.log('mongodb connected',err);  
})

Et nous allons définir notre modèle de message ainsi :

var Message = mongoose.model('Message',{ name : String, message : String})

Nous pouvons maintenant implémenter la logique du chat, mais avant cela, il reste un paquet à ajouter.

Body-Parser

Body-Parser extrait l'intégralité du corps d'une requête entrante et l'expose sur req.body. Ce middleware faisait auparavant partie d'Express.js, mais doit maintenant être installé séparément.

Installez-le avec la commande suivante :

npm install -s body-parser

Ajoutez le code suivant à server.js :

var bodyParser = require('body-parser')  
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({extended: false}))

Routage

Le routage désigne la manière dont les points de terminaison (URI) d'une application répondent aux requêtes des clients. Vous définissez le routage à l'aide des méthodes de l'objet app d'Express, qui correspondent aux méthodes HTTP : app.get() pour traiter les requêtes GET et app.post() pour traiter les requêtes POST.

Ces méthodes de routage spécifient une fonction de rappel (parfois appelée « fonction de traitement ») appelée lorsque l'application reçoit une requête vers la route (point de terminaison) et la méthode HTTP spécifiées. En d'autres termes, l'application « écoute » les requêtes correspondant aux routes et méthodes spécifiées et, lorsqu'elle détecte une correspondance, elle appelle la fonction de rappel spécifiée.

Nous devons maintenant créer deux routes pour les messages afin que notre chat fonctionne.

Dans server.js :

  • Get récupérera tous les messages de la base de données :
app.get('/messages', (req, res) => {
  Message.find({},(err, messages)=> {
    res.send(messages);
  })
})
  • Post enverra les nouveaux messages créés par l'utilisateur à la base de données :
app.post('/messages', (req, res) => {
  var message = new Message(req.body);
  message.save((err) =>{
    if(err)
      sendStatus(500);
    res.sendStatus(200);
  })
})

Pour connecter ces routes au front-end, nous devons ajouter le code suivant dans la balise script côté client, dans index.html :

$(() => {
   $("#send").click(() => {
      sendMessage({ name: $("#name").val(), message: $("#message").val() });
   })
   getMessages()
})

function addMessages(message) {
   $("#messages").append(`<h4> ${message.name} </h4> <p> ${message.message} </p>`)
}

function getMessages() {
   $.get('http://localhost:3000/messages', (data) => {
      data.forEach(addMessages);
   })
}

function sendMessage(message) {
   $.post('http://localhost:3000/messages', message)
}

Ici, sendMessage est utilisé pour appeler la route post des messages et enregistrer un message envoyé par l'utilisateur. Le message est créé lorsqu'un utilisateur clique sur le bouton d'envoi.

De même, getMessage est utilisé pour appeler la route get des messages. Cela récupérera tous les messages enregistrés dans la base de données, qui seront ajoutés au div des messages.

Application de chat NodeJS - premier utilisateur

Le seul problème restant est que le client n'a aucun moyen de savoir si le serveur a été mis à jour. Ainsi, à chaque envoi d'un message, nous devons actualiser la page pour voir les nouveaux messages.

Pour résoudre ce problème, nous pouvons ajouter un système de notifications push qui enverra des messages du serveur vers le client. En Node.js, nous utilisons socket.io.

Socket.io

Socket.io est une bibliothèque JavaScript pour les applications web en temps réel. Elle permet une communication bidirectionnelle en temps réel entre les clients web et le serveur, et comprend deux parties : une bibliothèque côté client qui s'exécute dans le navigateur et une bibliothèque côté serveur pour Node.js. Socket.io permet une communication événementielle bidirectionnelle en temps réel.

Pour installer socket.io :

npm install -s socket.io

Nous avons également besoin d'un paquet HTTP pour que Socket.io fonctionne :

npm install -s http

Ajoutez le code suivant à server.js :

var http = require('http').Server(app);  
var io = require('socket.io')(http);

Et créez une connexion :

io.on('connection', () =>{  
 console.log('a user is connected')  
})

Dans index.html, ajoutez la balise suivante :

<script src="”/socket.io/socket.io.js”"></script>

Nous devons maintenant créer une action emit lorsqu'un message est créé dans server.js. La route post devient donc :

app.post('/messages', (req, res) => {  
  var message = new Message(req.body);  
  message.save((err) =>{  
    if(err)  
      sendStatus(500);  
      io.emit('message', req.body);
    res.sendStatus(200);  
  })  
})

Et dans la balise script côté client, dans index.html, ajoutez le code suivant :

var socket = io();
socket.on('message', addMessages)

Ainsi, à chaque envoi d'un message, le serveur mettra à jour les messages dans le div des messages.

Application de chat NodeJS - deuxième utilisateur

Bravo ! Vous disposez désormais d'une application de chat nodeJS fonctionnelle, avec des messages stockés sur un cluster MongoDB. Consultez les tutoriels officiels NodeJS pour découvrir d'autres cas d'usage.

Pièces jointes

package.json

{
  "name": "demo-chat-app",
  "version": "1.0.0",
  "description": "demo chat app",
  "main": "index.js",
  "scripts": {
    "test": "jasmine"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mongoose": "^5.7.5",
    "socket.io": "^2.1.1"
  },
  "devDependencies": {
    "jasmine": "^3.1.0",
    "request": "^2.87.0"
  }
}

index.html

<!DOCTYPE html>
<html>

<head>
  <title>My First Node App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
    integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
    integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
    integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
    crossorigin="anonymous"></script>
  <script src="/socket.io/socket.io.js"></script>
</head>

<body>
  <div className="container">
    <div className="jumbotron">
      <h1 className="display-4">Send Message</h1>
      <br />
      <input id="name" className="form-control" placeholder="Name">
      <br />
      <textarea id="message" className="form-control" placeholder="Your Message Here"></textarea>
      <br />
      <button id="send" className="btn btn-success">Send</button>
    </div>
    <div id="messages">

    </div>
  </div>
  <script>
    var socket = io();
    $(() => {
      $("#send").click(() => {
        sendMessage({ name: $("#name").val(), message: $("#message").val() });
      })
      getMessages()
    })

    socket.on('message', addMessages)

    function addMessages(message) {
      $("#messages").append(`<h4> ${message.name} </h4> <p> ${message.message} </p>`)
    }

    function getMessages() {
      $.get('http://localhost:3000/messages', (data) => {
        data.forEach(addMessages);
      })
    }

    function sendMessage(message) {
      $.post('http://localhost:3000/messages', message)
    }
  </script>
</body>

</html>

server.js

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mongoose = require('mongoose');

app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))

var Message = mongoose.model('Message', {
  name: String,
  message: String
})

var dbUrl = 'mongodb+srv://`<username>`:<password>@mongodb-e49d02ee-o2626ab53.database.cloud.ovh.net/admin?replicaSet=replicaset'

app.get('/messages', (req, res) => {
  Message.find({}, (err, messages) => {
    res.send(messages);
  })
})

app.get('/messages/:user', (req, res) => {
  var user = req.params.user
  Message.find({ name: user }, (err, messages) => {
    res.send(messages);
  })
})

app.post('/messages', async (req, res) => {
  try {
    var message = new Message(req.body);
    await message.save()
    console.log('saved');
    var censored = await Message.findOne({ message: 'badword' });
    if (censored)
      await Message.remove({ _id: censored.id })
    else
      io.emit('message', req.body);
    res.sendStatus(200);
  }
  catch (error) {
    res.sendStatus(500);
    return console.log('error', error);
  }
  finally {
    console.log('Message Posted')
  }

})

io.on('connection', () => {
  console.log('a user is connected')
})

mongoose.connect(dbUrl, { useMongoClient: true }, (err) => {
  console.log('mongodb connected', err);
})

http.listen(3000, () => {
  console.log('server is running on port', server.address().port);
});

spec/server.spec.js

var request = require('request')

describe('get messages', () => {
    it('should return 200 Ok', (done) => {
        request.get('http://localhost:3000/messages', (err, res) => {
            expect(res.statusCode).toEqual(200)
            done()
        })
    })
    it('should return a list, thats not empty', (done) => {
        request.get('http://localhost:3000/messages', (err, res) => {
            expect(JSON.parse(res.body).length).toBeGreaterThan(0)
            done()
        })
    })
})

describe('get messages from particular user', () => {
    it('should return 200 Ok', (done) => {
        request.get('http://localhost:3000/messages/Arun', (err, res) => {
            expect(res.statusCode).toEqual(200)
            done()
        })
    })
    it('should return the message of the user', (done) => {
        request.get('http://localhost:3000/messages/Arun', (err, res) => {
            expect(JSON.parse(res.body)[0].name).toEqual('Arun')
            done()
        })
    })
})

spec/support/jasmine.json

{
    "spec_dir": "spec",
    "spec_files": [
        "**/*[sS]pec.js"
    ],
    "helpers": [
        "helpers/**/*.js"
    ],
    "stopSpecOnExpectationFailure": false,
    "random": true
}

Nous voulons vos retours !

Nous serions ravis de répondre à vos questions et apprécions tout retour que vous pourriez nous faire.

Si vous avez besoin d'une formation ou d'une assistance technique pour la mise en oeuvre de nos solutions, contactez votre commercial ou cliquez sur ce lien pour obtenir un devis et demander une analyse personnalisée de votre projet à nos experts de l’équipe Professional Services.

Vous êtes sur Discord ? Rejoignez notre chaîne via https://discord.gg/ovhcloud et interagissez directement avec l’équipe qui développe notre service de bases de données !

Cette page vous a-t-elle aidé ?