套接字IO在重新连接后未接收到发射数据 [英] Socket IO not receiving emit data after reconnect

问题描述

我是否可以知道在客户端断开连接并重新连接聊天消息之后导致代码的哪一部分不再显示在客户端浏览器上，但是聊天仍会发送到服务器，其他用户将只能看到该消息原始发件人本身将无法接收该消息.我想知道这是套接字问题还是JavaScript问题?

may i know which part of the code that cause after the client disconnect and reconnect the chat message no longer show on the client browser, however the chat is still emit to server and other user will be able to see the message, just the original sender itself won't able to receive the message. I wonder it is socket issue or javascript issue?

在此先感谢您的英语不好:)

Thanks in advance and sorry for my bad english :)

Socket IO版本1.3.7

注意:我正在将聊天与laravel集成在一起，因此这里不会使用任何nodejs路由，我想这不会对我造成任何问题，因为聊天能够正常运行...只是我上面的问题目前正面临

//server.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection', function(socket){
    //console.log('a user connected: ' + socket.id);
    socket.on('disconnect', function(){
        console.log( socket.name + ' has disconnected from the chat.' + socket.id);
        io.emit('user', io.sockets.sockets.length);
        io.emit('chat message', socket.name + ' has disconnected from the chat.');
    });
    socket.on('join', function (name) {
        socket.name = name;
        console.log(socket.name + ' joined the chat.'+ socket.id);
        io.emit('user', io.sockets.sockets.length);
        io.emit('chat message', socket.name + ' joined the chat.');
    });
    socket.on('chat message', function(msg){
        io.emit('chat message', msg);
        console.log(msg);
    });
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

''

//Client code here
<div class="board" style="position: absolute;right:40%;width:350px;height:500px;" id="liveQuickAskDesk">

        <h2 class="timberGradient">Live Quick Ask Desk</h2>
        <div id="innerQuickAskDesk">
            <span id="total_user"></span> staff online currently
            <button type="button" id="disconnect" class="btn btn-danger">Offline</button>
            <div class="col-lg-12" id="messagewindow" style="position: absolute;height:330px;overflow: auto;">
                <span id="messages"></span>
            </div>
            <div class="col-lg-12">
                <form style="position: absolute;margin:110% 0 0 0;width:320px;">
                    <div class="form-group">
                        <label>Message:</label>
                        <input type="text" class="form-control" id="m">
                    </div>
                </form>
            </div>
        </div>

        <div class="col-lg-12 center-block" id="connect_div">
            <button type="button" id="connect" class="btn btn-primary center-block" style="margin-top: 50%;">Online</button>
        </div>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>

      $("#connect_div").hide();
      var socket = io.connect('http://localhost:3000');
      var name = "<?php echo $user_name ?>";

      $('#disconnect').click(function(){
          socket.disconnect();
          $("#liveQuickAskDesk").css('background', 'rgba(0,0,0,0.1)');
          $("#innerQuickAskDesk").hide();
          $("#connect_div").show();
          $('#messages').html("");
      });
      $('#connect').click(function(){
          socket = io.connect('http://localhost:3000',{'forceNew':true});
          socket.on('connect', function(msg){
              socket.emit('join', name);
              console.log("client reconnect to the server");
          });
          $("#liveQuickAskDesk").css('background', 'rgba(0,0,0,0)');
          $("#connect_div").hide();
          $("#innerQuickAskDesk").show();

      });

      socket.on('connect', function(msg){
          socket.emit('join', name);
          console.log("client join the server");
      });
      socket.on("disconnect", function(){
          console.log("client disconnected from server");
      });

      $('form').submit(function(){
      $('#messagewindow').animate({ scrollTop:$('#messagewindow').prop('scrollHeight')}, 10);
        socket.emit('chat message', "Staff "+name+": "+$('#m').val());
        $('#m').val('');
        return false;
      });

      socket.on('user', function(msg){
        $('#total_user').html(msg);
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<p>').text(msg));
      });

    </script>

</div>

推荐答案

在断开连接和重新连接时，您将丢失侦听器，因此将侦听器保留在函数中并在每次连接时调用它都是可以的.

You are losing your listeners when disconnect and reconnect, so keeping your listeners inside a function and calling it each time you connect should be ok.

socket = io.connect('http://localhost:3000',{'forceNew':true});
setevts();

 function setevts () {

   socket.on('connect', function(msg){
      socket.emit('join', name);
      console.log("client join the server");
  });

  socket.on("disconnect", function(){
      console.log("client disconnected from server");
  });

   socket.on('user', function(msg){
    $('#total_user').html(msg);
  });

  socket.on('chat message', function(msg){
    $('#messages').append($('<p>').text(msg));
  });

}

这篇关于套接字IO在重新连接后未接收到发射数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！