0

He integrado socket.io en mi proyecto para obtener características en tiempo real. Casi todo está trabajando bien, pero cada vez que refresco la página, la conexión no se cierra y se duplica, causando conexiones múltiples para un solo usuario.

Este es mi evento en el servidor de sockets.

Sockets_server.js

socket.on('new-publication', function(data){
    console.log(data.pub);
    io.sockets.emit('new-publication', data)
})

socket.on('do-publication', function(data){
    console.log('Info: ' + data.nombre);
    io.sockets.emit('do-publication', data)
})

Este es el servidor de mi App:

Server.js

socket.on('new-publication', function(data){
                var datos_pub;
                console.log(data.pub);
                var currentdate = new Date();
                var datetime = currentdate.getFullYear() + "-"
                + (currentdate.getMonth()+1) + "-"
                + currentdate.getDate() + " "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();

                var publicacion = {
                    id_user : req.user.id,
                    publicacion : data.pub,
                    imagen : null,
                    fecha_pub : datetime
                };

                function formatoFecha(datestring){
                    var currentdate = new Date();
                    var fecha = new Date(datestring);
                    var hora;
                    var day = new Date(datestring);
                    var weekday = new Array(7);
                    weekday[0] =  "Domingo";
                    weekday[1] = "Lunes";
                    weekday[2] = "Martes";
                    weekday[3] = "Miercoles";
                    weekday[4] = "Jueves";
                    weekday[5] = "Viernes";
                    weekday[6] = "Sabado";
                    var daySemana = weekday[day.getDay()];

                    if (fecha.getDate() >= currentdate.getDate()) {
                        if (fecha.getHours() >= currentdate.getHours() && fecha.getMinutes() >= currentdate.getMinutes()) {
                            hora = 'hace un momento'
                        }else{
                            if (fecha.getMinutes()<10) {
                                hora = 'hoy a las ' + fecha.getHours() + ':0' + fecha.getMinutes();
                            }else{
                                hora = 'hoy a las ' + fecha.getHours() + ':' + fecha.getMinutes();
                            }

                        }

                    }else{
                        if (fecha.getMinutes()<10) {
                            hora = daySemana + ' ' + fecha.getDate() + ' a las ' + fecha.getHours() + ':0' + fecha.getMinutes();
                        }else{
                            hora = daySemana + ' ' + fecha.getDate() + ' a las ' + fecha.getHours() + ':' + fecha.getMinutes();
                        }
                    }

                    return hora;
                }

                function loadSelect(id) {

                    var resultado = {};
                    db.query('SELECT publicaciones.publicacion, publicaciones.fecha_pub, users.nombre AS nombre, users.image AS image FROM publicaciones JOIN users ON publicaciones.id_user = users.id where id_publicacion=' + id, function(err, rows, fields){


                        socket.emit('do-publication', {
                            nombre: rows[0].nombre,
                            publicacion: rows[0].publicacion,
                            fecha: formatoFecha(rows[0].fecha_pub),
                            image: rows[0].image
                        });
                    });
                }

                db.query('INSERT INTO publicaciones SET ?', publicacion, function(err, rows, fields){
                    if(err) throw err;
                    //db.end();
                    datos_pub =  rows.insertId;
                    loadSelect(datos_pub);


                });
          });

Lado del cliente:

SocketJQ.js

$(document).ready(function(){

  var socket = io.connect('http://localhost:8081', {transports: ['websocket'], upgrade: false});

  socket.on('do-publication', function(data){
    console.log(data.image);
    var imageprofile = "http://localhost:3000/images/upload_images/"+data.image;
   var $items = $('<div id="card-container" class="grid-item"><div class="card"><img class="avatar" src="'+imageprofile+'"><div class="name">'+data.nombre+'</div><div class="date">'+data.fecha+ '</div><p class="card">'+data.publicacion+'</p></div></div>');
   // prepend items to grid
   $grid.prepend( $items )
     // add and lay out newly prepended items
     .masonry( 'prepended', $items );
  })

  socket.on('users-connected', function(data){
    console.log('Usuarios conectados: ' + data);
  })

  $('#Button-Post-Publication').click(function(e){
    e.preventDefault();
    var publication = $('#Text-Area-Publication').val();
    var imagen = $('#upfile').val();
    console.log(imagen);
      if(imagen==""){
        socket.emit('new-publication', {pub: publication})
      }else{
        socket.emit('uploadfiles', {pub: publication, img: imagen})
      }

  })

})

WebSockets_Server.js

//websockets
var messages = 'Recibido';
var Usuarios = 0;

app.use(express.static('public'));

//Creamos el servidor websockets
io.sockets.on('connection', function(socket) {
  //Se conecto al socket e incrementa la cuenta
  Usuarios++;
  //Vamos a decirle a todos los sockets cuantos usuarios se conectaron
  console.log('Usuarios totales: ' + Usuarios);
  io.sockets.emit('users-connected', Usuarios);

  socket.on('disconnect', function() {
    //disminuye la cuenta en los usuarios conectados
    Usuarios--;
    io.sockets.emit('users-connected', Usuarios);
  });

  socket.on('new-publication', function(data){
    //Nueva publicacion realizada, la envia a todos los sockets
    console.log('Mensaje del usuario: ' + data.pub);
    io.sockets.emit('new-publication', data)
  })

  socket.on('uploadfiles', function(data,buffer){
    var fs = require('fs');

    var fileName = __dirname + '/public/images/upload_images/'+ data.img;

    fs.open(fileName, 'a', 0755, function(err, fd) {
      if (err) throw err;

      fs.write(fd, buffer, null, 'Binary', function(err, written, buff) {
        fs.close(fd, function() {
          console.log('File saved successful!');
        });
      })
    });
    //Nueva publicacion realizada, la envia a todos los sockets
    console.log('Mensaje del usuario: ' + data.pub);
    io.sockets.emit('uploadfiles', data)

  })

  socket.on('uploadimage', function(data){
    //Nueva publicacion realizada, la envia a todos los sockets
    console.log('Mensaje del usuario: ' + data.pub);
    io.sockets.emit('uploadimage', data)
  })

  socket.on('do-publication', function(data){
    //Nueva publicacion realizada, la envia a todos los sockets

    console.log('Info: ' + data.nombre);
    io.sockets.emit('do-publication', data)
  })

});

http.listen(8081, function() {
  console.log("websockets corriendo en el puerto 8081");
});
6
  • el código que muestras del archivo Server.js es todo el que contiene?
    – J.Correa
    el 4 sep. 2017 a las 21:28
  • No lo es todo, pero esos son los eventos implicados en el duplicado de información.
    – Raúl Vega
    el 4 sep. 2017 a las 21:53
  • tienes el evento disconnect?
    – J.Correa
    el 4 sep. 2017 a las 21:56
  • Así es, edite la pregunta para agregar el archivo "WebSockets_Server.js" que es donde se encuentra.
    – Raúl Vega
    el 4 sep. 2017 a las 22:04
  • normalmente para controlar este tipo de situaciones, se usa un ID por cada conexión, así cuando se conecta alguien puedes detectar si es nuevo o si ya estaba (podría abrir otra pestaña y entrar aparte de recargar la página), para esto revisa socket.io/docs/server-api
    – J.Correa
    el 4 sep. 2017 a las 22:05

2 respuestas 2

1

hace tiempo me paso lo mismo cuando estaba probando react.js y me di cuenta 1. Que no es recomendable usar react con jquery. 2. Que una aplicacion a una sola pagina los eventos que manejaba con el "on" ejemplo

$(document).on('click', '.item', callback())

Este tipo de eventos le debes de hacerles el off

$(document).off('click', '.item', callback())

Creo que lo tuyo tiene algo que ver con esto, trata de hacer lo mismi sin Jquery o apagando los eventos despues de usarlos

0

me paso lo mismo, quitale el doc.ready de jquery ejecuta tu codigo jq sin esperar que los demas componentes se carguen antes

3
  • Esto realmente no responde a la pregunta. Si tienes una pregunta diferente, la puedes formular haciendo clic en Formular una pregunta. También puedes ofrecer una recompensa para atraer más atención a esta pregunta cuando tengas suficiente reputación. - Desde revisión el 6 mar. 2020 a las 21:12
  • no necesito formular una pregunta, tuve este problema y lo soluciones quitando el $(document).ready(function()=>{}
    – Enzo
    el 6 mar. 2020 a las 21:23
  • Puedes mejorar tu respuesta agregando una explicación a lo que propones, y también un ejemplo de cómo lo hiciste tú o adaptando el código de la pregunta de una forma que dices que funciona. Usa la sintaxis correcta y formatea el código como codigo. Te puede servir leer ¿Cómo escribo una buena respuesta? y también en ¿Cómo preguntar? encontrarás cómo mejorar también la preguntas y respuestas en general. el 6 mar. 2020 a las 22:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.