php/javascript - using ajax to automatically update the client side - php

I am using PHP write the server side of the web page, and javascript to build the client side.
There is a div on the website that will show the data received from server side, for example, Let's say showing the current number of registered users in the databases. This number will keep changing in an unknown period of time. For example, the number could be the same in 10 hours, and it could increment by 1000 in 10 minutes.
My first question is, what is the best approach to do this functionality so that website can always show the latest or almost latest value of this data?
My original approach is using Javascript AJAX and wrapped by setInterval(1000) (-1 second) to send Ajax request to the server side. But I am not sure if this is too heavy for client side (because javascript is single threaded, it might be slow if there is a function running within each 1 second) or even server side( for example, if hundreds of users open this website and hundreds of requests will be sent to server side). So is this ok?
My second question is, if this is not a good approach, what else can I do to achieve the same goal. I was thinking about using the other way around. For example, if there is update in the server side, then use PHP in the server side to push this update to client side, or even directly change the data shown in the HTML using PHP scripting. Is this possible? if it is, is this a good approach?
Any codes or examples provided would be really appreciated.

You can certainly use AJAX for updates that are spread out over time, but if you want to connect to your server every second or so, I would advice against it.
You have a couple of options here:
As #Kay already mentioned, long polling might be an option.
Alternatively, you might want to look into WebSockets or a framework that supports WebSockets, like Meteor

You can use simple long polling.
The client side requests a script "/counter?oldvalue=...&timestamp=.... The server does not immediately return a value if it was not changed, but idles for up to 30 seconds.
If the counter value gets changed, then you return the updated value immediately.

Related

Dynamic data updating

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.

Best way to implement a push notification systems

We would like to make a realtime price change system to be able to see difference with competitor prices against our product prices.
We have no experience with Push notification / COMET system by Javascript and PHP. If you don't mind, I would like to get your experiences, suggestions about this technique. So here are my questions:
What is the best way doing like that system?
We are experienced PHP developers, so is PHP appropiate for this task?
If you know any project or solution ( open source or commercial ) that is able to do this, could you please share?
Here is the approach that we use. Javascript sends regular AJAX request to PHP file. PHP file makes database query and if noting found, just sleeps for 0.5 second (or 1 second), then makes database query again. If 30 second passed and still nothing new found in database (this is needed for giving output, before HTTP timeout occurs), then it outputs something (like noting found). Javascript starts another query immediately after it received output from the last query. Javascript always keeping track of last ID of the database table which comet is monitoring. This is used to query only database rows that is greater than last ID that we have seen.
Yes PHP is appropriate. Just remember one important thing! You need to close any sessions that are open before entering in comet loop. PHP uses session locking to prevent two threads writing into same session simultaneously. If you forget to close session all other threads will be locked (like browsing through website will be impossible).
I can advice open source PHP framework that we use. It called Stingle. It has solid and production ready Comet plugin.
try to use socket.io , no need to send request from client to server to get the data, on server side just send data using socket, client will get data.
just avoid make http request for notification since the notification is almost realtime.

Communicate from one page to another? JavaScript, PHP?

I'm building a prototype where on one page A I have a controller. Imagine a TV remote. On another page B, independent of form A -- it can be a different screen/computer -- with some elements X, Y, and Z that are going to be animated by the remote on page A.
My first idea would be:
Remote on page A saves an action wanted and sends JSON.
I create a listener on page B that reads the JSON to listen to what action to trigger.
I wonder if this the right direction.
It is just for a prototype so it doesn't have to be a production-perfect idea.
You can use web sockets for this.
Let's assume you're using 2 computers, both pointed at the website, as this technique could work in both scenarios.
If it's just a prototype, you could just simply have your page B poll the server every 5 seconds to look for updates that were submitted by page A.
However, in reality, for a production app with thousands of users, this could consume lots of bandwidth and put a heavy load on your server. To compensate for the load and bandwidth usage, you could increase the polling rate to 10 seconds, or 30 seconds, but in response to this change your users would experience delays while they wait for the browser to request an update from the server.
In a production app, many developers are turning to Comet as a solution. Comet is basically a term given by Alex Russell for a technique that involves using the request/response cycle to simulate server-push.
The general idea is that the browser makes a request to the server, and the server holds that connection open indefinitely. The connection remains open until another user posts an update to the server, in which case, the server then sends a response to the connected users.
The Dojo and Jetty team have demonstrations where they show that this technique can scale to 20,000 connections, when using continuations.
While I think you can carry out your experiment just fine with a database and/or some session variables, if your want to learn more about Comet on PHP, check out How to Implement Comet with PHP. Good luck!
UPDATE:
I also wanted to say that you definitely have the right idea for how to conceptually think about your message passing with JSON:
I create a listener on page B that reads the JSON to listen to what action to trigger.
I really like how you are thinking about passing a message that then tells the page what action to trigger. If you think about it, you could reuse your message passing concept to call other commands so that you avoid reinventing the wheel when a new command comes along that you need to call. Regardless of whether you poll, use Comet, or use WebSockets, it's a great idea to think about abstractions and generic, reusable data transports.
You could do this either with polling (having page B constantly poll for updates from the server) or use a server push technology like server sent events or websockets.
Yes, that would work. You could also just make it the same way you would make a vector line animation. Send the "commands" for movement to a server and record them (in a database, file, whatever) the client program can then request and redraw the movement smoothly any time and anywhere.
Using a cron job to execute Page B for every x unit time will make you check for any latest updated json (queried/returned output according your logic) from Page A. This way, you can use new updated json from page A and do your further task...

PHP: how to achieve asynchronous effect for server script

I have searched the internet and see people are working their way to make concurrent calls with PHP even though PHP doesn't have rich concurrency features. I recently want to make improvement on one of my scripts on the server side, which takes a request from a client, gets some data from the database, returns the data and does some other data update.
The problem now is that the client have to wait for the server to get the data, finish the update and everything else, then it can finally get the result that it asked for. The client however doesn't care about the data update that the server does and therefore should not waste time waiting for it.
Through my study all other people are talking about the client making asynchronous call to the server without waiting for result, but I want the server to return data to calling client in the middle of its process.
If I do not want to change anything on the client side, is there any workaround that can achieve this effect??
How about some pseudo multi-threading? http://phplens.com/phpeverywhere/?q=node/view/254

jQuery server side push with ajax

I am in the middle of making a social network, and i want it to be as smooth as facebook.
Like if you look in a console and look at logging, it doesn't update all the time with ajax calls.
on my site i have to load: notifications(the number of new notifs and the notifs themselves), friend requests(same as notifications), online friends(if there are any online it will load the pictures of the online users.) thats 6 ajax calls that is loaded every 10 second. and this causes a huge bandwidth waste and server requests.
Therefore i thought, what if the SERVER told the CLIENT when there was a new update instead of the CLIENT asking the SERVER every 10 seconds.
i have googled this problem and read about ajax push, and a framework called comet.
i just can't seem to find any info on how to implement this on jQuery.
I looked briefly into Comet. It appears to be ambitious, experimental and won't run on just any old server.
As I understand it, Comet doesn't really push as such but does something called "long polling", which I won't try to describe here. The web already has several good texts on the subject.
Personally, I would stick with the current plan (conventional AJAX) but make one general purpose call with all the necessary data bundled into an object and JSON encoded. This will reduce 6 requests down to one (every 10 seconds).
You can box-clever by returning nulls within the returned object for information that hasn't changed thereby minimising the length of each response.
As far as I know, you must make significant modifications on your webserver to get this thing to work. Also, server side php is not really a good option.
Somebody had already asked something similar here: Using comet with PHP?
You can try socket.io on node.js too. It works great for real time communication
http://socket.io/

Categories