Как обновить чат используя 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]

Всего 2 ответа


то, что вы делаете, это метод pull : setInterval - не лучшая идея, потому что он продолжает вызывать ваш сервер с изменениями или без них, представьте, что если у вас есть 1000 пользователей, каждый из них будет отправлять запрос на сервер каждую секунду.

Я советую вам использовать метод push, такой как SignalR . вот демо для чата, которое вы можете сделать с небольшим количеством строк


попробуй это

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

Есть идеи?

10000