问正在重新加载获取的聊天区
EN

Stack Overflow用户

提问于 2017-11-01 14:03:48

回答 1查看 38关注 0票数 1

我已经使用php+ajax +mysql创建了一个聊天系统，它在获取和插入方面运行良好，但无法重新加载新聊天。例如:用户'x‘正在与用户'y’聊天，所以当用户x向y发送消息时，只有x的消息区会实时显示新发送的消息，而y的side.the中不会发生同样的事情。我的jquery代码是：

 <script>  
 $(document).ready(function(){  
  $(document).on('click', '.first_name', function(){  
       var id=$(this).data("id1");  
       fetch_chat();
              function fetch_chat()  
                {  
                    $.ajax({  
                    url:"fetch_chat.php",  
                    method:"POST",  
                    data:{id:id},  
                    dataType:"text",  
                    success:function(data){  
                    $('#messages').html(data);  
                    $("div.area").show();
                    }     

                  });  
                }  


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

  });  
 });  
 </script>

php

jquery

ajax

腾讯云BI 新春特惠

首年仅需9.9元，续费同价

回答 1

Stack Overflow用户

发布于 2017-11-01 14:17:16

优先：将fetch_chat函数放在onclick之外，甚至在document.ready块之外。您正在定义单击时的fetch函数！

Second:人员Y必须定期获取聊天内容(例如javascript setInterval)，以便每隔1秒(例如)从服务器接收响应。

但是，如果您想尽快获取数据，有一种hack方法，即Y向服务器发送单个请求，并等待服务器响应他。在这种方法中，你必须在服务器端创建一个重复任务，而不是在用户浏览器中重复任务。服务器任务定期向数据库发送请求，当有新的数据获取时，将其推送到Y人的排队请求中。Y一收到响应，就向服务器发送新的请求，并再次等待接收响应。在这种方法中，必须处理网络超时和服务器超时，或者您也可以从Y侧定义一个额外的间隔(以长周期为单位)来克服网络超时。

一个非常简单的服务器端响应模拟：

来自Y浏览器的请求：

$.ajax({
   url: 'serverside-fetch.php',
   success: function(data){
       $("#messages").append(data);
   }
})

来自服务器serverside-fetch.php的响应

var data="";
while (data=="") {
   //data= fetch recent unread rows from chat database
}
echo data;

这是在X侧修正的代码：

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

  });

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

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