I'm building a Grails app which queries several API's across the Web. The problem is that this queries are very time consuming and it is really annoying for the user to click one button and wait so much time without nothing changes in the page.
The basic architecture of my app is, when the user clicks the button, the client side performs an Ajax request with Prototype library to the server side. The server side, then, connects to the Last.fm API and retrieve a list of events. When the server side is finished populating the list with events it sends a JSON response to the client side which allows the client side to create markers for each event on a Google map.
What I want to achieve is, instead of waiting for all the events being retrieved from the API to send the JSON response, the server side sends a JSON response as soon as it retrieve one event, allowing the client side to populate the map while other events are yet being retrieved.
Any ideas how can I implement this? I read about the concept of Ajax Push but I'm not sure if it is what I need.
Thanks for the help!
There is no way to open a listening connection on the client that your server might connect to. Instead, what you need is a connection to the server that is kept alive and can be used to receive events. This way, you could directly return the "action" request and inform the client through your persistent event connection once the last.fm request was completed.
That said, the way I would implement is using ajax keep alive.
Take a look at cometd plugin.
Related
I am hoping someone can point me in the right direction. I have a CF2021 Server which uses a Node.js websocket server and CF pages (via javascript) as a client. Messages from user to user work as expected, so no issue there.
This CF Server also has a custom API built using CFML that handles and routes inbound SMS messages. My question is; what would be the best way to send the SMS message (by now its json) to the Node.js websocket to it can send it to the user(s).
I tried using the same javascript that the browser client uses, but it appears that the CFML API script is "browser-less", so that doesn't work, or should it?
I thought something like Apache Groovy may be the solution, but I am having difficulties with any websocket example I have found.
Any suggestions would be greatly appreciated.
thanks in advance
Flow matters.
If you want to handle an incoming message by delivering it to all currently logged in users who are subscribed to messages of the current sort: set up your message handler to deliver using lucee/adobe-coldfusion websockets. Be forewarned, Lucee takes some setup time, but once running, it is a great solution.
If you don't need immediate delivery, or you need a super simple solution: I actually have had some success with "Long Polling" you just have to remember to use "flush" early in the request, before any pause/sleep, then loop your message lookup requests for new data, with a 1-5 second delay between each loop. Once new data is found, I like to return the request to the client, close that polling request and start a new polling request using the client side. I typically won't poll for more than 60 seconds. Even if the returned json object is empty.
I've made an app using Flask, that has a backend process that is initiated by the user.
When the user initiates the process, some data is sent to Flask via jQuery AJAX, which is then processed, and the results are returned.
This process can take between a few seconds and up to around a minute, so I have a 'please wait' modal on the front end while waiting for the AJAX response from the backend.
Is there a way I can send interim data to the front end, to update the 'please wait' modal, while the backend process is doing its thing?
The backed process performs iterations until it is satisfied. So ideally I would like to be able to display to the user how many iterations it has performed.
Initially I thought that there might be something within Flask's 'flash' message feature. But it seems that this relates more to redirects in a route, rather than AJAX calls to a route.
Any suggestions would be appreciated.
Cheers,
Hugh
Yes you can do it, but not with AJAX, becuse the HTTP comunication is only client to server, so you cant update asynchronously your clinent with HTTP, so you need to use other protocol. I highly recommend to use SocketIo, this protocol allows to you to send mensagens asynchronously from server to update your front, becuse this protocol persist the user in server. With this protocol(for example) you can make a chat room, like WhatsApp. for more information see Documentation SocketIo Flask Extension
I work at an analytics vendor and we're looking into supporting AMP. I'm looking into beaconing data using amp-analytics. I've got the default trackPageView working from the example in the docs. I get a POST request sent to my server when the page is loaded.
However, one of our use cases is sending a beacon after an AJAX request has completed on the page. The idea is that our customer performs an AJAX request to one of our APIs and gets back some data. Some of that data is used to add elements to the DOM and some of that data is sent back to us which acts as a beacon type in our system. One thing I thought of was since that second piece of data is coming from us and then being sent back to us, we could just send it between our services internally and not have the browser need to send it to us at all, but there are a few issues that prevent us from doing this:
The API in question is high traffic and has caching implemented. There are many more requests being made by browsers than being received by our API's server, and we want to track them all.
We also want to track data such as browser user agent, so we need that request to be sent by the browser, not our API server.
I have a few challenges here with implementing this in AMP:
The AJAX request would be performed by an amp-script element that our customer would put together. Since amp-scripts are very sandboxed, would this cause issues having the contents of an amp-script interact with the AMP runtime?
I don't see any triggers in AMP docs that I could use to have the amp-analytics request sent when the AJAX request completes.
Usually the questions I put together on StackOverflow are more direct, but I'm mostly confused right now on how to implement this with AMP or whether it's even possible to implement it with AMP at all.
When people create real-time web apps, they are leaving a ajax request open/long running.
how do they do this in javascript?
There is really no difference from a normal ajax request. A callback is associated with the XMLHttpRequest. Once the request is complete the callback is invoked. The difference is on the server-side where the request is held open until data is ready for the client, or a timeout occurs. On the browser side, the callback is invoked as each successive request is answered. The callback must process the data from the server and initiate another request. The request is handled asynchronously, so the browser is not blocked.
A really good example of the whole thing is the chat demo included in Tornado.
I have made webpage that uses Ajax to update some values without reloading the page. I am using an XMLHttpRequest object to send a POST request, and I assign a callback function that gets called when the response arrives, and it works just fine.
But... how in the world does the browser know that some data coming from some ip:port should be sent to this particular callback function? I mean, in a worst case scenario, if I have Firefox and IE making some POST requests at roughly the same time from the same server, and even making subsequent POST requests before the responses arrive to the previous ones, how does the data coming in gets routed to the right callback functions ??
Each HTTP request made is on a seperate TCP connection. The browser simply waits for data to come back on that connection then invokes your callback function.
At a lower level, the TCP implementation on your OS will keep track of which packets belong to each socket (i.e. connection) by using a different "source port" for each one. There will be some lookup table mapping source ports to open sockets.
It is worth noting that the number of simultaneous connections a browser makes to any one server is limited (typically to 2). This was sensible back in the old days when pages reloaded to send and recieve data, but in these enlightened days of AJAX it is a real nuisance. See the page for an interesting discussion of the problem.
Each request has its own connection. Means that if you have single connection, of course you will have single response, and this response will be in your callback.
The general idea is that your browser opens a new connection entirely, makes a request to the server and waits for a response. This is all in one connection which is managed by the browser via a JavaScript API. The connection is not severed and then picked up again when the browser pushes something down, so the browser, having originated the request, knows what to do when the request finishes.
What truly makes things Asynchronous, is that these connections can happen separately in the background, which allows multiple requests to go out and return, while waiting for responses. This gives you the nice AJAX effect that appears to be the server returning something at a later time.