Crie aplicativos em tempo real com o Nodes.js

O Node.js é um ambiente de tempo de execução de código aberto e multiplataforma para JavaScript. Com o Node.js, podemos executar código JavaScript em qualquer lugar, não apenas no ambiente do navegador.

Node.js foi criado e apresentado pela primeira vez para usuários de sistemas Linux em 2009. O Node.js foi desenvolvido por Ryan Dahl e patrocinado pela Joyent, a empresa para a qual ele trabalha.

Com o Node.js, podemos criar aplicativos em tempo real facilmente. Como???

Neste artigo, criaremos um aplicativo de eleição para escolher o presidente, seja o presidente da classe, o presidente da RT?RW ou qualquer outro. Os resultados da eleição serão exibidos em tempo real, onde cada membro que fornecer a opção atualizará todas as páginas de resultados da eleição que estão sendo abertas pelos usuários.

Outros artigos interessantes

Criação de aplicativos em tempo real em etapas raras com o Node.j

  1. Baixe e instale o Node.js. Selecione e personalize o sistema operacional que está usando.
  2. Crie uma pasta vazia para salvar o projeto. Essa pasta será usada para proteger o node scripts.js e também como a raiz do nosso projeto. Por exemplo, criamos uma pasta com o nome “bardimin” no diretório “C”.
  3. Crie um arquivo com o nome “package.json” em “C:bardimin” e copie o seguinte 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. Em seguida, abra o comando promt/CMD e vá para “C:bardimin”. Digite o seguinte comando
npm install

Quando o processo for concluído, a estrutura do diretório será vista como a imagem a seguir

nodejs 01
  1. Na próxima etapa, crie um arquivo “server.js” na pasta que você criou e copie o seguinte 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. Em seguida, abra novamente o CMD e digite o comando “server node.js”. Se tudo estiver certo, a aparência será a seguinte.
nodejs 02
  1. A etapa final é criar um arquivo “index.html”, ainda na mesma pasta, e copiar o seguinte 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. A criação do aplicativo está concluída. Agora é hora de testar se o aplicativo já está em execução.

Teste de aplicativos

  • Reative o servidor como na etapa 6, com o comando “server node.js” no CMD.
  • Em seguida, abra o navegador e acesse o URL “http://localhost:3000/”.
  • Reabra a url “http://localhost:3000/” em uma nova guia ou em outro navegador.
nodejs 03
  • Você verá que, quando alguém enviar dados, todas as janelas abertas serão atualizadas automaticamente. E no console CMD você pode criar notificações conforme necessário.

Obrigado por ler… Que seja útil…

Últimos artigos

Artigos Relacionados