I'm making a website with the Steam API.
I was trying it out by getting the friends list of the signed in person.
But the more friends you have, the longer it takes to load the page.
So I made the page start to load the friends as soon as the page is done loading.
If I try to refresh the page or sign out while the page is requesting the friends list, it just keeps on loading until the friend list has been fetched and only then, it refreshes the page or signs out.
How do I fix so I can refresh the page without having to wait for the request to be fuly performed.
Here is the jQuery I use to load in the PHP file:
$(function() {
$('#friends').load("friendstest.php");
});
Please tell me if you need more information.
The website is here.
This can be due to a sessión write lock.
If you make the request and it takes a long time, the user session file is locked for writing, so another request can't open it for writing before the previous request release the file, and it is done at the end of the php script.
If your php script is not going to write any data in the session, you can call the session_write_close() function to release the lock (http://php.net/manual/en/function.session-write-close.php) so you enable other request to open the session file.
So at the begining of your friendstest.php and after the session_start, you can call the session_write_close().
Instead of loading the entire friends list in a single call, you can split it into multiple calls with something like:
upto = 0;
function loadMoreFriends() {
$('#friends').append("friendstest.php?limit=10&start="+upto);
upto += 10;
}
In this example, upto records how many friends have been loaded. The php would return only 10 friends and start from where the page is upto.
You would call this function on page load and then whenever you would like to load more friends to the page (scroll to bottom or similar).
Related
What is the current best practice and method of loading a webpage (that has 10 - 15 seconds worth of server side script).
User clicks a link > server side runs > html page is returned (blank
page for 10 - 15 seconds).
User clicks a link > html page is immediately returned (with progress
bar) > AJAX post request to the server side > complete script > return result to
html.
Other options (threading?)
I am running Google App Engine (Python) Standard Environment.
Best Practice would be for the the script to not take 10-15 seconds.
What is your script doing? Is it generating something that you can pre-compute and cache or save in Google Cloud Storage?
If you're daisy-chaining datastore queries together, is there something you can do to make them happen async in tandem?
If it really has to take 10-15 seconds, then I'd say option 2 is must:
User clicks a link > html page is immediately returned (with progress bar) > AJAX post request to the server side > complete script > return result to html.
The way we're doing it is using the Ajax approach (the second one) which is what everyone else does.
You can use Task Queues to run your scripts asynchronously and return the result to front end using FCM (Firebase Cloud Messaging).
You should also try to break the script into multiple task queues to make it run faster.
I currently have a PHP script running in the background executing a PHP script reading a big table. At the same time it is sending the results to an API. This is done with unbuffered query.
On the top of this script, I've put
ignore_user_abort(true);
set_time_limit(0);
To make sure the script runs in the background until it is done. I also have a Javascript that is getting progress report from this script. But, when the page is reloaded, the progress is started again and it will start sending the data again to the API duplicating data.
I was wondering if there is a way to let the user continue on the script. So the script is already running in the background, but is there a way to return the user to the script so it'll be like they never left?
EX:
User starts importing, import is at 200 rows out of 1 million. They refresh the page and the page says 202 rows out of 1 million. 202 mil cause time has past importing more rows while the user has left since script is executing in the background.
Thank you in advanced
You can use websocket to this case. When you will establish new connection to websocket you can store the connection in cookies. Then when you will reload the page you can restablish connection to websocket server. On top of that you need have a websocket server that can read from cookie variables.
Could this be done with using a cookie ?
Each time it runs, update said cookie then if the page is refreshed use the information in the cookie to start where it left off and update the page ?
On my webpage I am achieving most of the functionality using JS like saving the record using ajax request etc. My scenario is like when I click on Update/Save Changes button and Ajax Request or other Javascript functions are invoked. After performing the operations if I refresh the page or reload it the whole code is run again and data is again saved in the database. Can you please give me a solution of how to stop this from being done.
You will need some indicator that the script should not run.
For example if you have the following scenario:
Page is loaded -> JS runs with AJAX -> data is saved to DB
You will need to add the indicator:
Page is loaded -> JS to check if it should run -> JS runs with AJAX or stop
You can generate this indicator from the server side or save it on the client via cookies, localStorage, IndexedDB or anything else you would like.
As seen in YouTube, when you click a YT link it before redirecting you it preloads the layout of the page and then it redirect yoo it, for you to not having to see how the layout items load.
How do I make this with, JavaScript, PHP, HTTP, jQuery or with any other language?
I don't think you really understand what is going on behind the scenes at YouTube. You see, the template/layout doesn't always change. The data always changes. It isn't loading the layout (unless the new page has a different template, such as sending a message or viewing a user profile), it is fetching the data from a database and then it uses javascript to replace the current data on the page with the data it just fetched. It does this through AJAX. They use Python on the back end.
Basically... this is what happens when you click a link for a new video:
1) You click the link.
2) Some JavaScript code makes an XMLHttpRequest to a script on the server which processes the request. A progress bar appears on the screen.
3) The script on the server connects to a database and grabs the information... like other videos in the playlist, comments, the video description, etc. It does this by submitting a query to the database.
4) The query returns the information to the script which in turn organizes it and returns it to the AJAX request (asynchronously, of course).
5) The JavaScript receives the information that it was waiting for and updates the HTML of the page. The JavaScript also does some other stuff behind the scenes, like update the URL and browsing history so that you can hit your "back" button and return to the previous page that you were on. (If the template for the newly requested page is different, the JavaScript will restructure the HTML of the page appropriately.)
Sorry, I didn't know how to put the question better. Basically, what I want is, if 2 similar ajax calls are fired before the 1st is finished, instead of sending the second one, just wait for the first one to complete and use that result.
As an example, you can think of an app, which requests Facebook news feed.
User goes from home screen to news feed page
ajax fires to get news feed content from Facebook
user clicks back button, which takes him back to home screen before ajax call is finished
user clicks on news feed again
ajax fires again to get news feed
meanwhile the first request comes back, but is no longer used, because the app is now listening for the second request, which is almost identical
I am saving the news feed content so that I can show it next time user comes to that page, while sending ajax call to update the content. But in the above case, the second time user comes to the page, the values are not saved yet, hence nothing to show before second request comes back.
Assume that it's a one page app, so we don't lose state.
I know it requires good amount of thinking. Any ideas? at least in theory?
Set a global variable = 0 when the page loads. When a request is triggered - if the variable != 1 - fire off the request. Once you have retrieved the requested and output the results; set it back to 0.
Assuming we don't lose state store the results of the ajax call somewhere and when the news feed is loaded again check if the results already exist before making the request again.