Cree aplicaciones en tiempo real con Nodes.js

Node.js es un entorno de ejecución de código abierto y multiplataforma para JavaScript. Con Node.js podemos ejecutar código JavaScript en cualquier lugar, no solo limitado al entorno del navegador.

Node.js fue creado e introducido por primera vez para usuarios en sistemas Linux en 2009. Node.js fue desarrollado por Ryan Dahl y patrocinado por Joyent, la empresa para la que trabaja.

Con Node.js podemos crear aplicaciones en tiempo real fácilmente. ¿Cómo?

En este artículo, vamos a hacer una aplicación de elección para elegir al presidente, puede ser el presidente de la clase, el presidente de RT?RW o lo que sea. Los resultados de las elecciones aparecerán en tiempo real, donde cada miembro que proporcione la opción actualizará todas las páginas de resultados de las elecciones que estén siendo abiertas por los usuarios.

Otros artículos interesantes

Creación de aplicaciones en tiempo real con Node.j

  1. Descarga e instala Node.js. Selecciona y personaliza el SO que estés utilizando.
  2. Crear una carpeta vacía para guardar el proyecto. Esta carpeta la utilizaremos para guardar scripts.js de node y también como raíz de nuestro proyecto. Por ejemplo, creamos una carpeta con el nombre «bardimin» en la inmersión «C».
  3. Crea un archivo con el nombre «package.json» en «C:bardimin» y copia el siguiente código
{
  "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. A continuación, abra el promt/CMD y vaya a «C:bardimin». Escribe el siguiente comando
npm install

Una vez finalizado el proceso, la estructura de directorios se verá como en la siguiente imagen

nodejs 01
  1. Siguiente paso, crea un archivo «server.js» en la carpeta que has creado y copia el siguiente código:
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. A continuación, vuelve a abrir el CMD y escribe el comando «server node.js». Si todo es correcto, se verá así.
nodejs 02
  1. El último paso es crear un archivo «index.html», siempre en la misma carpeta y copiar el siguiente código
<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 creación de la aplicación se ha completado. Ahora es el momento de probar si la aplicación ya se está ejecutando.

Pruebas de aplicaciones

  • Reactive el servidor como en el paso 6, con el comando «server node.js» en el CMD.
  • A continuación, abra su navegador y acceda a la URL «http://localhost:3000/».
  • Vuelva a abrir la URL «http://localhost:3000/» en una nueva pestaña o en otro navegador.
nodejs 03
  • Verás que cuando uno envía datos, todas las ventanas abiertas se actualizan automáticamente. Y en la consola CMD puedes crear las notificaciones que necesites.

Gracias por leer… Que le sea útil…

Artículos más recientes

Artículos Relacionados