Question

我一直在尝试使用php + ajax + mysql创建一个聊天系统。

 <?php
   session_start();
 ?>
 <html>  
     <head>  
         <title>Live Table Data Edit</title>  
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
     </head>  
     <body>  
         <div class="container">  
            <br />  
            <br />  
            <br />  
            <div class="table-responsive">  
                 <h3 align="center">You Are : <?php echo $_SESSION['name']; 
                ?></h3><br />  
                 <div id="live_data"></div>                 
            </div>  
            <div id="messages"></div> 
            <div class="area" style="display:none">
            <textarea id="text" name="text"></textarea>
            <input type="submit" id="sub" name="sub" value="Send" />
            </div>
       </div>  
  </body>  
</html>  

<script>  
$(document).ready(function() {
  function fetch_data() {
    $.ajax({
      url: "select.php",
      method: "POST",
      success: function(data) {
        $('#live_data').html(data);
      }
    });
  }
  fetch_data();

  $(document).on('click', '.first_name', function() {
    var id = $(this).data("id1");

    function fetch_chat() {
      $.ajax({
        url: "fetch_chat.php",
        method: "POST",
        data: {
          id: id
        },
        dataType: "text",
        success: function(data) {
          $('#messages').html(data);
          $("div.area").show();
        }

      });
    }

    function myTimeoutFunction() {
      fetch_chat();
    }

    myTimeoutFunction();
    setInterval(myTimeoutFunction, 1000);

    fetch_chat();
    $("#sub").click(function() {
      var text = $("#text").val();
      $.post('insert_chat.php', {
        id: id,
        msg: text
      }, function(data) {
        $("#messages").append(data);
        $("#text").val('');

      });
      alert(text);
    });
  });
});
</script>

但是这段代码的问题在于它只适用于我聊天的第一个用户，但是当我点击其他用户时屏幕开始频繁闪烁。名称。例如：用户＆＃39; a＆＃39;登录并点击用户＆＃39; b＆＃39;并开始聊天。一切正常，直到现在，但当用户＆＃39; a＆＃39;我想与其他用户聊天＆＃39; c＆＃39;整个聊天部分开始闪烁，所有聊天都存储在数据库中。请告诉我哪里出错了。

Answer 1

您正在使用setInterval，这是错误的，每次点击聊天时都会启动循环，您应该在所有聊天中运行一个循环。另外，请考虑使用setTimeout而不是setInterval来确保首先获得响应。

Answer 2

这需要彻底重新思考，以摆脱所有潜在的错误。

您在上面描述的问题是因为您每次有人点击某个名称时都会创建一个新的定时间隔，所以逐渐建立起来并且您每隔几毫秒而不是每秒请求一次。这是不可持续的。在名称的“click”处理程序中，不需要真正声明间隔，函数等。我认为你这样做是因为选择名称导致对用户ID的依赖。但是，您可以通过将值分配给全局变量来克服这个问题。

这样做意味着您可以移动点击处理程序之外的所有功能，从而消除多次重新创建相同间隔/事件的危险。我也改了它，所以不使用间隔。相反，fetch_chat在收到上一个响应后2秒再次调用自身。这样，如果获取时间超过正常时间，则不会有多个并行运行的竞争获取操作，从而导致潜在的混淆。我还将时间间隔增加到仍然合理的东西，但不会使服务器过载。

以下是对代码的完整修改：

bus_no   time
Bus1     2.0
Bus2     840.0
Bus3     2340.0
Bus4     15.0
Bus5     1205.0
Bus6     1304.0
Bus7     1620.0
Bus8     9.0

P.S。如果你想要比刷新2秒更快的东西，那么你可能需要考虑使用websockets重新构建解决方案以获得完整的双向通信，因此服务器可以将聊天项“推送”到客户端而不是客户端必须轮询服务器。

为每个用户刷新聊天正文

2 个答案: