I'm trying to get request a json object from the server each 10 seconds using this:
setInterval(function(){
$.ajax({
url: '/',
success: function(data){
//do stuff with data
}
});
}, 10000);
But this isn't very efficient. I know about long-polling, but I don't think it'll make a big difference. I know I will receive new data each 10 seconds, so doesn't that make long-polling the exactly same as setInterval in terms of efficiency?
Is browser-side caching a good solution for this problem?
The JSON object I'll be getting looks like this:
var data = {1: {'user': 'John', 'age': '25'}, {2: {'user': 'Doe', 'age': '30'}}
With this, I want to display data[0].user for a few seconds and after that smoothly change it into data[1].user by using 'fadeOut' and 'fadeIn' and so on until it runs out of users.
I basically want to create a slideshow of the user's usernames.
Would caching be a good solution or should I stick with making ajax calls every 10 seconds? If so, then how would I implement this and if not, what method should I use?
I'm not sure if i explained it good enough, so tell me if something is still unclear.
I would definitely think about caching. Especially if you get sets with a lot more users, making an AJAX request every 10 seconds could easily overload your server. However, if you want to keep it simple, make a request every few minutes instead, to update. Cache the users, have them generated into the javascript code, say users = new Array(user1, user2, ...). You don't really have to keep updating the page if it's not that important, as most users would navigate away within a minute or two anyways. If you have a long list that changes every few seconds, that gives you enough time to not ever have to update using AJAX, and just rely on the server generated list of users.
If not, store the last time you updated the list in a variable, and send the time as an argument to your server when you're updating via AJAX, and then have the server quickly check what new users were added, and send just those. Then, just merge the new array of new servers with the old array. I highly suggest not making a call every 10 seconds for a new name though. Not only will you run up more bandwidth on your server, you will increase the CPU usage when it has to find the next user in the list for you, and then send you that one. For good practice, always let the client do as much of the work as possible, without having lag. There is only one server, but many more clients. Each operation you shift to the clients will save your server hundreds, if not thousands, of operations.
As for long polling vs setInterval, I would recommend setInterval in that case. You can at least send a request with a time argument, specifying the last update time, and thus only needing to send that small portion, instead of the entire data array.
var storage = new Array(user1, user2, ...); //set all your data here, generate it from your server
var lastUpdate = //set the last time you updated it, just create a date variable
function rotateUsers()
{
//do your fade in and fade out here
}
function update()
{
//create a new HttpRequest, and then set the url as "yoursite.com/update?lastUpdateTime="+lastUpdate;
//Take the response data, and merge the new users list with the old one
}
setInterval('rotateUsers()',10000);
setInterval('update()',60000); //update once a minute
Long polling would be better than setInterval(fn,delay) because at least then the server would just send you updated data when it was ready, versus the client making that assumption and then firing off a request for data that may not have changed.
If you have control over client/server tech, you can push data to the client without the need to reconnect the XHR on each push by using WebSockets
Related
I'm trying to understand more about long polling to "manipulate" a website in real time, saw some videos and I'm thinking so far:
Say I have an old date that the sql and I make an echo on it. As long polling will know if the old date will not be the same as it will look from time to time according to the setInterval function ...?
Say I want to show publication of a blog in which all text is in mysql, but repende I publish a new publication, and who is on the page at the time, you will see the publication time (not tell me?), Then how one long polling code will know the difference between the old and the new publication? Ate even not to give conflicting or repeating the same date engraved on the sql.
Since your initial question was what the difference between the two techniques is, I will start with this:
AJAX polling
Using AJAX polling to update a page will mean, that you send a request in a defined interval to the server, which would look like this:
The client sends a request to the server and the server responses immediately.
A simple example (using jQuery) would look like this:
setInterval(function(){
$('#myCurrentMoney').load('getCurrentMoney.php');
}, 30000);
The problem with this is, that this will cause a lot of useless requests since there won't be always new things on every request.
AJAX long polling
Using AJAX long polling will mean, that the client sends a request to the server and the server waits for new data to be available before he responds. This would look like this:
The client sends a request and the server responds "irregularly". As soon as the server responds, the client will send a new request to the server.
The client side would look like this:
refresh = function() {
$('#myCurrentMoney').load('getCurrentMoney.php',function(){
refresh();
});
}
$(function(){
refresh();
});
What this will do is just load the getCurrentMoney.php's output into the current money element and as soon as there is a callback, start a new request.
On the server side you usually use a loop. To solve your question how the server will know, which are new publications: either you pass the timestamp of the newest to the client available publication to the server or you use the time of the "long polling start" as indiactor:
<?
$time = time();
while ($newestPost <= $time) {
// note that this will not count as execution time on linux and you won't run into the 30 seconds timeout - if you wan't to be save you can use a for loop instead of the while
sleep(10000);
// getLatestPostTimestamp() should do a SELECT in your DB and get the timestamp of the latest post
$newestPost = getLatestPostTimestamp();
}
// output whatever you wan't to give back to the client
echo "There are new posts available";
Here we won't have "useless" requests.
I think I have a tough one for you guys. Or at least it's been tough for me. I've been searching for the best way to do this in Stack Overflow and everyone that has asked has been given a different response.
I have this code that is accessing an API and calling a maintenance list of all the vehicles in a fleet.
function getMaintenanceList() {
var settings = {
"url": "API URL HERE",
"method": "GET",
"timeout": 0,
"headers": {
"Authorization": "Bearer token here"
},
};
$.ajax(settings).done(function (response) {
// The response the API sends is a JSON object.
// It is an array.
var jsonMaintenance = response;
var parsedJson = JSON.stringify(jsonMaintenance);
//Left over code from when I was trying to
//pass the data directly into the other page
// I was unable to do so
//return jsonMaintenance;
//Left over code from when this was in a PHP file
//and I was posting the stringified response to the page
// for testing purpose
//I had to disable CORS in Google Chrome to test the response out
//console.log(jsonMaintenance);
//document.getElementById("main").innerHTML = parsedJson;
});
};
The code above works well. What I was attempting to do here was write the stringified response to a file. Save that file in the server. Call it from another page using JavaScript and save it as an object in JavaScript, parse it using JSON.parse(), and then pull the required information.
Here's an explanation as to why I'm trying to do it this way. When I call the maintenance list from the API, I'm getting the entire maintenance list from the API, but I need to be able to display only parts of the information from the list.
On one page, we'll call it vehicle-list.php, on it I have a list of all the vehicles in our fleet. They all have unit numbers assigned to them. When I click on a unit number on this page it'll take me to another page which has more information on the vehicle such as the VIN number, license plate, etc. we'll call this page vehicle-info.php. We're using this page for all the vehicles' information, in other words, when we click on different unit numbers on vehicle-list.php it'll always take us to vehicle-info.php. We're only updating the DOM when we go to the page.
I only want to include the information specific to each vehicle unit in the page along with the other info in the DOM. And I only want to call the info from the API once as I am limited to a certain amount of calls for that API. This is why I am attempting to do it this way.
I will say that what I originally wanted to do was get this JSON response once every 24 hours by using a function in vehicle-list.php save the reponse as a variable as seen above var jsonMaintenance = response; and then just access certain parts of the array every time a unit number is clicked. However, I have been unable to access the variable in any other page. I've written many test files attempting to call jsonMaintenance without success so I've been trying to to just save it as a text file to the server and I haven't been able to figure that out either.
After explaining all of the above. My questions are these:
How do I best manipulate this data to accomplish what I want to accomplish? What would be the best standard? Is the above code even the right way to call the data for what I'm trying to do?
There doesn't seem to be a set standard on accomplishing any of this when I search on Stack Overflow. I'd like to be as efficient as possible.
Thank you for your time.
there is a lot of ways how you pass your data through your website after getting it in from an api call, the best approach is to store these information in a database and call it back in which ever way you want, you can do that as far as you are using php, you can store it to sql or to access, if you don't want to store these information in a database like in sql or access, then best way is to store it to localStorage and call it back whenever you want.
I will show you briefly how you can do that, if you want better explanation post an example of your returned data.
to store an item in localstorage use,
localStorage.setItem('key', 'value');
to call an item back from localstorage use,
var somevar = localStorage.getItem('key')
to remove specific item from localstorage use,
localStorage.removeItem('key')
to clear all items saved to localstorage use,
localStorage.clear()
be aware storing the data to localStorage is only at the station you are using
I would do it somehow like this.
Call the maintenance list from the API with the server side language of your choice which seems to be PHP in your case. Lets say the script is called: get-list.php. This can be triggered by a cron job running get-list.php in intervals limited to the certain amount of calls that you are allowed to do for that API. Or if you are not able to create cron jobs then trigger the same get-list.php with an AJAX-call (eg jQuery.get('sld.tld/get-list.php') - in this case get-list.php have to figure out if its the right time to call the API or not).
Now that you have the data you can prepare it as you want and store it as a JSON-string in a text file or database of your choice. If I get you right you have a specific dataset for each vehicle, which have to be identified by an id (you named it "unit number") so your JSON would look kind of: {"unit1": { property1: "val1", property2: "val2" }, "unit2": { property1: "valXYZ", property2: "valABC" }} or alike.
Now when you link to vehicle-info.php from vehicle-list.php, you do it like so: ancor or similar as well. Of course you can also grab the data with AJAX, its just important to deliver vehicle-info.php the corresponding unit number (or id - better to say) and you are good to go.
vehicle-info.php now have all there is to render the page, which is the complete data set stored in text file or data base and the id (unit number) to know which part of the whole dataset to extract.
I wanted to give you this different approach because in my experience this should work out just so much better. If you are working server side (eg PHP) you have write permissions which is not the case for JavaScript-client side. And also performance is not so much of an issue. For instance its not an issue if you have heavy manipulating on the data set at the get-list.php-level. It can run for minutes and once its done it stores the ready-to-use-data making it staticly available without any further impact on performance.
Hope it helps!
If i ran into a similiar problem i would just store the data in a database of my own and call it from there, considering you are only (willing/abe/allowed) to request the data from the API very rarely but need to operate on the data quite frequently (whenever someone clicks on a specific vehice on your applicaiton) this seems like the best course of action.
So rather than querying the data on client side, I'd call it from server, store it on server and and have the client operate on that data.
I have a question in terms of code and NOT user experience, I have the JS:
$(document).on( "click", "input:radio,input:checkbox", function() {
getContent($(this).parent(),0);
});
The above JS gets the contents from radios and checkboxes, and it refreshes the page to show dependencies. For example if I check on yes, and the dependency is on yes, show text box, the above works!
What I want to know is, if there is a better way to do the same thing, but in a more friendly way, as this is at times, making the pages slow. Especially if I do a lot of ticks/checks in one go, I miss a few, as the parent refreshes!
If you have to hit your server to getContent() then it will automatically be slow.
However, you can save a lot if you send all the elements once instead of hitting the server each time a change is made.
Yet, if creating one super large page is not an option, then you need to keep your getContent() function, but there is one possible solution, in case you did not already implement such, which is to cache all the data that you queried earlier.
So you could have an object (a map) which has keys defining the data you're interested in. If the key is defined, then the data is already available and your return and use that data directly from the cache. Otherwise, you have to hit the server.
One thing to do, you mentioned slowness as you 'tick' things back and forth, is to not send more than one request at a time to the server (with a timeout in case the server never replies). So the process here is:
Need data 'xyz'
Is that data already cached? if yes, then skip step (3 and 4)
If a request being worked on? if yes, push the data on the request stack and return
Send a request to the server, which blocks any further request until answer for 'xyz' is received
Receive the answer and cache the data in an object (map) and release the request queue
Make use of data as required
I check the request queue, if not empty pop the next request and start processing from (2)
The request process is expected to be run on a timer because (1) it can time out and (2) it need to run in the background (not GUI preemptive)
Right now I'm using AJAX to pull in a list of active streams (TwitchTV) and it's viewers and I'm requesting this every second. At time the list of streams to check can get quite lengthy so I plan on splitting the ajax requests into 2 or 3 parts:
1) Get Number of Viewers for Current Stream (Check every 1 Second)
2) Split Stream in Half and Check 1st Half of List for Active Streamers (Check every 5 Seconds)
3) Check 2nd Half of List for Active Streamers (Check every 5 Seconds)
so I would have 3 requests running simultaneously but I'm worried about what the load time will come down to. Since it is constantly pulling in data would it make the page slower? Would the user likely notice? Is it better to keep 1 ajax request for big amounts of data or is it better to use multiple ajax requests for smaller pieces of data? Is ajax really the best thing to pull in constantly changing live data?
The answer to your various questions is probably "It depends":
The ajax requests by themselves shouldn't make anything slower. These are asynchronous requests, so they will only actually cause the user's browser any significant (and probably still not noticeable) load when the request completes.
One thing that could potentially slow your app down (or cause the user to notice in an unpleasant way) is the DOM manipulation when the request completes. Changing your current number of streaming users in-place probably won't hurt, but depending on the number of streams/how you are displaying them in a list, redrawing this could potentially be very expensive/cause lag on things like redraw.
An alternative to using Ajax (depending on what browsers you wish to support) is to use websockets. This way you can keep a connection open and the server can tell the application when the data needs to change, instead of the need to poll for it.
Why do you need to break your list up into a first half and a second half?
One way to cut down on the amount of data you're sending back and forth might be to send some sort of signal indicating the last bit of data you received. For example, when your timeline on twitter.com updates every few seconds, the ajax request sends along the id of the most recent tweet it received, so that the server knows not to waste time sending any data older than that. Depending on your use case this might be effective.
I am trying to make feature like on the first page of foursquare.com (feed auto scroll). And I found how to make it here . But I have another problem. I want to add new feed as soon as some data is added to database (like foursquare) but I don't have idea how to make it. I suppose that I need somehow send data from database to page or read from database every second. What would be the best way to realize this?
Ok I decided to make call to database with following code on every 5 seconds. I just need some confirmation that this is the valid and secure way to do this please?
function init() {
setInterval(function () {
$.post('http://localhost:2993/home/test', function (data) {
smoothAdd('scroller', data);
});
}, 5000);
Take a look at SignalR: https://github.com/SignalR/SignalR which makes long polling easy.
You need to initialize interval and try to reach data on the server:
window.setInterval(function () {
$.post('foursquare.com/newfeeds', function (data) {
$('#scroller').prepend('<li>' + data + '</li>');
});
}, 5000);
also 1 second is too often. Use 5 or even 10 seconds
We used to do this in our online trading system, where we had a grid view populated with stock prices, and needed to keep this grid up to date. What we did is that every two seconds we send an AJAX request to the server, the server will return the new data in the form of a JSON string, then back on the client side, we used pure javascript to process the returned data and add them to the grid or update existing records.
If you observer foursquare feeds, it just rotates the news by fetching 50 or 100 rows in one shot. It periodically checks for new news and not often.
You should check out Sqlcachedependency which will be the best option for this. If you have 1000 users on your site and if you fetch data for 5 seconds each for OL users, calculate how many times it will hit your db to display latest news.
Assuming you're talking about SQL Server (stop reading if you're not), you would likely be well served by SQL Server Query Notifications to monitor for these changes, then something like SignalR for notify the clients.
I wrote a helper library called SQL Watcher a couple years back that might be helpful for the first half of this.