Bueno pues seguimos avanzando con node.js y socket.io, lo empezamos en este post:
http://hispabyte.net/2011/12/crear-un-chat-con-node-js-y-socket-io/
functions.js:
module.exports =
{
in_array: function (needle, haystack, argStrict)
{
// Checks if the given value exists in the array
//
// version: 1109.2015
// discuss at: http://phpjs.org/functions/in_array // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: vlado houba
// + input by: Billy
// + bugfixed by: Brett Zamir (http://brett-zamir.me)
// * example 1: in_array('van', ['Kevin', 'van', 'Zonneveld']); // * returns 1: true
// * example 2: in_array('vlado', {0: 'Kevin', vlado: 'van', 1: 'Zonneveld'});
// * returns 2: false
// * example 3: in_array(1, ['1', '2', '3']);
// * returns 3: true // * example 3: in_array(1, ['1', '2', '3'], false);
// * returns 3: true
// * example 4: in_array(1, ['1', '2', '3'], true);
// * returns 4: false
var key = '', strict = !! argStrict;
if (strict)
{
for (key in haystack)
{
if (haystack[key] === needle)
{
return true;
}
}
}
else
{
for (key in haystack)
{
if (haystack[key] == needle)
{
return true;
}
}
}
return false;
}
};
server.js:
var functions = require('./functions');
var users_available = ['zital', 'hqh'];
var clients = {};
var server = require("socket.io").listen(6969);
server.sockets.on("connection", function(message)
{
message.on("login", function(user)
{
if(functions.in_array(user, users_available))
{
clients[message.id] = message;
clients[message.id].emit("isLogged");
}
});
message.on("newMessage", function(data)
{
for(i in clients)
clients[i].emit("sendMessage", data);
});
message.on("logout", function()
{
var tmp = {};
for(i in clients)
{
if(i!=message.id)
tmp[i] = clients[i];
}
clients = tmp;
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online chat</title>
<style>
body
{
color: #fff;
background: #333;
font-family: "Helvetica", Arial;
font-size: 14px;
text-align: center;
}
.container
{
background: #ccc;
border-radius: 1em;
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
margin: 1em auto;
padding: 1em;
width: 90%;
}
input
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
}
span
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
text-align: left;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="socket.io.js"></script>
<script type="text/javascript">
<!--
// PONED VUESTRA IP PUBLICA AQUÍ
var websocket = io.connect("http://10.211.252.10:6969");
$(document).on('ready', function()
{
$('#f_user').css('display', 'none');
$('#f_message').css('display', 'none');
$('#login').trigger('focus');
websocket.on("isLogged", function()
{
var login = $('#login');
var user = login.val();
$('#f_user > label').html('welcome: '+user);
$('#f_user').css('display', 'block');
$('#f_message').css('display', 'block');
$('#f_login').css('display', 'none');
$('#message').trigger('focus');
});
websocket.on("sendMessage", function(data)
{
var chat = $('#zchat');
var span = $('<span>'+data+'</span>');
if (chat.children().length > 0 )
chat.find(">:first-child").before(span);
else
chat.append(span);
});
$('#f_user').on('submit', function(e)
{
e.preventDefault();
websocket.emit("logout", {});
$('#f_user').css('display', 'none');
$('#f_message').css('display', 'none');
$('#f_login').css('display', 'block');
});
$('#f_login').on('submit', function(e)
{
e.preventDefault();
websocket.emit("login", $('#login').val());
});
$('#f_message').on('submit', function(e)
{
e.preventDefault();
websocket.emit("newMessage", $('#message').val());
$('#message').val('');
$('#message').trigger('focus');
});
});
//-->
</script>
</head>
<body>
<div>
<form id="f_user">
<label></label>
<input type="submit" value="logout" />
</form>
<form id="f_login">
<label>login: </label>
<input type="text" name="login" id="login" required />
<input type="submit" />
</form>
<form id="f_message">
<label>Message: </label>
<input type="text" name="message" id="message" required />
<input type="submit" />
</form>
</div>
<div id="zchat">
</div>
</body>
</html>
socket.io.js:
http://pastebin.com/shJTm0JE
Para ponerlo en marcha:
los ficheros server.js y functions.js tienen que estar en el mismo path y index.html y socket.io.js también :)
Arrancamos:
node server.js
Desde el navegador abrimos el fichero: index.html es preferible tirando desde un servidor web, ya que de lo contrario puede que no funcione en algunos navegadores.
¿Dónde está el truco? En la variable clients vamos añadiendo los sockets que son permitidos, siempre en cuanto el usuario sera “zital” o “hqh” se podrá entrar de lo contrario no, para leer los mensajes también es obligatorio estar logueado. Luego con logout se quitan el socket correspondiente de la variable clients y ya no le llegarán los mensajes hasta que no se loguee.
