socket.io/?EIO=3&transport=polling&t=1345678 senza addebito

Question

Ho fatto una chat usando node.js, express e socket.io. Ecco il codice app.js:

var express = require('express'), 
    app = express(), 
    server = require('http').createServer(app), 
    io = require('socket.io').listen(server); 

server.listen(process.env.PORT || 8080); 



app.use(express.static(__dirname + '/')); 


io.on('connection', function(socket){ 
    socket.on('message sent', function(data){ 
    io.emit('receive', { msg: data.msg, uname: data.uname, uid: data.uid, uimg: data.uimg }); 
    }); 

    socket.on('message sent room', function(data){ 
    console.log(data.mid); 
    io.in(data.uroom).emit('receive', { msg: data.msg, uname: data.uname, uid: data.uid, uimg: data.uimg, mid: data.mid }); 
    }); 

    socket.on('join', function(data){ 
    io.emit('join user', { uname: data.uname, uid: data.uid }); 
    }); 

    socket.on('create', function (room) { 
    socket.join(room); 
    }); 

}); 

ed ecco il mio codice sul mio file Haml

%script{:src => "https://cdn.socket.io/socket.io-1.2.0.js"} 

    - if Rails.env.production? 
     :javascript 
     var socket = io.connect('https://myherokuappurl.herokuapp.com/'); 
    - else 
     :javascript 
     var socket = io.connect('http://localhost:8080/'); 

    :javascript 
     var userId = "#{current_user.id}"; 
     var userName = "#{current_user.name}"; 
     var userImg = "#{@userImage}"; 
     var room = "#{@conversation.id}"; 
     var messageId = 0; 

     $(document).ready(function(){ 
     socket.emit('create', room); 
     $("#m").focus(); 
     var wtf = $('.panel-chat'); 
     var height = wtf[0].scrollHeight; 
     wtf.scrollTop(height); 
     }); 

     $('form').submit(function(){ 
     var message = $('#m').val(); 
     $.ajax({ 
      type: "POST", 
      url: "#{dashboard_messages_path}", 
      dataType : 'json', 
      data: {'message' : {'conversation_id': room, 
       'body': message, 
       'user_id': userId} }, 
      success: function(data) { 
      console.log(data.id); 
      messageId = data.id; 
      socket.emit('message sent room', {msg: $('#m').val(), uname: userName, uid: userId, uimg: userImg, uroom: room, mid: messageId}); 
      $('#m').val(''); 
      } 
     }); 
     return false; 
     }); 

     socket.on('receive', function(data){ 
     var message = '<tr><td class="td-chat"><div class="text-center"><img alt="'+data.uname+'" class="avatar center-block" src="'+data.uimg+'" height="60" width="60"></div></td><td><small><strong>'+data.uname+':<br></strong></small>'+data.msg+'</td></tr>'; 
     var currentMessageId = data.mid; 

     if (data.uid != userId) { 
      $.ajax({ 
       type: "GET", 
       url: "#{dashboard_message_read_path}", 
      dataType : 'json', 
       data: {'message_id':currentMessageId } 
      }); 
     } 
     $("#table-chat").append(message); 
     var wtf = $('.panel-chat'); 
     var height = wtf[0].scrollHeight; 
     wtf.scrollTop(height); 
     }); 

     socket.on('join user', function(data){ 
     if (data.uid != userId) { 
      $("#userjoin").text(data.uname + " se ha unido!").show().fadeOut(5000); 
     } 
     }); 

Ma per fare questo lavoro devo aggiornare la pagina della chat. Ho notato che la prima volta che l'utente entra nella pagina di chat, ma non ha il seguente file:

https://myherokuappurl.herokuapp.com/socket.io/?EIO=3&transport=polling&t=1xxxxxx-0

o questo sulla mia macchina locale

http://localhost:8080/socket.io/?EIO=3&transport=polling&t=1xxxxxx-0

Quindi la chat non invia il messaggio, invece quando si preme invio per inviare il messaggio, il la pagina si aggiorna e questa volta ho il seguente file e tutto funziona alla grande.

https://myherokuappurl.herokuapp.com/socket.io/?EIO=3&transport=polling&t=1xxxxxx-0

o questo sulla mia macchina locale

http://localhost:8080/socket.io/?EIO=3&transport=polling&t=1xxxxxx-0

Quale potrebbe essere il problema qui, perché questo comportamento si verifica sul mio localmachine e produzione.

Grazie in anticipo per il vostro aiuto.

Answer 1

Anche se penso che Bradgnar abbia probabilmente ragione, potresti anche incappare in un problema di caricamento: un utente non ha ancora caricato la risorsa cdn per la prima volta. Ma quando si esegue l'invio e dopo un aggiornamento della pagina, il file viene caricato istantaneamente. Se questo è il problema, il comando io.connect non viene eseguito perché io non esiste ancora. Sposta qualsiasi inizializzazione effettiva al metodo document.ready.

Answer 2

Penso che il problema sia che sul codice lato client si stanno avviando le prese in un evento Ajax. Dovresti semplicemente usare gli eventi per emettere messaggi con i socket.

Che cosa sta accadendo è che sul successo del modulo di invio si sta emettendo un evento per inviare un messaggio al server. Tutto ciò funziona correttamente come è scritto, ma il flusso di dati è sbagliato perché non dovresti fare il modulo di invio. This post from David Walsh ha un semplice esempio e un zip scaricabile di un esempio che puoi guardare/probabilmente lavorare fuori.