More

    Créer des applications en temps réel avec Nodes.js

    Node.js est un environnement d’exécution open-source et multiplateforme pour JavaScript. Avec Node.js, nous pouvons exécuter du code JavaScript n’importe où, et pas seulement dans l’environnement du navigateur.

    Node.js a été créé et introduit pour la première fois pour les utilisateurs de systèmes Linux en 2009. Node.js a été développé par Ryan Dahl et sponsorisé par Joyent, la société pour laquelle il travaille.

    Avec Node.js, nous pouvons créer des applications en temps réel facilement. Comment ?

    Dans cet article, nous allons créer une application d’élection pour choisir le président, qu’il s’agisse du président de la classe, du président de RT?RW ou autre. Les résultats de l’élection apparaîtront en temps réel, où chaque membre qui fournit l’option mettra à jour toutes les pages de résultats d’élection qui sont ouvertes par les utilisateurs.

    Création d’applications en temps réel avec Node.j

    1. Téléchargez et installez Node.js. Sélectionnez et personnalisez le système d’exploitation que vous utilisez.
    2. Créez un dossier vide pour enregistrer le projet. Ce dossier nous servira à sécuriser les scripts.js de node et également de racine à notre projet. Par exemple, nous créons un dossier avec le nom « bardimin » sur la plongée « C ».
    3. Créez un fichier nommé « package.json » sur « C:bardimin » et copiez le code suivant
    {
  "name": "Belajar_aplikasi_realtime",
  "description": "Learn real-time applications with Nodes.JS",
  "version": "1.0.0",
  "license": "MIT",
  "repository": "https://github.com/",
  "dependencies": {
    "express": "latest",
    "socket.io": "latest"
  }
}
    1. Ouvrez ensuite la commande promt/CMD et allez à « C:bardimin ». Tapez la commande suivante
    npm install

    Une fois le processus terminé, la structure des répertoires se présente comme suit

    nodejs 01
    1. Ensuite, créez un fichier « server.js » dans le dossier que vous avez créé et copiez le code suivant :
    var app = require("express")();
var http = require('http'). Server(app);
var io = require("socket.io")(http);

Listening port
http.listen(3000, function () {
    console.log("Listening on 3000");
});

html file
app.get("/", function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

Global Variable
const myData = {akbar: 0, goldie: 0};

/* This is auto initiated event when Client connects to Your Machien.  */
io.on("connection", (socket) => {
    console.log("A user is connected");
    socket.emit('newData', myData);
    socket.on('addData', (data) => {
        if (data === "akbar") {
            myData.akbar++;
        } else {
            myData.goldie++;
        }
        io.emit('newData', myData);
    })
});
    1. Ensuite, vous rouvrez le CMD et tapez la commande « server node.js ». Si tout va bien, cela ressemblera à ceci.
    nodejs 02
    1. La dernière étape consiste à créer un fichier « index.html », toujours dans le même dossier, et à y copier le code suivant
    <html>
<head>
    <title>Chairman's election</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
    <script>
        $(document).ready(function () {
            const socket = io();
            socket.on('newData', (data) => {
                $("#pilihAkbr").text(data.akbar);
                $("#pilihGoldie").text(data.goldie);
            });
            $("#submit").click(() => {
                socket.emit('addData', $("#calon").val());
            });
        });
    </script>
</head>
<body>
<div style="width: 400px;margin:auto;text-align: center">
    <blockquote><b>Chairman's election</b></blockquote>
    <div>
        <table width="100%">
            <tr>
                <th>Candidates for Chairman of</th>
                <th>the Voting Results</th>
            </tr>
            <tr>
                <td>Akbar</td>
                <td id="pilihAkbr">0</td>
            </tr>
            <tr>
                <td>Goldie</td>
                <td id="pilihGoldie">0</td>
            </tr>
        </table>
    </div>
    <blockquote>
        <b>Choose your candidate:</b>
        <select id="calon" name="calon">
            <option value="akbar">Akbar
            <option value="goldie">Goldie
        </select>
        <blockquote>
            <button type="button" id="submit">Submit</button>
        </blockquote>
    </blockquote>
</div>
</body>
</html>
    1. La création de l’application est terminée. Il est maintenant temps de tester si l’application fonctionne déjà.

    Autres articles intéressants

    Test d’application

    • Réactivez le serveur comme à l’étape 6, avec la commande « server node.js » sur le CMD.
    • Ouvrez ensuite votre navigateur et accédez à l’URL « http://localhost:3000/ ».
    • Rouvrir l’url « http://localhost:3000/ » dans un nouvel onglet ou dans un autre navigateur.
    nodejs 03
    • Vous verrez que lorsqu’une personne soumet des données, toutes les fenêtres ouvertes sont automatiquement mises à jour. Dans la console CMD, vous pouvez créer des notifications selon vos besoins.

    Merci de votre lecture… Puisse-t-elle être utile…

    Dernières articles

    Articles Connexes