Javascript 如何使用ajax刷新聊天记录

我正在基于twilio api实现文本聊天，我有以下功能：点击时加载聊天，发送消息，获取最后一条消息（将间隔设置为1秒以实时更新），我将添加检查数据是否未设置，不做其他操作获取最后一条消息， 我需要获取当前单击项的数据值

这是脚本和日志

[![<script type="text/javascript">
    $(document).ready(function(){
loadContacts();
displayChatOnclick();
setInterval(getlastmsg,1000);
}
  );
    //when the user clicks on contacts div fetch the chat history
    function displayChatOnclick(){   
$('#contacts').on('click','li',function() {
    var channel = $(this).closest('li').attr('data-channel');
    var name=$(this).closest('li').attr('data-name'); 
    console.log(channel);
    fetchChat(channel,name);
    sendmsg();
    //check if new msg is sent
});
}
    function fetchChat(channel,name){
$.ajax({
        url: 'loadchat.php',
        type: 'POST',
        data: { channel:channel,name:name },


success: function(msg) {
                       console.log(name);
                       $('#conversation').html(msg);
                       }
});    
}
function loadContacts(){
    $.ajax({
            url: 'loadcontacts.php',
            type: 'POST',


            success: function(msg) {
                                   $('#contacts').html(msg);
                                   }
          });    
}
//function to get the last msg 
function getlastmsg(){
  var channel = $('#contacts li').data('data-channel');
    var name=$('#contacts li').data('data-name'); 



    //check if channel and name is null do nothing else fetch last message

    console.log(name);




}
//function to send a msg
function sendmsg(){

      $("#send").click(function() {
          var channel=$(this).data('ch');
         var message=$("#msg").val();
              $('#msg').val('');

          console.log(msg);
        $.ajax({
            type: "POST",
            url: "sendmsg.php",
            data: {
                msg: message,
                channel:channel,

            },
            success: function(result) {
                console.log("sent");
           $('#b').append(result);
              }
        });
    });
}

</script>][1]][1]

[[
$（文档）.ready（函数（）{
loadContacts（）；
displayChatOnclick（）；
设置间隔（getlastmsg，1000）；
}
);
//当用户单击contacts div时，获取聊天历史记录
函数displayChatOnclick（）{
$（'#contacts'）。在（'click'，'li'，function（）上{
var channel=$（this.nexist（'li'）.attr（'data-channel'）；
var name=$（this.nexist（'li'）.attr（'data-name'）；
控制台日志（通道）；
fetchChat（频道、名称）；
sendmsg（）；
//检查是否发送了新消息
});
}
功能fetchChat（频道、名称）{
$.ajax({
url:'loadchat.php'，
键入：“POST”，
数据：{channel:channel，name:name}，
成功：功能（msg）{
console.log（名称）；
$（'#conversation'）.html（msg）；
}
});    
}
函数loadContacts（）{
$.ajax({
url:'loadcontacts.php'，
键入：“POST”，
成功：功能（msg）{
$（'#contacts'）.html（msg）；
}
});    
}
//函数获取最后一条消息
函数getlastmsg（）{
变量通道=$（'#contacts li'）。数据（'data-channel'）；
变量名称=$（'#contacts li'）。数据（'data-name'）；
//检查通道和名称是否为空，不执行其他操作获取最后一条消息
console.log（名称）；
}
//函数发送消息
函数sendmsg（）{
$（“#发送”）。单击（函数（）{
变量通道=$（this.data（'ch'）；
var message=$（“#msg”）.val（）；
$（'#msg'）.val（''）；
控制台日志（msg）；
$.ajax({
类型：“POST”，
url:“sendmsg.php”，
数据：{
消息:，
频道:频道,，
},
成功：功能（结果）{
控制台日志（“已发送”）；
$（'#b'）。追加（结果）；
}
});
});
}
][1]][1]

您所做的是一种拉式方法：

setInterval

不是最好的主意，因为它会不断调用您的服务器，无论有无更改，想象一下，如果您有1000个用户，他们中的每个人都会每秒向服务器发送一个请求

我建议您使用推送方法，例如信号器

试试这个

var $container = $("#contacts li");
    $container.load("rss-feed-data.php");
    var refreshId = setInterval(function()
    {
        $container.load('rss-feed-data.php');
    }, 9000);

---

最好考虑WebSoCube的聊天应用程序，请尝试发布一个更清晰的问题和一个更好的格式化代码。解决第一个问题的一种方法是加载内容，一旦承诺得到解决，您就可以在

then（）

内设置间隔，或者因为您使用的是jQuery，您可以查看一下。这并不能回答OP的问题。您是认真的吗？所以对你来说拉比推好？对不起，刚刚编辑了我的回答。我最初说，投票比WebSocket更有效。我意识到我应该对评论进行限定，因为这并不一定在所有情况下都是正确的。所以我删除了评论。我仍然认为WebSocket并没有明显的优越性，即使对于聊天应用程序也是如此。问题是，对于应用程序的每个用户，都需要维护一个连接。这不一定能很好地扩展，而且可能会占用大量资源。通常，轮询可以更有效。但是OP的情况是聊天系统。我不认为在他的情况下应该考虑拉动，如果是一种不同类型的系统，需要数据，但不是实时的，那么他会缩短间隔时间，也许你所说的是最好的。OP正在尝试调试某些东西。我认为你关于考虑websockets解决方案的建议很好，只是没有回答问题。谢谢你的回答，检查更新的问题