I need to update my UI (webpage) periodically with new values. I have PHP code that grabs the values form a database, but I am not 100% sure on what is the best way of getting that data to the UI side.
The complication here is that:
1. I need to constantly update the values (every second)
2. I need to update many different areas of the page independently
Thanks,
You use javascript to ask a PHP script for the values. You don't push from PHP to javascript.
You'll probably want to use AJAX and setInterval()
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
What you probably want is comet, not setInterval as you'll overwhelm your servers with a lot of unnecessary traffic.
This is what Facebook does for their chat features, and their live feeds (or at least used to do, I haven't looked at it in quite some time.
You should also look into http://dev.w3.org/html5/websockets/
More and more browsers starts to support them and it's a good way to constantly pass information back and forth.
You can check for browser support and use it if it exist.
Related
What's the best way to constantly receive updates for few <div>'s without refreshing web page?
Is the Server sent events best option?
Websockets (push technology) is your answer. Repeated ajax calls will result in a lot of unnecessary requests. Have a look at this question.
If you are just trying to refresh the contents of a DIV once in a while without reloading the entire page, I highly recommend just using a JavaScript framework called JQuery. It has very easy-to-write code, and it's very simple to set a timer and reload a div at a certain interval - or on a click.
jQuery
All you need to do is include the script tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
in your document, and JavaScript can then use all sorts of AJAX shorthand and DIV loading code, such as $("#divID").load("http://somesite.com/new/content/for/div");
If you only need to get a couple updates, old school ajax short polling is probably fine. If you need to maintain a constant connection that updates at random intervals, you'll need a more robust option, to which there's a lot.
socket.io, nodejs, faye, comet, websockets, etc. Depends on the compatibility level you want with browsers and your exact needs.
EDIT: Just to update a couple DIVs you're probably fine just doing a few AJAX requests.
Server Sent Events are not supported in all browsers.
Maybe take a look at websockets
Is there any way you can push data to a page rather than checking for it periodically?
Obviously you can check for it periodically with ajax, but is there any way you can force the page to reload when a php script is executed?
Theoretically you can improve an ajax request's speed by having a table just for when the ajax function is supposed to execute (update a value in the table when the ajax function should retrieve new data from the database) but this still requires a sizable amount of memory and a mysql connection as well as still some waiting time while the query executes even when there isn't an update/you don't want to execute the ajax function that retrieves database data.
Is there any way to either make this even more efficient than querying a database and checking the table that stores the 'if updated' data OR tell the ajax function to execute from another page?
I guess node.js or HTML5 webSocket could be a viable solution as well?
Or you could store 'if updated' data in a text file? Any suggestions are welcome.
You're basically talking about notifying the client (i.e. browser) of server-side events. It really comes down to two things:
What web server are you using? (are you limited to a particular language?)
What browsers do you need to support?
Your best option is using WebSockets to do the job, anything beyond using web-sockets is a hack. Still, many "hacks" work just fine, I suggest you try Comet or AJAX long-polling.
There's a project called Atmosphere (and many more) that provide you with a solution suited towards the web server you are using and then will automatically pick the best option depending on the user's browser.
If you aren't limited by browsers and can pick your web stack then I suggest using SocketIO + nodejs. It's just my preference right now, WebSockets is still in it's infancy and things are going to get interesting once it starts to develop more. Sometimes my entire application isn't suited for nodejs, so I'll just offload the data operation to it alone.
Good luck.
Another possibility, if you can store the data in a simple format in a file, you update a file with the data and use the web server to check its timestamp.
Then the browser can poll, making HEAD requests, which will check the update times on the file to see if it needs an updated copy.
This avoids making a DB call for anything that doesn't change the data, but at the expense of keeping file system copies of important resources. It might be a good trade-off, though, if you can do this for active data, and roll them off after some time. You will need to ensure that you manage to change this on any call that updates the data.
It shares the synchronization risks of any systems with multiple copies of the same data, but it might be worth investigating if the enhanced responsiveness is worth the risks.
There was once a technology called "server push" that kept a Web server process sitting there waiting for more output from your script and forwarding it on to the client when it appeared. This was the hot new technology of 1995 and, while you can probably still do it, nobody does because it's a freakishly terrible idea.
So yeah, you can, but when you get there you'll most likely wish you hadn't.
Well you can (or will) with HTML5 Sockets.
This page has some great info about this technology:
http://www.html5rocks.com/en/tutorials/websockets/basics/
I'd like to make a div's contents update as soon as a new row appears in a MySQL database (I'm making a webmail app). As I'm writing this, it's becoming more clear to me that I can't send some sort of server message to the client asking it to update, so I've come to the conclusion that the best way to have live updates is to use a jQuery ajax call, triggered by a setTimeOut event.
My question is: is there a better way to do this? Or if I have to use setTimeOut, what time interval should I set to keep the optimal balance between server usage and update times?
The code run every AJAX call will be one query (to fetch new mails) and a loop to post it to a ul.
This is the best way unless you use Stream Hub or a COMET server which is reverse AJAX :)
I think HTML5 WebSockets might be what you're looking for...
There's an example usage here.
As you mention, support is limited to Chrome and Safari at present.
I have a large database of links, which are all sorted in specific ways and are attached to other information, which is valuable (to some people).
Currently my setup (which seems to work) simply calls a php file like link.php?id=123, it logs the request with a timestamp into the DB. Before it spits out the link, it checks how many requests were made from that IP in the last 5 minutes. If its greater than x, it redirects you to a captcha page.
That all works fine and dandy, but the site has been getting really popular (as well as been getting DDOsed for about 6 weeks), so php has been getting floored, so Im trying to minimize the times I have to hit up php to do something. I wanted to show links in plain text instead of thru link.php?id= and have an onclick function to simply add 1 to the view count. Im still hitting up php, but at least if it lags, it does so in the background, and the user can see the link they requested right away.
Problem is, that makes the site REALLY scrapable. Is there anything I can do to prevent this, but still not rely on php to do the check before spitting out the link?
It seems that the bottleneck is at the database. Each request performs an insert (logs the request), then a select (determine the number of requests from the IP in the last 5 minutes), and then whatever database operations are necessary to perform the core function of the application.
Consider maintaining the request throttling data (IP, request time) in server memory rather than burdening the database. Two solutions are memcache (http://www.php.net/manual/en/book.memcache.php) and memcached (http://php.net/manual/en/book.memcached.php).
As others have noted, ensure that indexes exist for whatever keys are queried (fields such as the link id). If indexes are in place and the database still suffers from the load, try an HTTP accelerator such as Varnish (http://varnish-cache.org/).
You could do the ip throttling at the web server level. Maybe a module exists for your webserver, or as an example, using apache you can write your own rewritemap and have it consult a daemon program so you can do more complex things. Have the daemon program query a memory database. It will be fast.
Check your database. Are you indexing everything properly? A table with this many entries will get big very fast and slow things down. You might also want to run a nightly process that deletes entries older than 1 hour etc.
If none of this works, you are looking at upgrading/load balancing your server. Linking directly to the pages will only buy you so much time before you have to upgrade anyway.
Every thing you do on the client side can't be protected, Why not just use AJAX ?
Have a onClick event that call's an ajax function, that returns just the link and fill it in a DIV on your page, beacause the size of the request an answer is small, it will work fast enougth for what you need. Just make sure in the function you call to check the timestamp, It is easy to make a script that call that function many times to steel you links.
You can check out jQuery, or other AJAX libraries (i use jQuery and sAjax). And I have lots of page that dinamicly change content very fast, The client doesn't even know is not pure JS.
Most scrapers just analyze static HTML so encode your links and then decode them dynamically in the client's web browser with JavaScript.
Determined scrapers can still get around this, but they can get around any technique if the data is valuable enough.
I have a web page coded in PHP. This page is for posting a request for services. All services are stored in two separate tables along with prices.
As the user selects various services I want to fetch prices for the selected service and show it on per service basis and also a grand total of all services.
How can we do this?
Rather than a database query for every service they tick, you could add all the variables into the page as hidden vairables, then use Javascript to add them up. This would be much less overhead.
I'm not totally sure what you're going for, but you can't actually fetch anything from MySQL with Javascript, but you can request a php script via xhr that will fetch the data, and then deal with it (add it up, etc.) via javascript.
If the number of services/prices isn't huge, you could load it all in to the page in the first place then use javascript to add things up and leave the server alone.
There are several javascript frameworks and libraries that make this sort of thing quite easy (xhr), have you looked into those?
http://mootools.net
http://dojotoolkit.com
http://jquery.com
http://www.prototypejs.org
If your data is too complex to pre-load as ck suggested, you can create a PHP page that generates JSON as your output. Using a library like jQuery you could then pull that data into the page for handling.
Ajax a php page that will do the MySQL operations. Make sure to actually secure that stuff, escape the strings, and make sure to check if the command being sent is the one you actually want. Some users are smarter than the rest and may go 'Drop *' using your ajax method.
Not a very safe idea IMO, but if something use Ajax.
Don't pre-load the prices on the page; use AJAX to retrieve them. You might be making some assumptions that are not necessarily true when the page loads, and in some cases, you might want to manipulate the prices, based on the data supplied by the user. In any case, you are more likely to use AJAX later on.
Querying the database via AJAX is not difficult to implement, it makes your code more flexible, and it's very reliably fast.
Go for AJAX.