{"id":13596,"date":"2018-05-09T17:10:03","date_gmt":"2018-05-09T20:10:03","guid":{"rendered":"https:\/\/king.host\/blog\/?p=13596"},"modified":"2024-06-03T16:52:59","modified_gmt":"2024-06-03T19:52:59","slug":"dashboard-node-js-socketio-vuejs","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/dashboard-node-js-socketio-vuejs\/","title":{"rendered":"Dashboard em real time com NODE JS, SOCKET.IO e VUEJS"},"content":{"rendered":"

Node JS se tornou popular devido a sua facilidade em trabalhar com real-time<\/strong> e baixa performance do sistema, simplesmente por que o protocolo WebSockets utiliza o Javascript.<\/p>\n

Com WebSockets, um cliente e um servidor podem \u201cconversar\u201c entre si em tempo real<\/strong>, como se estivessem realizando uma chamada telef\u00f4nica. Uma vez conectado, um cliente poder\u00e1 receber dados do servidor, sem precisar fazer nada. Diferente dos protocolos WEB onde precisam ser atualizados para receber uma nova informa\u00e7\u00e3o do servidor. Por outro lado, o servidor tamb\u00e9m poder\u00e1 receber dados em tempo real do cliente dentro da mesma conex\u00e3o<\/strong>.<\/p>\n

Neste artigo vou mostrar<\/strong> algo muito \u00fatil e com muito poder para os dias de hoje que \u00e9 um\u00a0painel anal\u00edtico em tempo real com Node JS, Socket.io e VueJs<\/strong> para monitorar o acesso \u00e0s p\u00e1ginas do site, semelhante ao Google Analytics.<\/p>\n

\"\"<\/p>\n

Descompacte o arquivo real time na sua pasta do node. No meu caso, estou usando ela em \/opt\/lampp\/htdocs\/node<\/strong>.<\/p>\n

Ap\u00f3s descompactar inicialize um novo arquivo package.json<\/strong> via terminal com:<\/p>\n

npm init<\/strong><\/p>\n

Ap\u00f3s algumas perguntas, ele inicia criar\u00e1 o package.json na raiz da aplica\u00e7\u00e3o.<\/p>\n

\"\"<\/p>\n

Depois de inicializar o package.json, instale ExpressJs e Socket.io da seguinte forma:<\/p>\n

npm install — save express socket.io<\/strong><\/p>\n

Aqui est\u00e1 como a estrutura final do projeto. Vamos construindo essa estrutura conforme avan\u00e7amos.<\/p>\n

\"\"<\/p>\n

Os arquivos e diret\u00f3rios que valem a pena serem notados s\u00e3o:<\/p>\n

\/public\/directory<\/strong> – Cont\u00e9m nossos ativos est\u00e1ticos
\n\/js\/dashboard.js<\/strong> – Cont\u00e9m o c\u00f3digo VueJs e Socket.io para receber e renderizar as estat\u00edsticas no painel
\n\/css\/dashboard.css<\/strong> – Tem algum estilo b\u00e1sico para o painel
\n\/views\/dashboard.html<\/strong> – Cont\u00e9m diretivas HTML e Vue para vincula\u00e7\u00e3o e renderiza\u00e7\u00e3o de dados
\n\/views\/index.html<\/strong> – \u00c9 a p\u00e1gina que um visitante recebe e cont\u00e9m o c\u00f3digo de acompanhamento
\napp.js<\/strong> – Cont\u00e9m nossa l\u00f3gica do lado do servidor
\nconfig.js<\/strong> – \u00c9 onde vamos armazenar qualquer assunto de configura\u00e7\u00e3o para alterar<\/p>\n

Ao longo do tutorial, vou falar da maior parte deles.<\/p>\n

Configurando o Node JS e Socket.IO<\/h2>\n

Nesta se\u00e7\u00e3o, vamos configurar a estrutura b\u00e1sica do nosso servidor Node + Socket.io<\/strong> e configur\u00e1-la para ouvir as conex\u00f5es de entrada do soquete.<\/p>\n

No arquivo da raiz app.js cont\u00e9m as configura\u00e7\u00f5es do lado servidor:<\/p>\n

Altere a porta 3000 para a porta que voc\u00ea definiu para o Node Js.<\/p>\n

\"\"<\/p>\n

app.set(‘port’, (process.env.PORT || 3000));<\/em><\/p>\n

O objeto visitorsData armazena as informa\u00e7\u00f5es coletadas sobre cada usu\u00e1rio e as associar\u00e1 a um ID de soquete exclusivo. Isso servir\u00e1 como uma maneira exclusiva de identificar a conex\u00e3o de soquete de um usu\u00e1rio com os dados coletados sobre eles.<\/p>\n

\u00c9 importante ressaltar que voc\u00ea n\u00e3o ir\u00e1 servir todas as p\u00e1ginas acessadas e sim as que est\u00e3o definidas no app.js, que s\u00e3o:
\n\/<\/em>
\n\/about<\/em>
\n\/contact<\/em><\/p>\n

\"\"<\/p>\n

app.get(‘\/dashboard’, function(req, res) {<\/em>
\nres.sendFile(path.join(__dirname, ‘views\/dashboard.html’));<\/em>
\n});<\/em><\/p>\n

Criando o rastreamento da p\u00e1gina<\/h2>\n

Agora que temos o servidor configurado para escutar conex\u00f5es de soquete de entrada vamos precisar servir ele com as informa\u00e7\u00f5es vindas do usu\u00e1rio.<\/p>\n

Em \/view\/index.html<\/strong> voc\u00ea ir\u00e1 precisar instanciar no arquivo a chamada do Soquet.IO, da seguinte forma:<\/p>\n

\"\"<\/p>\n

Ele ir\u00e1 apenas pegar os eventos do usu\u00e1rio.<\/p>\n

\"\"<\/p>\n

io.on(‘connection’, function(socket) {<\/em>
\n if (socket.handshake.headers.host === config.host<\/em>
\n && socket.handshake.headers.referer.indexOf(config.host + config.dashboardEndpoint) > -1) {<\/em>
\n io.emit(‘updated-stats’, computeStats());<\/em>
\n }<\/em>
\n socket.on(‘visitor-data’, function(data) {<\/em>
\n visitorsData[socket.id] = data;<\/em>
\n io.emit(‘updated-stats’, computeStats());<\/em>
\n });<\/em>
\n socket.on(‘disconnect’, function() {<\/em>
\n delete visitorsData[socket.id];<\/em><\/p>\n

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\u00e1gina, o soquete desconectar\u00e1 e acionar\u00e1 um evento de desconex\u00e3o, no qual removeremos o ID de soquete associado e seus dados do objeto visitorData.
\nAgora temos um sistema no qual os dados do visitante s\u00e3o adicionados e removidos do objeto visitorsData, dependendo de eles visitarem a nossa p\u00e1gina ou a deixarem.<\/p>\n

No arquivo config.js<\/strong> h\u00e1 o host e o endpoint do dashboard:<\/p>\n

\"\"<\/p>\n

module.exports = {<\/em>
\n host: “localhost:3000”,<\/em>
\n dashboardEndpoint: “\/dashboard”<\/em>
\n}<\/em><\/p>\n

Na instru\u00e7\u00e3o if do arquivo app.js<\/strong>, estamos verificando se socket.handshake.headers.host<\/strong> \u00e9 igual ao host que definimos em nosso arquivo de configura\u00e7\u00e3o e que socket.handshake.headers.referer<\/strong> cont\u00e9m localhost: 3000\/dashboard<\/strong>. Se a condi\u00e7\u00e3o for atendida, n\u00f3s enviaremos os dados para esse soquete, que \u00e9 o nosso soquete do painel neste caso.<\/p>\n

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.\u00a0No arquivo realtime.tar.gz<\/strong> voc\u00ea pode ver o app.js<\/strong> conclu\u00eddo tal como todos os outros arquivos j\u00e1 configurados, restando apenas voc\u00ea instalar o init, express, socket.io<\/strong> e configurar a porta definida no servidor node.<\/p>\n

Sobre o painel<\/h2>\n

Estamos agora na parte final, onde h\u00e1 as configura\u00e7\u00f5es do VueJS com o painel dashboard.html.
\nO arquivo est\u00e1 em \/views e \u00e9 muito simples como pode ver, tirando alguns minutos para analisar o c\u00f3digo voc\u00ea j\u00e1 ir\u00e1 ficar familiarizado.
\nO VueJs<\/strong> \u00e9 uma biblioteca JavaScript simples e flex\u00edvel que compartilha algumas semelhan\u00e7as com o Angular e o React.
\nO dashboard.js<\/strong> em public\/js<\/strong> conter\u00e1 tr\u00eas propriedades de dados: as p\u00e1ginas, os referenciadores e os usu\u00e1rios ativos, todos os quais o servidor calcula.<\/p>\n

\"\"<\/p>\n

var socket = io();<\/em>
\nvar vm = new Vue({<\/em>
\n el: ‘#app’,<\/em>
\n data: {<\/em>
\n pages: {},<\/em>
\n referrers: {},<\/em>
\n activeUsers: 0<\/em>
\n },<\/em>
\n created: function() {<\/em>
\n socket.on(‘updated-stats’, function(data) {<\/em>
\n this.pages = data.pages;<\/em>
\n this.referrers = data.referrers;<\/em>
\n this.activeUsers = data.activeUsers;<\/em>
\n }.bind(this));<\/em>
\n }<\/em>
\n});<\/em><\/p>\n

\u00c9 criando uma nova conex\u00e3o de soquete para o servidor na parte superior do arquivo e usando o new Vue() construtor new Vue() para criar uma nova inst\u00e2ncia do VueJS montada em #app<\/strong> .<\/p>\n

Agora, sempre que um evento de estat\u00edsticas atualizadas \u00e9 emitido pelo servidor (informando que um usu\u00e1rio foi adicionado\/removido), o manipulador de eventos definir\u00e1 as propriedades de dados pages, referrers e activeUsers<\/strong> para as estat\u00edsticas rec\u00e9m-calculadas recebidas do servidor.<\/p>\n

E por enquanto \u00e9 s\u00f3…<\/p>\n

rode o servidor \u201cnode app.js\u201d.<\/p>\n

localhost:3000\/dashboard<\/strong><\/p>\n

\"\"<\/p>\n

localhost:3000<\/strong><\/p>\n

\"\"<\/p>\n

Conforme as p\u00e1ginas s\u00e3o carregadas, o dasboard \u00e9 atualizado instantaneamente.<\/p>\n

\"\"<\/p>\n

CONCLUS\u00c3O<\/h2>\n

Seguindo este tutorial, espero ter conseguido passar um primeiro passo para voc\u00ea seguir trabalhando com a tecnologia em tempo real com Node JS<\/strong> e Socket.IO<\/strong>.
\nAinda h\u00e1 muita coisa que pode ser abstra\u00edda, trabalhamos com um Javascript bem b\u00e1sico, mas um primeiro passo \u00e9 sempre importante para deixar a comunidade Node JS mais encorajada a seguir o trabalho<\/strong>. A KingHost possui planos de hospedagem de sites com suporte a Node.JS. Clique aqui para saber mais<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 \u201cconversar\u201c entre si em tempo real, como se estivessem realizando uma chamada telef\u00f4nica. Uma vez conectado, um cliente poder\u00e1 receber […]<\/p>\n","protected":false},"author":309,"featured_media":13613,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,1327,8],"tags":[1355],"class_list":["post-13596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-hospedagem-node-js","category-tecnologia","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/13596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/309"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=13596"}],"version-history":[{"count":13,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/13596\/revisions"}],"predecessor-version":[{"id":36113,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/13596\/revisions\/36113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/13613"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=13596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=13596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=13596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}