What's the Best Way to Open a TCP Stream to Server? - ajax

Rather a hard to nail down question, but basically I'm wondering what the best way (and not "what's your opinion" but "which will most adequately meet the requirement i shall set forth) is to open a stream connection from a client side webpage to a server such that either can send data to the other without polling? I'm thinking the term for this is HTTP binding vs. HTTP Polling. The context here is a chat application - i'd like a streamed connection so that the browser isn't constantly pushing requests out. The client end here is KnockoutJS and jQuery. I'd like to be able to have the data pushed back and forth be JSON (or at least manipulatable by jQuery and Knockout's toJSON). The server end - not quite sure what it is going to be, but i'll probably be running on a linux server, so anything compatible with that works fine.
If there's any more details i can provide, just let me know - i'm sure i left some obvious detail out. Also, i'm aware there's probably a duplicate question on this, so if your answer is as good as closing for a dupe and putting in a link, that's great.
Thanks!

I think what you're looking for is referred to as Comet. The basic idea is to keep HTTP requests open for longer periods of time so that the server can send data to the client as it comes in, rather than the client having to continually poll the server for new data. There are multiple ways to implement it. This Wikipedia article is a good start for more info.
This MIX 2011 video discusses the long polling technique (although the suggestion in the video is that web sockets will be a better solution with future browsers).

Related

How do comments appear instantly on Facebook?

I was just wondering, How do comments appear instantly on Facebook? For example, when I'm on my profile and my friend comments something on my post, I can instantly see it. Is it AJAX? Or Queuing system? If I want to do the same thing, what do I do?
Thanks
I'm not exactly sure how facebook has implemented their system.
but it will either work with websockets, AJAX or a comet server.
If you want to have the same effect there are a lot of different techniques you could use,
but I would recommend looking into node.js and maybe even the now.js plugging, which allows for realtime updates via websockets. It even has support for older browsers, so if the browser does not support websockets, it will do a fall over to either a comet server implementation, AJAX or an iframe.
Basically websockets allow for better control over when data should be sent or received from and to the server since it constantly listening to the socket, so you only send data when required and same for receiving data as well, where with an AJAX approach you had to make a call every X seconds.
It's extremely easy to setup on a linux environment, and there's ample documentation to get you started.
It works with javascript and is build on the Google V8 engine, so if you've ever worked with OOP Javascript, you should be able to pick it up relatively easy.
LINKS:
http://nodejs.org/
http://nowjs.com/
You'll want to look into PHP sockets
Actually, its long polling according to this answer (which also explains how to verify or see if its changed since the answer):
How does Facebook fetch live updates

JS: auto updates without multiple XHRs

I was looking at things like Google realtime search (not google instant) and facebook chat for example. They have data constantly coming up but at unpredictable intervals. However, it always seems to come up almost instantly.
I've implemented something like this at http://malachy.org.uk/stream, however the way I've done it is by having an XHR check for updates every couple of seconds, which I guess is a bit inefficient, and anyway while checking the net requests log in firebug on google realtime for example I don't see XHRs coming up at nearly the rate of new posts (well on trendy topics anyway).
Any idea how this is done?
Cheers
Look at:
Reverse AJAX
WebSockets
Because HTTP protocol (being used by AJAX) is a typical request/response protocol, there is no easy way to achieve this. Reverse AJAX uses few clever techniques like long-polling whether WebSockets is a brand new technology somewhere around HTML5, addressing this problem completely (yet not well established and implemented).
Your solution (asking the server every few seconds) is the simplest one, but it introduces both high volume of networks calls and sometimes unacceptable latency.

How to most quickly get small, very frequent updates from a server?

I'm working on the design of a web app which will be using AJAX to communicate with a server on an embedded device. But for one feature, the client will need to get very frequent updates (>10 per second), as close to real time as possible, for an extended period of time. Meanwhile typical AJAX requests will need to be handled from time to time.
Some considerations unique to this project:
This data will be very small, probably no more than a single numeric value.
There will only be 1 client connected to the server at a time, so scaling is not an issue.
The client and server will reside on the same local network, so the connection will be fast and reliable.
The app will be designed for Android devices, so we can take advantage of any platform-specific browser features.
The backend will most likely be implemented in Python using WSGI on Apache or lighttpd, but that is still open for discussion.
I'm looking into Comet techniques including XHL long polling and hidden iframe but I'm pretty new to web development and I don't know what kind of performance we can expect. The server shouldn't have any problem preparing the data, it's just a matter of pushing it out to the client as quickly as possible. Is 10 updates per second an unreasonable expectation for any of the Comet techniques, or even regular AJAX polling? Or is there another method you would suggest?
I realize this is ultimately going to take some prototyping, but if someone can give me a ball-park estimate or better yet specific technologies (client and server side) that would provide the best performance in this case, that would be a great help.
You may want to consider WebSockets. That way you wouldn't have to poll, you would receive data directly from your server. I'm not sure what server implementations are available at this point since it's still a pretty new technology, but I found a blog post about a library for WebSockets on Android:
http://anismiles.wordpress.com/2011/02/03/websocket-support-in-android%E2%80%99s-phonegap-apps/
For a Python back end, you might want to look into Twisted. I would also recommend the WebSocket approach, but failing that, and since you seem to be focused on a browser client, I would default to HTTP Streaming rather than polling or long-polls. This jQuery Plugin implements an http streaming Ajax client and claims specifically to support Twisted.
I am not sure if this would be helpful at all but you may want to try Comet style ajax
http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications

WebSocket cross-connection communication (Tornado?)

I'm fumbling around a bit with WebSockets, and was pretty pleased with how easy it was to get a Tornado server running that does basic websocket connections. I've never used Tornado before today, and while I like what I've seen there's a few questions that I have regarding it's use.
Primarily, I'm using WebSockets so that I can have low-overhead communications between two or more client machines. (For the purposes of conversation let's just say it's a chat client) Obviously I can connect into the server from multiple machines, and they can all push messages to the server and the server can respond, which is great! But that's not too much better than your standard AJAX requests. If I have a persistent connection I want to be able to push data to the clients as well. The simplest possible scenario is user 1 posts a message to the server and upon receiving it the server immediately pushes it to user 2.
So what would be a good way to accomplish that? As far as I can see in Tornado there's no way to communicate between connections other than placing the message in a datastore somewhere and having all the other connections poll for new info. That strikes me as terribly clunky though, because all you're really doing at that point is moving the polling process from the client to the server.
Of course, I may be barking up the wrong tree entirely here. It's certainly plausible that Tornado simply isn't the right tool for this job, and if that's the case I'd be happy to hear suggestions for alternatives!
Here is a chat server using tornado, WebSockets and redis: https://gist.github.com/pelletier/532067 (Updated: link fixed, thanks #SamidhT)
Though the answer has already been accepted: Using a different service still seems very inefficient to me. Why don't you just go with shared memory + conditional variables / semaphores? You sound like you got a standard Consumer-Producer problem

Is there some way to PUSH data from web server to browser?

Of course I am aware of Ajax, but the problem with Ajax is that the browser should poll the server frequently to find whether there is new data. This increases server load.
Is there any better method (even using Ajax) other than polling the server frequently?
Yes, what you're looking for is COMET http://en.wikipedia.org/wiki/Comet_(programming). Other good Google terms to search for are AJAX-push and reverse-ajax.
Yes, it's called Reverse Ajax or Comet. Comet is basically an umbrella term for different ways of opening long-lived HTTP requests in order to push data in real-time to a web browser. I'd recommend StreamHub Push Server, they have some cool demos and it's much easier to get started with than any of the other servers. Check out the Getting Started with Comet and StreamHub Tutorial for a quick intro. You can use the Community Edition which is available to download for free but is limited to 20 concurrent users. The commercial version is well worth it for the support alone plus you get SSL and Desktop .NET & Java client adapters. Help is available via the Google Group, there's a good bunch of tutorials on the net and there's a GWT Comet adapter too.
Nowadays you should use WebSockets.
This is 2011 standard that allows to initiate connections with HTTP and then upgrade them to two-directional client-server message-based communication.
You can easily initiate the connection from javascript:
var ws = new WebSocket("ws://your.domain.com/somePathIfYouNeed?args=any");
ws.onmessage = function (evt)
{
var message = evt.data;
//decode message (with JSON or something) and do the needed
};
The sever-side handling depend on your tenchnology stack.
Look into Comet (a spoof on the fact that Ajax is a cleaning agent and so is Comet) which is basically "reverse Ajax." Be aware that this requires a long-lived server connection for each user to receive notifications so be aware of the performance implications when writing your app.
http://en.wikipedia.org/wiki/Comet_(programming)
Comet is definitely what you want. Depending on your language/framework requirements, there are different server libraries available. For example, WebSync is an IIS-integrated comet server for ASP.NET/C#/IIS developers, and there are a bunch of other standalone servers as well if you need tighter integration with other languages.
I would strongly suggest to invest some time on Comet, but I dont know an actual implementation or library you could use.
For an sort of "callcenter control panel" of a web app that involved updating agent and call-queue status for a live Callcenter we developed an in-house solution that works, but is far away from a library you could use.
What we did was to implement a small service on the server that talks to the phone-system, waits for new events and maintains a photograph of the situation. This service provides a small webserver.
Our web-clients connects over HTTP to this webserver and ask for the last photo (coded in XML), displays it and then goes again, asking for the new photo. The webserver at this point can:
Return the new photo, if there is one
Block the client for some seconds (30 in our setup) waiting for some event to ocurr and change the photograph. If no event was generated at that point, it returns the same photo, only to allow the connection to stay alive and not timeout the client.
This way, when clients polls, it get a response in 0 to 30 seconds max. If a new event was already generated it gets it immediately), otherwise it blocks until new event is generated.
It's basically polling, but it somewhat smart polling to not overheat the webserver. If Comet is not your answer, I'm sure this could be implemented using the same idea but using more extensively AJAX or coding in JSON for better results. This was designed pre-AJAX era, so there are lots of room for improvement.
If someone can provide a actual lightweight implementation of this, great!
An interesting alternative to Comet is to use sockets in Flash.
Yet another, standard, way is SSE (Server-Sent Events, also known as EventSource, after the JavaScript object).
Comet was actually coined by Alex Russell from Dojo Toolkit ( http://www.dojotoolkit.org ). Here is a link to more infomration http://cometdproject.dojotoolkit.org/
There are other methods. Not sure if they are "better" in your situation. You could have a Java applet that connects to the server on page load and waits for stuff to be sent by the server. It would be a quite a bit slower on start-up, but would allow the browser to receive data from the server on an infrequent basis, without polling.
You can use a Flash/Flex application on the client with BlazeDS or LiveCycle on the server side. Data can be pushed to the client using an RTMP connection. Be aware that RTMP uses a non standard port. But you can easily fall back to polling if the port is blocked.
It's possible to achive what you're aiming at through the use of persistent http connections.
Check out the Comet article over at wikipedia, that's a good place to start.
You're not providing much info but if you're looking at building some kind of event-driven site (a'la digg spy) or something along the lines of that you'll probably be looking at implementing a hidden IFRAME that connects to a url where the connection never closes and then you'll push script-tags from the server to the client in order to perform the updates.
Might be worth checking out Meteor Server which is a web server designed for COMET. Nice demo and it also is used by twitterfall.
Once a connection is opened to the server it can be kept open and the server can Push content a long while ago I did with using multipart/x-mixed-replace but this didn't work in IE.
I think you can do clever stuff with polling that makes it work more like push by not sending content unchanged headers but leaving the connection open but I've never done this.
You could try out our Comet Component - though it's extremely experimental...!
please check this library https://github.com/SignalR/SignalR to know how to push data to clients dynamically as it becomes available
You can also look into Java Pushlets if you are using jsp pages.
Might want to look at ReverseHTTP also.

Resources