Skip to content

Instantly share code, notes, and snippets.

@EderRoger
Last active August 29, 2015 14:03
Show Gist options
  • Save EderRoger/6669925cb742e46ba33c to your computer and use it in GitHub Desktop.
Save EderRoger/6669925cb742e46ba33c to your computer and use it in GitHub Desktop.
Node.js socket.io angular-socket-io example
var socket = null;
var host;
function showAlert(){
alert('YUPI I´m Loaded');
}
function connectToSocket(){
host = window.location.hostname;
//socket = io.connect(host +':8001');
socket = io.connect('http://127.0.0.1:8001');
socket.emit('joinRoom','bonita_room');
socket.on('date', function(data){
$('#date').text(data.date);
});
}
function reloadURL(url){
if(socket == null){
alert('You must be connect!');
}else{
socket.emit('url_data', {'value': url});
}
}
var http = require('http');
var url = require('url');
var fs = require('fs');
var server;
server = http.createServer(function(req, res){
// your normal server code
var path = url.parse(req.url).pathname;
switch (path){
case '/':
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<h1>Hello! Try the <a href="/test.html">Test page</a></h1>');
res.end();
break;
case '/test.html':
fs.readFile(__dirname + path, function(err, data){
if (err){
return send404(res);
}
res.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'});
res.write(data, 'utf8');
res.end();
});
break;
default: send404(res);
}
}),
send404 = function(res){
res.writeHead(404);
res.write('404');
res.end();
};
server.listen(8001);
// use socket.io
var io = require('socket.io').listen(server);
//turn off debug
//io.set('log level', 1);
// define interactions with client
io.sockets.on('connection', function(socket){
socket.on('joinRoom', function(room) {
socket.join(room);
});
//send data to client
setInterval(function(){
socket.emit('date', {'date': new Date()});
}, 1000);
//recieve client data
socket.on('client_data', function(data){
process.stdout.write(data.letter);
});
//receive the bonita calls
socket.on('url_data', function(data){
//emit to angular listen function
console.log('Received message from client!',data.value);
sendDataToReload(data.value);
});
sendDataToReload = function(data){
console.log('emit message to client!',data);
//socket.emit('reload_notification',{'url': data});
socket.broadcast.to("bonita_room").emit('reload_notification',{'url': data});
};
});
// ommit angular factory implementation....
.factory('socket', function (socketFactory) {
var myIoSocket = io.connect('127.0.0.1:8001');
var mySocket = socketFactory({
ioSocket: myIoSocket
});
return mySocket;
});
define([], function () {
var SocketCtrl = function ($scope,$location, socket) {
$scope.connect = function() {
socket.on('date', function(data){
$scope.date = data.date;
});
socket.on('reload_notification', function(data){
$scope.reload = data.url;
console.log('alterou rota' + $scope.reload);
$location.path(data.url);
});
}
$scope.$apply();
};
return {
socket: SocketCtrl
};
});
<html>
<head>
<style>
body { margin-top: 10px; }
input.message { height: 30px; }
</style>
</head>
<body>
<form class="form-inline">
<button ng-click="connect()" class="btn">Connect</button>
<input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
<button ng-click="send()" class="btn">send</button>
</form>
DATA: {{date}}
<table class="table table-striped">
<tr ng-repeat="message in messages">
<td>{{message}}</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Socket.io Test</title>
<script src="http://127.0.0.1:8001/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
</head>
<body>
<script>
var socket = io.connect();
socket.on('date', function(data){
$('#date').text(data.date);
});
$(document).ready(function(){
$('#text').keypress(function(e){
socket.emit('client_data', {'letter': String.fromCharCode(e.charCode)});
});
$('#btn_reload').click(function(){
var url_value = $('#url').val();
socket.emit('url_data', {'value': url_value});
});
});
</script>
<div id="date"></div>
<textarea id="text"></textarea>
<label for="url" >url to reload</label>
<input type="text" id="url" />
<input type="button" id="btn_reload" value="Reload"></input>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment