socket.io/?EIO=3&transport=polling&t=1345678 不充电

Question

我使用 node.js、express 和 socket.io 进行了聊天。这是 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);
  });

});

这是我的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);
        }
      });

但为了完成这项工作，我必须刷新聊天页面。我注意到用户第一次进入聊天页面时，它没有以下文件：

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

或者这个在我的本地机器上

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

所以聊天不会发送消息，而是当您按 Enter 发送消息时，页面会刷新，这次我有以下文件，一切正常。

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

或者这个在我的本地机器上

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

这可能是什么问题，因为这种行为发生在我的本地机器和生产环境中。

提前感谢您的帮助。

Answer 1

虽然我认为 Bradgnar 可能是对的，但您也可能会遇到加载问题：第一次使用的用户还没有加载 cdn 资源。但是在提交时和页面刷新后，文件会立即加载。如果这是问题所在，则您的 io.connect 命令未执行，因为 io 尚不存在。将任何实际初始化移动到 document.ready 方法。

Answer 2

我认为问题在于，在您的客户端代码中，您将套接字包装在 ajax 事件中。您应该只使用事件通过套接字发出消息。

发生的情况是，在表单提交成功时，您会发出一个事件以向服务器发送消息。所有这些在编写时都可以正常工作，但是数据流是错误的，因为您不应该提交表单。 This post from David Walsh 有一个简单的示例和一个示例的可下载 zip，您可以查看/可能会使用它。