How to do live updating similar to Google Docs?
I want开发者_开发问答 to do something very similar to Google Doc's live updating - where all users can "immediately" see the actions of the other users in the doc.
To achieve this, my ideas so far:
- Continuous AJAX requests being done in the background (this would seem performance-intensive)?
- Surely there's not a way for the server to push notifications to all its clients and update them accordingly?
- AJAX requests every X seconds with a buffer/time-lapse of actions to be accomplished in those X seconds (simulating a real-time effect)?
I would like to know others experience in trying to achieve this effect. What is the best way to do this?
All help is appreciated.
NOTE: I'm not specifically looking for a real-time document editing solution. I'm looking for a solution to the same concept of what Google does with their Docs. I will actually be using that solution in a slightly different manner.
I vote for Long-poll strategy : each client opens a request to the server, but the server never breaks up connections, and just send pieces of java-script from time to time.
Constant AJAX requests would kill your server.
Check out google mobwrite. It's a drop-in library that enables collaborative editing of html forms via operational transformation.
Getting events pushed back from the server is the easy part, there are many ways to do it. Ensuring that the state is consistent across all clients, that's the hard part. That's where the operational transformation algorithm comes in.
A Ajax approach is one way to go. You could implement it like the chat applications. The actual way will depend on the data being view. In short
- Create a session. It could house the users sharing the doc (eg excel file)
- When user A make a change (eg. update cell A5), use Ajax to send the changes to the server. The change can be stored with the date of arrival or some index value.
- A background Ajax call is fired by the page from time to time. As part of the request, the last date of access is passed as well.
- Upon receiving the request, you simply serve all the changes made from the last time or index. You could include the new date or index value as part of the response so that it can be use for the next request.
- When you are sure that the top X elements will not be access, you could remove them
Whether it will be performance intensive or not will depend largely on how to structure everything.
Your other option is web sockets. Haven't used it personally but if you have control over what browser your users will use, you could give it a shot. It allows the server to push data to the browser. Some Links: Web Sockets JS and Web Sockets in Firefox
Another alternative is Orbited:
Orbited provides a pure JavaScript/HTML socket in the browser. It is a web router and firewall that allows you to integrate web applications with arbitrary back-end systems. You can implement any network protocol in the browser—without resorting to plugins.
Orbited is an HTTP daemon that is optimized for long-lasting comet connections. It is designed to be easily integrated with new and existing applications. Orbited allows you to write real-time web applications, such as a chat room or instant messaging client, without using any external plugins like Flash or Java.
If your users are only using modern browsers than i would try out the websocket standard coming with HTML 5. More and more browser will support it in the future and companies like Google and Apple are working on this. Here a getting started tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
If you don't want to use Web Sockets because they're not widely supported, you'll want to look up Comet. That's how Google Docs probably does it.
EtherPad has been open-sourced, if you're looking for a realtime collaborative rich text editor.
One way to limit the # of ajax requests is to get clever with spacing them out. You don't need to make a request every second. When you get a response with activity, then do another request in 1 second. If no activity, then 2 seconds, then 4, etc, with maximum of maybe 30 seconds in between requests. When updates happen, reset the timer. Basically, space your requests in a smart way to make the GUI look as responsive as possible.
I recommend using a Comet framework like Atmosphere. It will automatically choose a transport mechanism for your messages, which can be websockets if you're lucky (but as this is abstracted away, you do not have to worry). Anyway it is great value if you do not have to deal with individual requests / responses and all the error sources and browser bugs that you will encounter. I've been there. There be dragons. :-)
Also take a look at pubsubhubbub - http://code.google.com/p/pubsubhubbub/ Watch the video for a short intro.
You could also have a look at ShareJS a Operational Transform libary and Derby which is a framework built on sharejs. They both have node.js backends - sharejs was written by a Google Wave engineer.
精彩评论