Php 重新加载获取的聊天区_Php_Jquery_Ajax

Php 重新加载获取的聊天区

php jquery ajax

Php 重新加载获取的聊天区,php,jquery,ajax,Php,Jquery,Ajax,我已经使用php+ajax+mysql创建了一个聊天系统，该系统在获取和插入方面运行良好，但无法重新加载新聊天。例如：用户“x”正在与用户“y”聊天，因此当用户x向y发送消息时，只有x的消息区域实时显示新发送的消息，而不是在y侧。y侧也会发生同样的情况。我的jquery代码是： <script> $(document).ready(function(){ $(document).on('click', '.first_name', function(){

我已经使用php+ajax+mysql创建了一个聊天系统，该系统在获取和插入方面运行良好，但无法重新加载新聊天。例如：用户“x”正在与用户“y”聊天，因此当用户x向y发送消息时，只有x的消息区域实时显示新发送的消息，而不是在y侧。y侧也会发生同样的情况。我的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>


$（文档）.ready（函数（）{
$（文档）.on（'click'，'first_name'，function（）{
var id=$（this.data（“id1”）；
fetch_chat（）；
函数fetch_chat（）
{  
$.ajax（{
url:“fetch_chat.php”，
方法：“张贴”，
数据：{id:id}，
数据类型：“文本”，
成功：函数（数据）{
$（'#messages'）.html（数据）；
$（“分区面积”）.show（）；
}     
});  
}  
$（“#sub”）.off（“click”）.on（“click”，函数）（）{
var text=$（“#text”）.val（）；
$.post（'insert_chat.php'，{id:id，msg:text}，函数（数据）{
$（“#消息”）。追加（数据）；
$（“#文本”）.val（“”）；
});
});
});  
});

首先：将获取聊天功能从

onclick

甚至从

document.ready

块中取出。您正在定义点击获取函数

Second:用户Y必须获取聊天内容周期（例如，

javascript setInterval

），以便每1秒（例如）接收来自服务器的响应

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

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

来自Y浏览器的请求：

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

从服务器响应服务器端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();
          }     
         });  
     }