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


Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04