5

Google's GMail service does it because it integrates Google Talk -- and Etherpad (now typewith.me) made famous the system which is used by, for example, Google Wave. All such systems update the page the user is working on effectively instantly when other users make changes to the page. It's easy to tell the server that a change has happened when it has happened, but it's more difficult to get clients to update themselves.

How does this kind of realtime editing work? Does it simply have the client ping the server tens of times per second for updates?

Billy ONeal
  • 97,781
  • 45
  • 291
  • 525
  • 1
    It's called "AJAX". Look it up. – Paul Tomblin Oct 05 '10 at 14:16
  • 1
    @Frustrated: AJAX lets you update a page, but doesn't really allow you to do it in real time. – Billy ONeal Oct 05 '10 at 14:17
  • @Paul: I think he's asking more "how does AJAX work?" – FrustratedWithFormsDesigner Oct 05 '10 at 14:17
  • http://stackoverflow.com/questions/136012/comet-and-jquery Have a look into comet, cometd, node.js and the Bayeux protocol. – Gazler Oct 05 '10 at 14:17
  • @Billy: Well ok then, I admit I am not an expert on AJAX. Does "normal" AJAX not have the real-time component? Maybe clarify the question? – FrustratedWithFormsDesigner Oct 05 '10 at 14:19
  • 3
    @Frustrated: AJAX lets Javascript make a request of the server. But it does not allow the server make a request of the client, which would be required for such a system to work. Unless you put AJAX into a polling loop, but that would be some 5 requests per second per client, which is infeasible and still doesn't really update as fast as GTalk and Etherpad and friends. – Billy ONeal Oct 05 '10 at 14:24
  • I've done pseudo real-time with AJAX - you call the asynchronous callback, and the server doesn't return anything until it has something to return. If the connection times out without returning anything, you call it again. – Paul Tomblin Oct 05 '10 at 14:26
  • @Paul: And therein, you have @Slaks answer. At least I think. – Billy ONeal Oct 05 '10 at 14:31

7 Answers7

10

You can use Comet.

SLaks
  • 800,742
  • 167
  • 1,811
  • 1,896
2

Asynchronous JavaScript and XML or AJAX

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

Ruel
  • 14,301
  • 6
  • 34
  • 49
1

There are many options but basically i'd recommend you look into XMPP. i don't think i'm good enough to boil it down correctly, so i'll let a wiki talk for me

In fact, google voice and video uses it for these systems.

About AJAX, i think it's a communication channel, not a platform or a protocol for multiple person exchange. You could also answer "Use xml over http!" and still be at the same point :)

samy
  • 14,306
  • 2
  • 49
  • 80
  • Google Talk is implemented in terms of XMPP, yes, but not the browser component part of Gmail. Browsers don't understand XMPP -- you would need to somehow implement an XMPP Javascript client and you'd need a specific server to be able to do that. – Billy ONeal Oct 05 '10 at 14:27
  • I think that a xmpp javascript client is possible to communicate with the XMPP server. I'm not really sure, though. But checking wikipedia brought me to the conclusion that Google Wave uses XMPP at its root – samy Oct 05 '10 at 14:36
1

I suggest using AJAX & jQuery for Asynchronous JS

http://api.jquery.com/category/ajax/

Gabe
  • 46,932
  • 26
  • 137
  • 178
  • AJAX does not solve this problem. It lets the client request more data from the server, but doesn't allow the server to make requests of the client. – Billy ONeal Oct 05 '10 at 14:26
0

AFAIK, they use some form of AJAX. However, I would recommend you use the AJAX libraries via jQuery. AJAX is simplified a lot if you use jQuery to do it.

oshirowanen
  • 15,331
  • 77
  • 181
  • 330
  • 1
    AJAX doesn't let you update in realtime. It lets you update, yes, but not by itself is is capable of providing updates with the kind of speed Etherpad and friends require. – Billy ONeal Oct 05 '10 at 14:18
0

Javascript / Ajax allows you to send code to be executed on the client-side (that means, by the browser). Now if you e.g. define a loop which checks for new messages on server every 5 seconds, you can update the web-page "in-real-time" (plus the time for the server to process the req and send response), or similar. A practical example would be the RoR Prototype periodically_call_remote Ajax helper.

Hope this helps!

Jas
  • 1,111
  • 5
  • 16
  • 5 seconds is nowhere near fast enough. – Billy ONeal Oct 05 '10 at 14:22
  • 5 seconds was an example only. Anyway there is always the fixed delay included (server response time) and a variable delay which can be any factor ranging from network congestion to shared host server slowdown, etc. And not to mention that the factor of realtime "feel" also depends on how much data is required to generate updates. – Jas Oct 05 '10 at 14:27
0

As everyone says.. AJAX.

The client keeps on asking the server, after say 30 secs if there is anything new for it to do. Also, you can set the timeout value on an ajax request. keep the time out a bit high.. and the server replies whenever there is something new.

There is no way that the server can other wise ask the client to load some data.

If you are thinking of implementing something on the same lines, look up strophe.js which is an XMPP js-library

Ravindra Sane
  • 472
  • 3
  • 10
  • -1 for: 1. Duplicating other answers here already. 2. Doing it 3.5 hours later than said duplicates. 3. Being 110% incorrect. Don't say "never" -- because then people post answers like [this one](http://stackoverflow.com/questions/3864501/how-does-one-do-realtime-updates-of-a-web-page/3864528#3864528) and you end up with egg on your face. – Billy ONeal Oct 05 '10 at 19:07
  • 1
    Dont know what got your jammies in a a knot., my face is still clean :)... quoting from wikipedia "Comet is a web application model in which a LONG-HELD HTTP request allows a web server to push data to a browser" and "Server pushing: a connection between a server and client is kept open and the server sends data when available.". The connection is kept open for a long time (or forever) until server has something new. – Ravindra Sane Oct 05 '10 at 19:45
  • 1
    Btw, do look up strophe.js, it is a library for XMPP BOSH... one of the alternatives mentioned for Comet. please reduce my incorrectness to less than 110%.. pretty please? – Ravindra Sane Oct 05 '10 at 19:54