jQuery ajax, appending data work but will the data be visible to other end(computer/user)?

This whole project and code will be hosted to php, mysql hosting server later.

code:

$(document).ready(function(){
    console.log('hello');
    $('input[name="nm_submit_comment"]').on('click', function(e){
        e.preventDefault();

        var frm = $(this).closest("form");
        var frm_id = frm.attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];

        var frm_serialized = frm.serialize();

        $.ajax({
            url: "save-comment.php",
            method: "POST",
            data: frm_serialized,
            success: function(data) {                    
                data = JSON.parse(data);                    
                $('div#id_div_comment_' + frm_id_splitted_2).append('<div class="cl_div_comment_content">' + data.nm_textarea_comment_content + '</div>');
                $('textarea.cl_textarea_comment_content').val("");                  
            }
        });
    });

});

jQuery ajax is working fine. It saves data to database, then appends the data to div. My question is: after appending the data, will the data be available/visible to other end(computer/user)? Or after appending data do i have to add set setInterval function to load the comment div every 10 seconds. So if someone comments then after 10 seconds the comment will be visible to other users. It may have overhead to load all comments div.

We see same scenario for facebook status updates. When someone updates his status or comments then comments are visible to other all friends. We see such example in stackoverflow notifications. If someone answers or comments, we get immediate notification. How is it done? How can i make the data visible to other users?

Explaination of this scenario will be highly appreciated.

Answers:

Answer

By using the setInterval function all users have to reload the comment section every 10 seconds which is a bad practice and not the best setup for your server. It is however the easiest solution.

The best solution is a socket, a socket will notify other users when one user has commented and vice-versa. Have a loot at http://www.socket.io/. You will have to create an app in which all users listen to a specified function, if one user commented the other users will be notified. This is a lightweight way of solving this problem because the comments only will be updated if one user has commented (which sends a signal to the function).

Hope this helps. Cheers

Answer

You will have to use the setInterval function. Instead of loading all the div elements, you can associate a version number with each comment in the Database side. When the comment is updated you will increment the version number. So when the setInterval hits the backend and passes its versionId, you can determine from the version difference and send a flag which will tell the view which div is to be updated and which are to be left alone.

Answer

As other have suggested the better practice will be www.sockets.io and the easy practice will be setInterval. I will only add some points to this, which you might consider:

1) How many users are you expecting, if you expecting the app to be used by a significant quantity of users, don't even bother with setInterval

2) If you need the application for a smaller amount of users and you find sockets.io to hard implement (can look frightining on the first ocasion), you might consider the next approach:

  • Instead of loading all the divs, use a unique id or timestamp and each 10 seconds only send that to the server. If the server reports that there are items newer than the unique id in discussion, return an "OK" message, which can be evaluated to download the new content. This way you use the "easier" setInterval approach, yet you limit the server load as much as possible.
Answer

setInterval may be helpful if the number of users are less.

Anyway you have to destroy ajax event everytime you start checking.

setInterval(function(){
  $check_for_new_chat.destroy();
  $check_for_new_chat = $.ajax({
  ...
 });
},10000);

by this way you can decrease the server load.

Answer

As others have said your better off using WebSockets but on this note, this also means you can remove you AJAX Post, as you can just use the WebSocket Server to handle that request for you and then send the notice to everyone else with the message content.

Things to note, the number of users if your system is never going to be used by, more than 10 people go with your correct assumption about having to use SetInterval and AJAX.

If you're expecting more than 10 users frequently WebSockets the reason for this is quite simple WebSockets are more Client load on opening the page were as AJAX would only be 10 seconds after opening the page. If you use ASYNC your users won't even notice it.

Web Sockets there is a little initial load so depending on how and when you start the socket client your users could notice the slight delay.

With AJAX you can also use the PHP SESSION system to know what user posted what with WebSockets it's a little harder to verify who posted what and to make sure they did post it and someone is not sending junk info to your WebSocket Server.

So know your Demographics how likely is it people are going to comment, and how many users are going to be using this system all this information is relevant to making a decision.

If you do choose to go down the WebSockets route make sure you plan your security properly. for example, when a user loads a page save a token in the database for the web sockets server and every 1 mins get the socket client to keep that token alive say for 2 mins. after that delete any tokens with an expiry in the past, you could do this via crontab, or you can do it via page loads that's up to you.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.