Successfully reported this slideshow.

AngularJS com NODE.JS e Socket.IO

2,000 views

Published on

Neste tutorial não pretendo detalhar as tecnologias envolvidas, tentarei explicar o mais breve possível sobre cada um deles e por a mão na massa.

Published in: Education
  • Be the first to comment

  • Be the first to like this

AngularJS com NODE.JS e Socket.IO

  1. 1. NODE.JS + SOCKET.IO AngularJS Author: Douglas Lira douglas.lira.web@gmail.com
  2. 2. Neste tutorial não pretendo detalhar as tecnologias envolvidas, tentarei explicar o mais breve possível sobre cada um deles e por a mão na massa. Estou estudando há um bom tempo e confesso que estou bastante empolgado com a união desses três monstrinhos que em breve ira compor o motorzinho do Cylcus – http://cyclus.myrabrasil.com.br. O que é AngularJS? AngularJS é um framewok criado e mantido pelos desenvolvedores do Google. Diferentemente de outros frameworks JavaScript ele funciona como uma espécie de extensão da linguagem HTML. O que é NODE.JS? É uma plataforma construída sobre o motor Javascript do Google Chrome para facilmente construir aplicações de rede rápidas e escaláveis. Node.JS usa um modelo de I/O direcionada a evento não bloqueante que o torna leve e eficiente, ideal para aplicações em tempo real com troca intensa de dados através de dispositivos distribuídos. O que é SOCKET.IO? Uma API de JavaScript simples, baseada em eventos que te permite comunicar entre o servidor e o cliente sem esforço e em tempo real.
  3. 3. 1 – A idéia A ideia é mostrar como o Socket.IO funciona, então iremos criar três grupos (A, B e C). Ao acessar nossa página o usuário poderá escolher qual grupo ele pretende participar e interagir recebendo e enviando mensagens do grupo, porem só podera receber e enviar mensagens do grupo que o mesmo participa. 2 – Ferramentas – Node.JS – http://nodejs.org/ – AngularJS - http://www.angularjs.org/ – Socket.IO - http://socket.io/ Obs.: Estou presumindo que você já tenha instalado o node.js e saiba executar os scripts =) 3 – Estrutura dos Arquivos index.html <!DOCTYPE html> <html ng-app="App"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NODE.JS + SOCKET.IO - Douglas Lira</title> <!-- JS --> <script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/lib/angular.min.js"></script> <script type="text/javascript" src="js/App.js"></script> <script type="text/javascript" src="http://localhost:8000/socket.io/socket.io.js"></script> <!-- CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> </head> <body> <div class="container" ng-view style="margin-top:50px"></div> <!-- Controllers --> <script type="text/javascript" src="js/controllers/DashboardController.js"></script> </body> </html>
  4. 4. main.html <div class="container"> <div class="row"> <form class="form-inline"> <fieldset> <legend>Escolha um grupo para enviar a mensagem</legend> <div class="span12"> <select name="grupo" id="grupo" ng-model="grupo" ng-change="connectGrupo()"> <option value="">- Selecione o grupo -</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <input type="text" name="txt" id="txt" ng-model="txt"> <input class="btn btn-primary" type="button" name="sendBTN" id="sendBTN" ng- click="sendMessage();" value="Enviar"> </div> </fieldset> </form> </div> </div> <div class="container" id="grupos"> <div class="row"> <fieldset> <legend>Mensagens</legend> <div class="span4"> <div class="span3">Alertas para grupo A - <span class="badge">{{alertA}}</span></div> <br><br> <ul id="msgA"> <li ng-repeat="msg in msgA">{{msg.texto}}</li> </ul> </div> <div class="span4"> <div class="span3">Alertas para grupo B - <span class="badge">{{alertB}}</span></div> <br><br> <ul id="msgB"> <li ng-repeat="msg in msgB">{{msg.texto}}</li> </ul> </div> <div class="span4"> <div class="span3">Alertas para grupo C - <span class="badge">{{alertC}}</span></div> <br><br> <ul id="msgC"> <li ng-repeat="msg in msgC">{{msg.texto}}</li> </ul> </div> </fieldset> </div> </div> <!-- SOCKET --> <script type="text/javascript"> // Conetando ao SOCKET.IO var socket = io.connect('http://localhost:8000'); socket.on('sendMessage',function(grupo,texto,total){ angular.element("#grupos").scope().updateGroup(grupo,texto,total); }); </script>
  5. 5. App.js $app = angular.module('App',[]); $app.config(function($routeProvider){ $routeProvider. when('/' {templateUrl:'view/dashboard/main.html',controller:DashboardController}); }); DashboardController.js function DashboardController($scope) { $scope.alertA = 0; $scope.alertB = 0; $scope.alertC = 0; $scope.msgA = []; $scope.msgB = []; $scope.msgC = []; $scope.grupoSai = ""; $scope.grupoEnt = ""; $scope.connectGrupo = function() { var entrada = $scope.grupo; var saida = $scope.grupoEnt; if(entrada != saida) { $scope.grupoSai = saida; $scope.grupoEnt = entrada; } else { $scope.grupoEnt = entrada; $scope.grupoSai = saida; } socket.emit('dashboardChannel', saida, entrada); } $scope.updateGroup = function(grupo,texto,total) { $scope["alert"+grupo] = total; $scope["msg"+grupo].push({ id: total, texto: texto }); } $scope.sendMessage = function() { var grupoEnt = $scope.grupoEnt; var mensagem = $scope.txt; if(grupoEnt == "A") { $scope.alertA++; socket.emit('dashboardClient', grupoEnt, mensagem, $scope.alertA); } else if(grupoEnt == "B") { $scope.alertB++; socket.emit('dashboardClient', grupoEnt, mensagem, $scope.alertB); } else if(grupoEnt == "C") { $scope.alertC++; socket.emit('dashboardClient', grupoEnt, mensagem, $scope.alertC); } } }
  6. 6. socket-server.js var express = require('express'), app = express(), http = require('http'), server = http.createServer(app), io = require('socket.io').listen(server); server.listen(8000); io.sockets.on('connection', function (socket) { socket.on('dashboardChannel', function(grupoA,grupoB) { socket.join(grupoB); socket.leave(grupoA); }); socket.on('dashboardClient', function(grupo,mensagem,total) { io.sockets.in(grupo).emit('sendMessage', grupo, mensagem, total); }); }); Bom... acho que é isso, se alguém tiver algo para melhorar só melhorar e adaptar as suas necessidades. Forte abraço!!

×