Categorías: Sin categoría

CAHT CON NODEJS

HTML Y JAVASCRIP DEL LADO DEL CLIENTE
index.html

<html>
<head>
<title>
Node.js chat
</title>
<style>
#contentWrap{
display: none;
}
#chatWrap{
float: left;
}
#chat{
position: relative;
width: 100%;
float:left;
min-height:100px;
height: 90%;
overflow: auto;
}
</style>
<script src="https://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="input-group" style="width:300px;text-align:center;margin:0 auto;" id="nickWrap">
<input id="nickname" class="form-control input-lg" type="text" placeholder="Enter your username">
<span class="input-group-btn">
<button class="btn btn-lg btn-primary" type="submit" id="setNick">OK</button>
</span>
</div>
<div class="alert fade in alert-danger alert-dismissable" data-dismiss="alert" id="login-error" style="display:none;">
<button type="button" class="close" id="closeAlert">×</button>
That username is already taken. Try again.
</div>
<div id="contentWrap" class="row" style="height: 70%;">
<div class="col-md-2"></div>
<div id="chatWrap" class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">Chat</div>
<div id="chat" class="panel-body"></div>
</div>
<div>
<form id="send-message" class="input-group" style="text-align:center;margin:0 auto;">
<input id="message" class="form-control input-lg" type="text">
<span class="input-group-btn">
<button class="btn btn-lg btn-primary" type="submit">Send</button>
</span>
</form>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-info">
<div class="panel-heading">
Users
</div>
<div id="nicknamesConectados" class="panel-body"></div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function ($) {
$("#nickname").focus();
var evento = io.connect();
//CLICK AL BOTON DE ENVIAR NICKNAME
$('#setNick').click(function (e) {
//MANDAMOS EL $('#nickname').val() Y RESIBIMOS UNA FUNCION CON existeNickname(true o false)
evento.emit('new user', $('#nickname').val(), function (existeNickname) {
//SI NO existeNickname MOSTRAMOS EL CONTENEDOR CON LA LISTA DE LOS NICKNAME Y EL CONTENEDOR DEL CHAT
if (existeNickname===false) {
$('#nickWrap').hide();
$('#contentWrap').show();
}
//SI SI EXISTE EL NICKNAME MOSTRAMOS EL CONTENDOR #login-error CON EL MENSAJE DE QUE ESE NICKNAME YA EXISTE
if (existeNickname===true) {
$("#login-error").show();
}
});
$('#nickname').val('');
e.preventDefault();
});
$('#closeAlert').click(function (e) {
$("#login-error").hide();
});
$('#send-message').submit(function (e) {
e.preventDefault();
if ($('#message').val() !== ''){
evento.emit('send message', $('#message').val());
}
$('#message').val('');
});
//AL RECIBIR EL EVENTO "new message" RECIBIMOS UN ARREGLO CON MENSAJE Y NICKNAME LOS CUALES ESCRIBIMOS EN EL CHAT
evento.on('new message', function (mensajeYNickname) {
$('#chat').append('<b>' + mensajeYNickname.nick + ":</b> " + mensajeYNickname.msg + "<br/>");
});
//AL RECIBIR EL EVENTO "usernames" RECIBIMOS EL ARRAY listaDeNicknames CON LA LISTA DE TODOS LOS NICKNAMES CONECTADOS
evento.on('usernames', function (listaDeNicknames) {
//CREAMOS LA VARIABLE html PARA ESCRIBIR AHI TODOS LOS NICKNAMES CONECTADOS
var html = '';
for (var nicknameConectado in listaDeNicknames) {
html += nicknameConectado + '<br/>';
}
//ESCRIBIMOS EN EL CONTENEDOR nicknamesConectados TODOS LOS NICKNAMES CONECTADOS
$('#nicknamesConectados').html(html);
});
});
</script>
</body>
</html>

JAVASCRIPT DEL LADO DEL SERVIDOR
main.js

var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require("/usr/local/lib/node_modules/socket.io").listen(server),
listaDeNicknames = {};
server.listen(8000);
app.get('/', function(req, res) {
res.sendfile(__dirname + '/index.html');
});

//CUANDO CUANDO SE RESIBE UNA CONEXION DE CUALQUIER NAVEGADOR
io.sockets.on('connection', function(esteNavegador) {
//CUANDO esteNavegador ENVIA EL VALOR DEL NICKNAME Y ESPERA UNA CALBACK CON TRUE O FALSE
esteNavegador.on('new user', function(nicknameVal, callback) {
//SI EL NICNAME QUE SE RECIBE ESTA DENTRO DE LA LISTA DE LOS listaDeNicknames REGRESAMOS UN TRUE
if (nicknameVal in listaDeNicknames) {
callback(true);
}
//SI EL NICKNAME NO ESTA DENTRO DE LA LISTA DE LOS listaDeNicknames MANDAMOS UN CALBACK FALSO Y AGREGAMOS ESE NICKNAME A LA LISTA DE listaDeNicknames
else {
callback(false);
//CREAMOS UNA VARIBLE GLOBAL LLAMADA esteNavegador.nickname A LA QUE LE ASIGNAMOS EL NOMBRE DEL NICKNAME QUE SE ACABA DE REGISTRAR
esteNavegador.nickname = nicknameVal;
//AL AL LISTA DE NICKNAMES AGRGAMOS ESTE NICKNAME CON UN VALOR DE 1
listaDeNicknames[esteNavegador.nickname] = 1;
//ACTUALIZAMOS LA LISTA DE NICKNAMES Y MANDAMOS AL HTML ESA LISTA
updateNickNames();
}
});
//AL RECIBIR UN MENSAJE CON EL MENSAJE SE ENVIA A TODOS LOS SOCKETS
esteNavegador.on('send message', function(mensajeVal) {
io.sockets.emit('new message', {msg: mensajeVal, nick: esteNavegador.nickname});
});
esteNavegador.on('disconnect', function(data) {
if(!esteNavegador.nickname) return;
delete listaDeNicknames[esteNavegador.nickname];
updateNickNames();
});
function updateNickNames() {
io.sockets.emit('usernames', listaDeNicknames);
}
});
Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

🟢Editar código de un módulo en Dolibarr [04]

🟢Editar código de un módulo en Dolibarr [04]

En este tutorial vamos editar el código de nuestro módulo personas para poder personalizar algunas…

2 meses hace
🟢Crear un sub_módulo en Dolibarr [03]

🟢Crear un sub_módulo en Dolibarr [03]

En este tutorial vamos a crear un sub módulo llamado seguridad que será muy parecido…

2 meses hace
🟢Modificar un módulo en Dolibarr [02]

🟢Modificar un módulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
🟢Constructor de módulos en Dolibarr

🟢Constructor de módulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una política clara:…

2 meses hace
🟢Tickets en Dolibarr [19]

🟢Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
🟢Agenda en Dolibarr [18]

🟢Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace