AngularJS com NODE.JS e Socket.IO

NODE.JS + SOCKET.IO
AngularJS
Author: Douglas Lira
douglas.lira.web@gmail.com

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.

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>

<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>

<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>

<script type="text/javascript" src="js/controllers/DashboardController.js"></script>
</body>
</html>

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>

<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>

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);
}
}
}

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!!

AngularJS com NODE.JS e Socket.IO

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à AngularJS com NODE.JS e Socket.IO

Similaire à AngularJS com NODE.JS e Socket.IO (20)

Dernier

Dernier (20)

AngularJS com NODE.JS e Socket.IO