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_ment"]').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-ment.php",
            method: "POST",
            data: frm_serialized,
            success: function(data) {                    
                data = JSON.parse(data);                    
                $('div#id_div_ment_' + frm_id_splitted_2).append('<div class="cl_div_ment_content">' + data.nm_textarea_ment_content + '</div>');
                $('textarea.cl_textarea_ment_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(puter/user)? Or after appending data do i have to add set setInterval function to load the ment div every 10 seconds. So if someone ments then after 10 seconds the ment will be visible to other users. It may have overhead to load all ments div.

We see same scenario for facebook status updates. When someone updates his status or ments then ments are visible to other all friends. We see such example in stackoverflow notifications. If someone answers or ments, 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.

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_ment"]').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-ment.php",
            method: "POST",
            data: frm_serialized,
            success: function(data) {                    
                data = JSON.parse(data);                    
                $('div#id_div_ment_' + frm_id_splitted_2).append('<div class="cl_div_ment_content">' + data.nm_textarea_ment_content + '</div>');
                $('textarea.cl_textarea_ment_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(puter/user)? Or after appending data do i have to add set setInterval function to load the ment div every 10 seconds. So if someone ments then after 10 seconds the ment will be visible to other users. It may have overhead to load all ments div.

We see same scenario for facebook status updates. When someone updates his status or ments then ments are visible to other all friends. We see such example in stackoverflow notifications. If someone answers or ments, 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.

• javascript
• php
• jquery
• html
• ajax

• 1 Those are done by sockets to give you realtime data update. Without socket you have to do with ajax but it makes more load on your server as it calls your server every 10 sec interval. – Parth Trivedi Commented Jan 1, 2016 at 3:37
• May be this will help you smashingmagazine./2012/05/… – Parth Trivedi Commented Jan 1, 2016 at 3:42
• Yes, setInterval 10 seconds is not the solution I think. Setting setInterval for all divs to load is not a good idea. – cola Commented Jan 1, 2016 at 3:51
• Can you post sample code or explain more about the method of loading ments or statuses? – cola Commented Jan 1, 2016 at 4:10
• I would suggest you look into parse. using their APIs and service (free with very generous limitations) you can make this type of app quite easily. If you decide you'd like to use it, simple setup guide can be found here – Wesley Smith Commented Jan 1, 2016 at 6:02

5 Answers 5

By using the setInterval function all users have to reload the ment 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 mented 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 mented the other users will be notified. This is a lightweight way of solving this problem because the ments only will be updated if one user has mented (which sends a signal to the function).

Hope this helps. Cheers

You will have to use the setInterval function. Instead of loading all the div elements, you can associate a version number with each ment in the Database side. When the ment 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.

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.

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.

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 ment, 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.