Alguién sabe cómo hacer esto?

Publicado en 'Programación' por lokotek, 17 Dic 2014.





  1. lokotek

    lokotek Miembro frecuente

    Registro:
    2 Feb 2013
    Mensajes:
    54
    Likes:
    1




    Alguno de ustedes como implementar las notificaciones que aparecen en mercadolibre??? esas que muestran en la campanita en rojo que tienes 1 o 2 o n respuestas pendientes de leer???
    Es algo similar a lo que vemos en este foro sobre el icono del sobre que nos indica que tenemos una notificación porque alguién repondió a un tema del cual estamos suscritos.

    Muchas gracias a quienes puedan ayudarme.
     


  2. jreyes1985

    jreyes1985 Miembro diamante

    Registro:
    9 Ago 2013
    Mensajes:
    13,013
    Likes:
    2,146
    Implementarlo donde?
     
  3. douglas_michael

    douglas_michael Suspendido

    Registro:
    24 Set 2014
    Mensajes:
    1,268
    Likes:
    378
    pues , no me gusta programar .. pero si lo fuera mi logica seria .

    Genero una BD , PREalertas y cada vez que un usuario remita una notificacion hacia mi IDusuario .. esa alarmita ira contabilizando la notificacion y claro se emitira un color rojo .. cuando tengo un nuevo mensaje nuevo.

    no lo veo dificil desde mi punto de vista , pero lastima que programador no Soy .. a llorar al RIO !!
     
  4. AiApaec

    AiApaec Miembro frecuente

    Registro:
    1 May 2014
    Mensajes:
    58
    Likes:
    14
    una función ajax que cada n segundos haga un request a una página o httphandler, éste se encarga de verificar en la BD y retorna la respuesta en formato json.
    ...
     
  5. lokotek

    lokotek Miembro frecuente

    Registro:
    2 Feb 2013
    Mensajes:
    54
    Likes:
    1
    si amigo AiApaec es básicamente eso pero no consigo obtener el código que usan en mercadolibre, usan la técnica llamada Comet con un iframe haciendo una petición larga la cual se mantiene en ese estado y a través de esta cada cierto intervalo de tiempo se recibe información. Lo que deseo es crear una réplica exacta de ese sistema de notificaciones, el cual te dice que hace 30 seg. o hace 5horas, etc te llegaron cada uno de esas notificaciones o mensajes.
     
  6. danielpz

    danielpz Miembro maestro

    Registro:
    24 Nov 2011
    Mensajes:
    507
    Likes:
    105
    va, que facil, espera, ahorita te paso el codigo, yo mismo lo programe :), , primero que nada te expongo como lo adapte, tengo en una web el plugin, "front-end-pm", para wordpres, obviamente la web esta montada con wordpress, y dicho plugin te otorga una función llamada "getNewMsgs", con la que obtienes el numero de nuevos mensajes recibidos, entonces,,,, : primero, creas un archivo JS, con el siguiente codigo:

    Código:
    // comprobador de nuevos mensajes
        function cogermps(){
            var privados = location.protocol + "//" + document.domain + "/" + location.pathname.split('/')[1] + "/wp-content/themes/miweb/mp-pre.php";
            $.ajax({
                type: "POST",
                url: privados,
                success: function(data){if(data != "") {
                            cogetitulo = document.getElementsByTagName("title")[0].innerHTML;
                            if(cogetitulo.slice(0,1) == '(')
                                {
                                    apartir = $.trim(cogetitulo.slice(4));
                                    juntadoa = "(" +data+ ") " + apartir + "";
                                        if (cogetitulo != juntadoa) {
                                            limpiatitulo = document.getElementsByTagName("title")[0].innerHTML="";
                                            document.getElementsByTagName("title")[0].innerHTML="" +juntadoa+ "";
                                        }  
                                }
                                else
                                {
                                    limpiatitulo = document.getElementsByTagName("title")[0].innerHTML="";
                                    document.getElementsByTagName("title")[0].innerHTML="(" +data+ ") " + cogetitulo + "";
                                }
                            cogemensa = $("#mensajes").text();
                            cogemensab = $.trim(cogemensa);
                            if (cogemensab != data)
                                {
                                    $("#mensajes").empty();
                                    $("#mensajes").append("<div id=\"nuevosmsgs\" class=\"bordes2 numero\">" +data+ "</div>").fadeIn('slow');
                                }
                        }
                        else
                        {
                            cogetitulob = document.getElementsByTagName("title")[0].innerHTML;
                            if(cogetitulob.slice(0,1) == '(')
                                {
                                    apartirb = $.trim(cogetitulob.slice(4));
                                    limpiatitulob = document.getElementsByTagName("title")[0].innerHTML="";
                                    document.getElementsByTagName("title")[0].innerHTML="" +apartirb+ "";
                                    $("#mensajes").empty();
                                }
                        }
                }      
            });  
        };
    setInterval(cogermps, 61000);
    
    El cual hace que verifica cada 61 segundos si el numero de los MP recibidos, obteniendo la información de un archivo PHP que te dice dicho numero, (este es el codigo php):

    PHP:
    <?php
    if( isset($_SERVER['HTTP_REFERER']) )
    {
        require_once(
    '../../../wp-config.php');
        
    $fep = new fep_main_class();
        
    $numNew $fep->getNewMsgs();
        
    //if ($numNew != 0) { echo '<div id="nuevosmsgs" class="bordes2 numero">'; echo $numNew; echo '</div>'; }
        
    if ($numNew != 0) { echo $numNew; }
    }
    else
    {
        echo 
    "no es posible cargar este archivo directamente, asi que no te pases de pendejo xD!";
    }  
    ?>
    ...para luego despues: crear un DIV con el numero de los "nuevos mensajes", (que con CSS se le puede poner el color rojo predeterminante del cubito ese de mercado libre), y aparte tambien te cambia el TITLE de la web en donde estes, algo asi "(2) El titulo de mi web", (entre parentesis el numero de nuevos mensajes).

    Ese JS, no solo hace lo que te digo, sino tambien te limpia el TITLE y te desaparece el DIV, cuando ya allas leido el mensaje, y lo hace en cada pestaña que tengas abierta de la misma web.

    Cabe resaltar que esta adaptado especialmente para la web que estube programando hace un tiempo, asi que los IDS de los DIVS debes cambiarlos y tambien los CLASS.

    Si te resulta dificil, te lo explico con más detalle y te echo una mano si lo quieres adaptar a tu desarrollo.
     
    A lokotek le gustó este mensaje.
  7. BlackGrunge

    BlackGrunge Miembro nuevo

    Registro:
    20 Oct 2012
    Mensajes:
    23
    Likes:
    2
    Solo decir que las notificaciones que muestra mercadolibre (y otras webs) las hace con node js, hace muchos años atrás se solía utilizar estos bucles infinitos en javascript como el ejemplo que muestran arriba, pero estas peticiones asincrónicas consumen demasiados recursos del servidor innecesariamente y dependiendo de los usuarios activos podría colapsar tu servidor.
     
    A lokotek le gustó este mensaje.
  8. danielpz

    danielpz Miembro maestro

    Registro:
    24 Nov 2011
    Mensajes:
    507
    Likes:
    105
    oh!, eso no sabia, xD
    oh! eso no sabia,, investigaré, gracias! ;)
     
  9. lokotek

    lokotek Miembro frecuente

    Registro:
    2 Feb 2013
    Mensajes:
    54
    Likes:
    1
    gracias danielpz!!!
    @BlackGrunge leí lo que mencionas en tu comentario e hice lo siguiente:


    Código:
    var http = require('http');
    var mysql = require('mysql');
    
    var pool = mysql.createPool({
        host: "localhost",
        database: "mi_db",
        user: "mi_usuario",
        password: "mi_password"
    });
    
    http.createServer(function(req, res) {
        console.log('request received');
        checkMessages(req, res);
    }).listen(8124);
    
    function checkMessages(req, res) {
        var reqUrl = req.url;
        var callbackFnName = null;
        var usuario_id = 0;
    
        if (/callback=([^&]+)/.test(reqUrl)) {
            callbackFnName = RegExp['$1'];
        }
    
        var date = new Date();
    
        if (date - req.socket._idleStart > 60000) {
            console.log("The condition is met");
            res.writeHead(200, {
                'Content-Type': 'text/plain',
                'Access-Control-Allow-Origin': '*'
            });
    
            res.write(callbackFnName + "('ok')", 'utf8');
            res.end();
        }
    
        var urlparts = req.url.split('?'); 
        if (urlparts.length >= 2) {   
            var query = urlparts[urlparts.length-1].split('&');
            for (var p=0; p < query.length; ++p) {    
                var pair = query[p].split('=');  
                if(pair[0] === 'id'){
                    usuario_id = pair[1]; 
                }
            }
        }
    
        if (date - req.socket._idleStart > 5000) {
            var strQuery = "SELECT * FROM notificaciones WHERE notificacion_para_id = " + usuario_id; 
            pool.getConnection(function(err, connection) {
                if (err)
                    throw err;
                connection.query(strQuery, function(err, rows) {
                    if (err) {
                        res.writeHead(200, {
                            'Content-Type': 'text/plain',
                            'Access-Control-Allow-Origin': '*'
                        });
    
                        res.write(callbackFnName+ "('Error')" , 'utf8');
                        res.end();
    
                        connection.release(); 
                        console.error(err);
                        return;
                    } else {
                        res.writeHead(200, {
                            'Content-Type': 'text/plain',
                            'Access-Control-Allow-Origin': '*'
                        });
    
                        res.write(callbackFnName + "('" + rows.length + "')", 'utf8');
                        res.end();
                        connection.release();
                    }
                });
            });
        }
        setTimeout(function() {
            checkMessages(req, res);
        }, 3000);
    
    }
    
    Saben como manejar la seguridad en el lado del servidor con Node? es decir que solo el usuario autenticado pueda hacer las peticiones???

    Por cierto mucho mejor que hacer lo mostrado arriba en Node es hacerlo usando sockets en Node.

    Si pueden aportar a mejorar el Comet gracias!!!

    Por cierto cómo puedes afirmar que las notificaciones de ML usan Node??? ando revisando su código y no encuentro algo que explicitamente me haga pensar que usan Node.
     
  10. danielpz

    danielpz Miembro maestro

    Registro:
    24 Nov 2011
    Mensajes:
    507
    Likes:
    105
    Extra: No he usado Node jamas, ni sé como funciona, si encuentras la mejor manera de implementarlo a tu desarrollo, me compartes el codigo compañero, seria genial tenerlo en mi web :)

    Nota: Investigaré NODE en la noche, aver q tal, y si logro plasmar un codigo primero que tu, te lo paso para q pruebes :)
     
Etiquetas: