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
- Baixe e instale o Node.js. Selecione e personalize o sistema operacional que está usando.
- 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”.
- 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"
}
}
- 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
- 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);
})
});
- Em seguida, abra novamente o CMD e digite o comando “server node.js”. Se tudo estiver certo, a aparência será a seguinte.
- 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>
- 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.
- 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…