Javascript ajax refresh only when needed - javascript

I have a web application which is showing data that is recieved from an AJAX request to a PHP script running on the same Server. In my case it's the playback of a spotify player. Because I want that Information to be as up-to-date as possible (in case of a change of the song etc.), my current approach is to send a request every second. Is there a possibility to e.g. send a "data changed"-Trigger from the PHP Server to the Javascript, so that only then the AJAX-Request is triggered, in oder to reduce unwanted traffic for the client? Or is there another approach I'm missing with that this Problem can be solved more elegantly?

Well since it's not a production product and just for personal use, what you could do is on:
The JavaScript UI: make the call like you're doing now once. On completion, make the call again (success, error, timeout).
The server side: Remember what the last song was, when you get a new song (comparing to previous) send that back though the open AJAX call.
Basically it will act like a web socket and have a request open all the time to the server. This is not good design, but the quick and dirty to get your pet project going without having to restructure it to use web sockets.

Related

Client access vs broadcast data from web server

I'm looking for technique or skils to fix the ways for new web site.
This site show the read time data which located on server as file or data on memory.
I'll use Node.js for server-side. But I can't fix how to get the data and show that to web site user.
Because this data have to update per 1 second at least.
I think it is similar to the stock price page.
I know there are a lot of ways to access data like AJAX, Angular.js, Socket.io..
Also each has pros and cons.
Which platform or framework is good in this situation?
This ultimately depends on how much control you have over the server side. For data that needs to be refreshed every second, doing the polling on client side would place quite the load on the browser.
For instance, you could do it by simply using one of the many available frameworks to make http requests inside some form of interval. The downsides to this approach include:
the interval needs to be run in the background all the time while the user is on the page
the http request needs to be made for every interval to check if the data has changed
comparison of data also needs to be performed by the browser, which can be quite heavy at 1 sec intervals
If you have some server control, it would be advisable to poll the data source on the server, i.e. using a proxying microservice, and use the server to perform change checking and only send data to clients when it has changed.
You could use Websockets to communicate those changes via a "push" style message instead of making the client browser do the heavy lifting. The flow would go something like:
server starts polling when a new client starts listening on its socket
server makes http requests for each polling interval, runs comparison for each result
when result has changed, server broadcasts a socket message to all connected clients with new data
The main advantage to this is that all the client needs to do is "connect and listen". This even works with data sources you don't control – the server you provide can perform any data manipulation needed before it sends a message to the client, the source just needs to provide data when requested.
EDIT: just published a small library that accomplishes this goal: Mighty Polling ⚡️ Socket Server. Still young, examine for your use if using.

Asynchronus javascript service call to reduce turn around time

I have a scenario in an enterprise application which is partially based on angular js. We have some ReSTful service to access data from different domain. The problem is that when the service fails the server side cannot posibly know the reason of failure as it is happening on client side (browser).
The possible solution to the problem will be that in the error block make a service call to server to log the response received from the third party service. But if I do that it will increase the turn around time for given service call which in turn result in slower user experience.
My thought on this is to implement some asynchronus queue which sends the service failure periodically to server. Could any one suggest the how to achive the same using javascript?
you can implement an pinging AJAX call to your server sending the required data of service failure.
you can create an cache for the data the you need to communicate to server and clear it when you do a successful ping AJAX.
you can select any conformable time interval based on application performance for ping interval duration.

Event based Ajax communication between server and browser

I'm going to write an application, having some worker threads on the server, and some log and status elements on the html page. logs and status are expected to be updated whenever an update is ready from the server side.
well, one approach is to set up a polling mechanism, like the client sends a request on specified intervals and the server sends back the last update, (if any available).
however I wonder if there is any more efficient way like an interrupt-driven approach, on which whenever an update is ready on the server a message is sent to the client through an Ajax call. and as long as no update exists no message is transferred back and forth.
first of all, is this possible to initiate a call from the server side? I mean via Ajax.
or is there any library like JQuery that facilitates such a requirement?
Thanks
Consider using web sockets (Available in HTML5) - This will allow you to skip polling an update the data immediately as the server sends up his finish request.
Read more on:
http://www.html5rocks.com/en/tutorials/websockets/basics/

reporting performance to the server with ajax and .net mvc 3

I am building a mobile site that works like a slideshow. There are a number of image slides and you can swipe left and right to traverse the slides.
I would like to monitor the download speed performance of the slides using javascript and report the times to the server.
I presume that ajax is the way to report the times, although I am new to ajax. My fist concern is that the report sent to the server should be as lean as possible. Also it is only really necassary for the communication with the server to be one way.
Can the flow go just in the direction of from the browser to the server without any responses being sent back to the browser? Or do the http post and put methods have to send a response back to the browser? Obviously notthing is actually needed to be sent back to the browser and to the mobile site it doesn't even really matter if the request is a success or failure.
If a response does have to be sent to the browser what should my MVC 3 controller return? Can just a head with success or failure be returned?
Finally which of the http POST and PUT methods is best for this and what will be the best data format to use?
Do a POST to an action on the server.
I would suggest you use JSON for the data as it is quite lean and makes it easy to decode. However, if you wanted to make it really lean you you could just use a parameter on the url, like ..../reportPerf?d=123 and then your action should take a parameter "d".
The server does need to respond, but you can just
return new HttpStatusCodeResult(200)
That will only take a few bytes.
Sorry for the brevity, on a mobile device.

Cross Domain requests using JQuery

This is a followup question to the one here
Here's briefly what I am trying to do. The File server creates a text file to indicate an end of the process. On a webpage on the Web Server, I loop every x seconds and make an ajax request to find out if the test file exists (ajax request to http://fileserver/files/UserFile.txt)
I've tried the following approaches so far:
Trigger a web method from the client side that creates a HttpContext object to verify if the text file exists. But this is too strenous on the server and I started getting all kinds of exceptions in the Event Viewer.
YQL works great but unfortunately it's too slow. The user waits atleast twice the amount of time.
I am looking for a solution that doesn't involve the server side. Somehow, I'd like to use JQuery to verify the existence of a text file on the fileserver.
Any thoughts?
You should be able to use JSONP and JQuery.ajax() to do cross-domain request work. Play with the jsonp and jsonpCallback attributes. Alternatively, you can use JQuery.getJSON().
Serving a single file from the filesystem is the most simple operation a web server can do. If that is already too much, then all other solutions will be worse. Find out why the server takes so long to serve a simple file and fix that.
Note: I'm assuming that the file is small since you say "test file". If it's a big file, the server will actually send it to the client which will need a lot of resources.
What you can try is to add an ASP page to the web site which runs code on the server that checks whether the file is there and just returns a tiny piece of HTML which you can add to the page with jQuery.load().
I may be miles off base here but... could you not create ONE asynchronous (!) Ajax client request with a HUMONGOUS timeout. Fire it, and wait. You would be invoking some server script that checks every so often, in a loop on the server (using sleep in between), whether the file exists. And not replying to the Ajax request until the file finally shows. The server script then replies and exits.
EDIT: Depending on the server-side scripting framework used, you may even get some OS support. You may be able to sleep on a status change in the directory...

Categories