Question posted in
You can find the official documentation here.

Jquery ajax – How To Refresh Chat using ajax

I’m implementing text chat based on twilio api ,I have functions do the following loads the chat on click ,send message,get last message (setting interval to 1sec to update in real time) and i will add check if the data is unset do nothing else fetch last message,
I need to get the data value of the current clicked item

here is the script and the logs

[![<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]
Tags:

2

Answers


  1. 0

    what you are doing is a pull method: setInterval is not the best idea because it keeps calling your server with or without a change, imagine if you have 1000 users each one of them will send a request to the server every second.

    I advise you to use a push method such as SignalR. here is a demo for chat that you can do with small number of lines

    Login or Signup to reply.
  2. 0

    try this 

    var $container = $("#contacts li");
    $container.load("rss-feed-data.php");
    var refreshId = setInterval(function()
    {
        $container.load('rss-feed-data.php');
    }, 9000);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search