Resumidamente que cosas podemos hacer con esta tecnología? , pues podemos crear sistemas de notificaciones como Facebook, o Foro20 (cuando tenemos un nuevo mensaje privado) , podemos realizar Streamings ,es decir, llevar el real time a nuestras webs, las posibilidades son muchas.
Comenzemos:
1° Paso.
Vamos a crear una carpeta llamada “Chat” y dentro de esta vamos a ir metiendo nuestros archivos.
Ahora dentro de la carpeta “Chat”, vamos a crear un nuevo archivo llamado package.json, aquí definimos las dependecias/modulos de nuestra aplicación.
El contenido será el siguiente:
PHP:
{
"name": "chat-en-nodejs",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "latest",
"jade": "latest",
"socket.io":"latest"
}
}Una vez hecho esto, vamos a instalarlas con la siguiente instrucción: npm install .
2° Paso
Ahora ya con las dependencias instaladas vamos a crear la estructura básica de nuestra aplicación con la siguiente instrucción: express chatnode. Si se encuentran con un error, prueben ejecutar ” npm install -g express-generator” y vuelvan a intentar.
Una vez creada comenzamos a reemplazar el contenido de los archivos generados automáticamente .Primero el contenido del server, vamos al archivo app.js y reemplazamos su contenido por el siguiente:
PHP:
var port=3000; //Puerto del chat
//Modulos requeridos
var express=require('express'),
path = require('path'),
app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
nickNames=[]; //Lista para guardar la lista de nicks
var counter=0; //Numeros de usuarios en un momento dado en el chat.
app.set('views',__dirname + '/views'); //ruta donde se encuentras las vistas
app.set('view engine','jade'); //Utilizo jade como motor de vista
app.get('/',function(req,res){ // Muestro el index.jade
res.render('index');
});
//Ruta de archivos estaticos
app.use(express.static(path.join(__dirname, 'public')));
//Cuando se conecta un user nuevo automaticamente se ejecuta este evento
io.sockets.on('connection', function (socket) {
counter++; //Sumo un al counter de usuarios
console.log('Usuario Conectado')
//Emito el evento cliente,avisando a todos los usuarios que se conecto un nuevo user
io.sockets.emit('cliente', {number:counter})
//Evento que se ejecuta al desconectarse un user
socket.on('disconnect',function(req,res){
counter--; //Lo saco del counter de usuarios
console.log('Usuario Desconectado , en este momento hay online :%d',counter)
if(!socket.nickName) return; //Verifico que exista el nickname
if(nickNames.indexOf(socket.nickName)>-1){ //Si el nickname esta dentro de la lista de nicks lo elimino.
nickNames.splice(nickNames.indexOf(socket.nickName),1);
console.log(nickNames)
}
//Aviso a todos los usuarios la nueva cantidad de usuarios y actualizo la lista de nicks
socket.broadcast.emit('cliente',{number:counter,listaNicks:nickNames})
})
//Evento a la espera de que un usuario entre al chat e ingrese su nickname
socket.on('nickName',function(data,callback){
//Verifico que el nickname no este en uso
if (nickNames.indexOf(data)!=-1){
callback(false)
} else{
//Si el nick es valido, lo ingreso a la lista de nicks
nickNames.push(data);
//Cada user tiene un socket que lo relaciona con el server ,
//entonces identifico el socket con el nickname del usuario
socket.nickName=data;
//Actualizo la lista de nicknames de todos los usuarios
io.sockets.emit('listaNicks',{
listaNicks:nickNames
});
callback(true)
}
})
//Evento a la espera de que un cliente escriba en el chat un mensaje
socket.on('mensaje',function(data){
//Envio a todos los clientes, el mensaje escrito en el chat , junto con el nick de quien lo escribio
io.sockets.emit('nuevoMensaje',{
nuevoMensaje:data.texto,
nick:socket.nickName //Observarse que el nick se obtiene desde el socket
});
})
});
server.listen(port,function(res,res){
console.log('Server Corriendo en puerto ' + port);
});3° Paso
Ahora reemplazaremos el resto del los archivos.
Vamos al archivo view/layout.jade , borramos su contenido y copiamos el siguiente:
PHP:
doctype html
html
head
title Chat on Nube 3D
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
script(type="text/javascript").
var socket=io.connect('http://localhost:3000');
socket.on('cliente', function (data){
$('#count').html("Users Online :" +data.number); //Actualiza el counter de users
//Si un user se desconecta, actualizo la lista de nicks
if (data.listaNicks !=null) {
actualizarNicks(data);
}
})
//Event espera a que el server avise que hay un nuevo mensaje
socket.on('nuevoMensaje',function(data){
$('#dialogo').append('<p>'+'<strong>'+data.nick+':'+'</strong>'+" "+data.nuevoMensaje+'</p>');
})
//Actualizo lista de nicks
socket.on('listaNicks',function(data){
actualizarNicks(data);
});
$(function(){
$('#conversacion').hide();
$('#conversacion').submit(function(event){
var mensaje=$('#message').val();
//Envio mensaje al server
socket.emit('mensaje',{texto:mensaje});
$('#message').val(' ').focus();
});
$('#set-nickname').submit(function(event){
event.preventDefault();
var nick=$('#nick').val();
//Envio nickname al server
socket.emit('nickName',nick,function(data){
if (data){
$('#set-nickname').hide();
$('#conversacion').show();
}else{
$('#set-nickname').prepend('<p>'+'NickName en uso'+'</p>');
}
});
});
});
function actualizarNicks(data){
$("#listaDeNicks").empty();
jQuery.each(data.listaNicks ,function (i,val){
$("#listaDeNicks").append($("<li></li>").html(val));
});
};
body
block contentLo mismo hacemos con el archivo view/index.jade:
PHP:
extends layout
block content
div(id="contenedor", class="container")
div(class="row")
div(class="col-lg-6 col-lg-offset-3 text-center")
h1(class="jumbotron") Chat Nube 3D
form(id='set-nickname',action='#' class="form-inline")
label(class="control-label") NickName
input(id="nick" class="form-control " autofocus="autofocus")
input(type='submit' class="btn btn-primary " value='Guardar' )
div(id="conversacion")
div(id="usuarios" class="well")
p(id="count")
ul(id="listaDeNicks")
div(id="dialogo" class="well")
form(id='form1',action='#' class="form-inline")
input(id='message' placeholder="Escribe un mensaje" class="form-control" )
input(type='submit' class="btn btn-primary" value="Enviar")Por último el archivo view/style.css para que se vea más bonito(aclaro que con Css voy mal) :
PHP:
style
.centered{
float: none;
margin: 0 auto;
}
#dialogo{
overflow:auto;
border:1px solid #CCC;
height: 400px;
width: 400px;
text-align: left;
float: right;
}
#usuarios{
border:1px solid #CCC;
height: 400px;
width: 150px;
float: left;
text-align: left;
overflow:auto;
}
#message{
min-width: 350px;
}Estos son los archivos que necesitamos para crear el chat, están muy bien comentados para que puedan entenderlos.
Ahora podemos ejecutar node app.js dentro de la carpeta chat y verán el chat funcionado :
Podes descargar el código fuente desde: https://github.com/iLChopper/chatjs.git .
Si te gusto, solo te pido un "Me agrada"
