Node JS se tornou popular devido a sua facilidade em trabalhar com real-time e baixa performance do sistema, simplesmente por que o protocolo WebSockets utiliza o Javascript.
Com WebSockets, um cliente e um servidor podem “conversar“ entre si em tempo real, como se estivessem realizando uma chamada telefônica. Uma vez conectado, um cliente poderá receber dados do servidor, sem precisar fazer nada. Diferente dos protocolos WEB onde precisam ser atualizados para receber uma nova informação do servidor. Por outro lado, o servidor também poderá receber dados em tempo real do cliente dentro da mesma conexão.
Neste artigo vou mostrar algo muito útil e com muito poder para os dias de hoje que é um painel analítico em tempo real com Node JS, Socket.io e VueJs para monitorar o acesso às páginas do site, semelhante ao Google Analytics.
Descompacte o arquivo real time na sua pasta do node. No meu caso, estou usando ela em /opt/lampp/htdocs/node.
Após descompactar inicialize um novo arquivo package.json via terminal com:
npm init
Após algumas perguntas, ele inicia criará o package.json na raiz da aplicação.
Depois de inicializar o package.json, instale ExpressJs e Socket.io da seguinte forma:
npm install — save express socket.io
Aqui está como a estrutura final do projeto. Vamos construindo essa estrutura conforme avançamos.
Os arquivos e diretórios que valem a pena serem notados são:
/public/directory – Contém nossos ativos estáticos
/js/dashboard.js – Contém o código VueJs e Socket.io para receber e renderizar as estatísticas no painel
/css/dashboard.css – Tem algum estilo básico para o painel
/views/dashboard.html – Contém diretivas HTML e Vue para vinculação e renderização de dados
/views/index.html – É a página que um visitante recebe e contém o código de acompanhamento
app.js – Contém nossa lógica do lado do servidor
config.js – É onde vamos armazenar qualquer assunto de configuração para alterar
Ao longo do tutorial, vou falar da maior parte deles.
Configurando o Node JS e Socket.IO
Nesta seção, vamos configurar a estrutura básica do nosso servidor Node + Socket.io e configurá-la para ouvir as conexões de entrada do soquete.
No arquivo da raiz app.js contém as configurações do lado servidor:
Altere a porta 3000 para a porta que você definiu para o Node Js.
app.set(‘port’, (process.env.PORT || 3000));
O objeto visitorsData armazena as informações coletadas sobre cada usuário e as associará a um ID de soquete exclusivo. Isso servirá como uma maneira exclusiva de identificar a conexão de soquete de um usuário com os dados coletados sobre eles.
É importante ressaltar que você não irá servir todas as páginas acessadas e sim as que estão definidas no app.js, que são:
/
/about
/contact
app.get(‘/dashboard’, function(req, res) {
res.sendFile(path.join(__dirname, ‘views/dashboard.html’));
});
Criando o rastreamento da página
Agora que temos o servidor configurado para escutar conexões de soquete de entrada vamos precisar servir ele com as informações vindas do usuário.
Em /view/index.html você irá precisar instanciar no arquivo a chamada do Soquet.IO, da seguinte forma:
Ele irá apenas pegar os eventos do usuário.
io.on(‘connection’, function(socket) {
if (socket.handshake.headers.host === config.host
&& socket.handshake.headers.referer.indexOf(config.host + config.dashboardEndpoint) > -1) {
io.emit(‘updated-stats’, computeStats());
}
socket.on(‘visitor-data’, function(data) {
visitorsData[socket.id] = data;
io.emit(‘updated-stats’, computeStats());
});
socket.on(‘disconnect’, function() {
delete visitorsData[socket.id];
Agora, sempre que o lado do cliente emite um evento de visitor-data, adicionaremos os dados que capturamos no lado do cliente ao objeto visitorsData. Da mesma forma, quando eles saem da página, o soquete desconectará e acionará um evento de desconexão, no qual removeremos o ID de soquete associado e seus dados do objeto visitorData.
Agora temos um sistema no qual os dados do visitante são adicionados e removidos do objeto visitorsData, dependendo de eles visitarem a nossa página ou a deixarem.
No arquivo config.js há o host e o endpoint do dashboard:
module.exports = {
host: “localhost:3000”,
dashboardEndpoint: “/dashboard”
}
Na instrução if do arquivo app.js, estamos verificando se socket.handshake.headers.host é igual ao host que definimos em nosso arquivo de configuração e que socket.handshake.headers.referer contém localhost: 3000/dashboard. Se a condição for atendida, nós enviaremos os dados para esse soquete, que é o nosso soquete do painel neste caso.
Isso simplesmente evita ter que calcular e enviar os dados toda vez que um novo soquete for criado, seja de nossos visitantes ou de nosso terminal do painel. No arquivo realtime.tar.gz você pode ver o app.js concluído tal como todos os outros arquivos já configurados, restando apenas você instalar o init, express, socket.io e configurar a porta definida no servidor node.
Sobre o painel
Estamos agora na parte final, onde há as configurações do VueJS com o painel dashboard.html.
O arquivo está em /views e é muito simples como pode ver, tirando alguns minutos para analisar o código você já irá ficar familiarizado.
O VueJs é uma biblioteca JavaScript simples e flexível que compartilha algumas semelhanças com o Angular e o React.
O dashboard.js em public/js conterá três propriedades de dados: as páginas, os referenciadores e os usuários ativos, todos os quais o servidor calcula.
var socket = io();
var vm = new Vue({
el: ‘#app’,
data: {
pages: {},
referrers: {},
activeUsers: 0
},
created: function() {
socket.on(‘updated-stats’, function(data) {
this.pages = data.pages;
this.referrers = data.referrers;
this.activeUsers = data.activeUsers;
}.bind(this));
}
});
É criando uma nova conexão de soquete para o servidor na parte superior do arquivo e usando o new Vue() construtor new Vue() para criar uma nova instância do VueJS montada em #app .
Agora, sempre que um evento de estatísticas atualizadas é emitido pelo servidor (informando que um usuário foi adicionado/removido), o manipulador de eventos definirá as propriedades de dados pages, referrers e activeUsers para as estatísticas recém-calculadas recebidas do servidor.
E por enquanto é só…
rode o servidor “node app.js”.
localhost:3000/dashboard
localhost:3000
Conforme as páginas são carregadas, o dasboard é atualizado instantaneamente.
CONCLUSÃO
Seguindo este tutorial, espero ter conseguido passar um primeiro passo para você seguir trabalhando com a tecnologia em tempo real com Node JS e Socket.IO.
Ainda há muita coisa que pode ser abstraída, trabalhamos com um Javascript bem básico, mas um primeiro passo é sempre importante para deixar a comunidade Node JS mais encorajada a seguir o trabalho. A KingHost possui planos de hospedagem de sites com suporte a Node.JS. Clique aqui para saber mais.
