socket.io/?EIO=3&transport=polling&t=1345678 no charging

Question

I made a chat using node.js, express and socket.io. Here is the app.js code:

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

});

and here is my code on my haml file

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

But in order to make this work I have to refresh the chat page. I notice that the first time the user enters to the chat page, it does not have the following file:

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

or this on my local machine

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

So the chat does no send the message, instead when you press enter to send the message, the page refreshes and this time I have the following file and everything works great.

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

or this on my local machine

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

What could be the problem here, because this behavior occurs on my localmachine and production.

Thanks in advance for your help.

Answer 1

Although I think Bradgnar is probably right, you might also run into a loading issue: a first time user does not have the cdn resource loaded yet. But when doing the submit and after a page refresh, the file is instantly loaded. If this is the problem, your io.connect command is not executed because io does not exist yet. Move any actual initialisation to the document.ready method.