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.

Answer 2

I think the issue is that on your client side code you're wrapping your sockets in an ajax event. You should just use events to emit messages with the sockets.

What is happening is that on the success of the form submit you are emitting an event to send a message to the server. All of this is working correctly as it is written, but the flow of data is wrong because you shouldn't be doing the form submit. This post from David Walsh has a simple example and a downloadable zip of an example that you can look at/probably work off of.