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.
Related
I'm making an app which accesses a database and updates the data every view seconds over a PHP script, the problem is that it currently always updates all data, I would like to know how to program something that dynamically updates data and decides what data to update and what not, so it basically keeps track of change somehow. So how would I best go along doing something like this ?
I think that there should be some where that this question has already be asked but I couldn't find it so maybe someone can show me a website where to look.
In general, you will need to user either XHR requests, web sockets, or HTTP/2 to solve this problem. Since HTTP/2 is not universally supported on the browser side, it may not work for you. Here is the outline of the solution:
Every few seconds, javascript you provide in the browser will need to poll the server for updates using an XHR request. You can use the returned data to update the screen with Javascript. If you only want to do some simple updates, like updating some numbers, you might use raw Javascript or jQuery. If your polling will result in complex screen updates or you want to move a lot of functionality into the client, you probably want to redo your client using one of the JavaScript frameworks like React or Angular.
Use web sockets (or HTTP/2) to create a persistent connection to the server, and have the server send updates to the clients as the data changes. This probably will require some code in the application to broadcast or multicast the updates. The client code would be similar to case 1, except that the client would not poll for updates.
The polling solution is easier to implement, and would be a good choice as long as you don't have too many clients sending polls at too high a rate - you can overwhelm the servers this way.
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
I'll try and explain this as best I can. But basically on a website when you have some dynamic content such as messages, notifications, etc... You would want this information to be presented to the user as soon as the message arrived. Example a user is sent a new message show show a bubble with the count in the header of your website.
You see this stuff on nearly every single website these days and I'm unsure as to the best way to implement such a feature.
My initial idea was to write some ajax call and then wrap this in a setInterval call so it's requested every 30 or so seconds. The obvious problem here is that a) you have to wait 30 seconds for the request and b) you might be requesting the server hundreds of times in a day with no actual new content to ever display.
My second thought was to use EventListeners as they seem for more ideal as from what I understand they only do a request when the server tells it something. But I'm not 100% sure how to build something like this. Can anyone whip up a quick example or point to something that would serve as the basis for something like this?
So to clarify what I want to do:
When something new happens like sending a message or creating a notification this will send an event that the event listener picks up and updates something on the page either showing a small popup with the info or updating a bubble e.g. Messages (2)
I'll be using CakePHP and jQuery to implement this. So anything specific to this would be awesome... Hopefully someone can help me out.
Essentially I'm asking about EventListener vs setInterval and how it would work with ajax calls...
As suggested by Alex Ball, you should research about COMET programming techniques, and also look at the answers for this question Simple comet example using php and jquery. There isn't really a "simple" answer to implement an effective technique to what you are asking for but the most effective one is using an iframe. Using an iframe will allow you to have a persistent connection with the server (PHP side). Here you will be able to check for new messages (query for new messages) and if there is any, return your data. Your ajax call (success function) will the process this data and then do another post back to the server. If there is none then you would have to loop.
Again, effective COMET Programming techniques are not simple to implement.
Here are some useful examples though:
http://www.webreference.com/programming/javascript/rg30/index.html ,
http://www.zeitoun.net/articles/comet_and_php/start , setInerval wouldn't be effective for chat, maybe notifications.
COMET techniques are not specific to CakePHP.
Isn't there a way where I can refresh the page right after a database new entry WITHOUT using Javascript setTimeout or setInterval?
Isn't there an AJAX function to do so? Or maybe a MySql function?
The only way is keep checking the database all the time?
Doesn't it spend too much of the server?
My page will work like a Messenger.
You need to understand that what happens on the server and what happens on the client are completely separated, and while the client has a straight-forward way to contact the server, the converse is not true. There's no way any MySQL function could possibly refresh the browser on the client machine.
So polling (with ajax or similar) is frequently how this is done. However, it's not the only way. There are various "Comet" techniques, and of course the new web sockets initiative.
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.