Socket IO not receiving emit data after reconnect

问题:

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 Version 1.3.7

Notes: I am integrating the chat with laravel so will not use any nodejs routing here, i guess it wont cause any problem for me right since the chat is able to function normally...just the problem above i currently facing now

//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>

回答1:

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

}