重新连接

时间:2016-01-25 04:14:03

标签: javascript jquery socket.io

我可能知道在客户端断开连接并重新连接聊天消息后不再显示在客户端浏览器上的代码的哪一部分,但是聊天仍然发送到服务器,而其他用户将能够看到该消息,只是原始发件人本身将无法接收邮件。我不知道是socket问题还是javascript问题?

提前致谢并抱歉我的英语不好:)

套接字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>

1 个答案:

答案 0 :(得分:2)

断开连接并重新连接时,您正在失去监听器,因此将监听器保留在函数内并在每次连接时调用它都应该没问题。

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

}