Real-time Web Collaborating Possibility
Thanks to the modern web technique, web applications have become the trend these years. In the past years, we are moving our working environment from desktop to web, from hard disk to cloud. Many applications appears to help putting workmates together through the internet. Google Docs, Basecamp are one among them.
There is one technical problem of using the traditional HTTP protocol when making these apps. It is difficult to sharing multi users information except using database or some kind of file storage.
Case Study, Stixy
Take the online collaborating web app, Stixy, as example. This tool allows users to put text, images and documents on a ‘board’. The position and content is flexible to the users. This board can be shared between several users so everyone can share the same board and content.
The graph on the right shows the collaborating flow of Stixy. →
The problem here is that the content is fetch from database to the user’s session every time he logins. And the other user get the latest updated content not until this user save the board and refresh the browser. This make it not quite possible for two or more users working on the same board at the same time.
← Although a better solution can be like the graph on the left.
However, this polling and frequency database access requires much a lot computing resources and is not particle in production.
Introducing Socket Server
In order to making real-time communicating between different users, we need a socket server.
A socket server establish a connection between the client computer and the server. Unlike web server that the connection closes after the request action, the connection of the socket server stay live until a specify disconnection command.
Web clients connect to the socket server and stay alive in the server and thus enables the socket server to share information between connections. And this will lead to the possibility of real-time communicating between users.
Connecting via Flash
One way to establish socket connection is using Flash. Flash supports xml and binary socket connection to remote server. We can use Flash as a bridge between the web browser and the server.
There are several available socket server for flash in the market. They are:
These are only some of them. It is okay as long as you can find a way to socket connect from your web client to the server. There are several pros and cons of those servers but I am not talking about it here.
ExternalInterface
ExternalInterface is a class to enable a Flash movie call the javascript in the same page and setup callback function to be called by javascript.
We can use ExternalInterface to control the web app from flash and update the app by using javascript. This enables the web application call access server-side socket server resources through the Flash.
After all, the flow of sharing data between users is much more simpler. →
Back to the Stixy Example
What happens if we apply this technology to make a Stixy-like web application? Every modification of the board from one user can immediately send to the socket server and the socket server share this modification to other users with the same board opening. All this is done without creating a new connection and without addition database access. The collaborating between real-time just like every one is siting around the same table putting different material on the desk and discuss.
Conclusion
In this article I introduced a possible way to communicate between different web clients in real-time through socket connection. Flash may not be the only way to establish the connection. I use Flash as the example because I get used to Flash socket programming.
I did not provide any code example of this article because this is only an introduction of the real-time collaborating web app.
There are many technical points in this article that may be hard to understand. For example, The usage of ExternalInterface, how to implement the connection between Flash and server. Please leave any comments on the article so that I know what I should write next to illustrate this idea in detail.
Addition Notes
Stixy is a great web application of collaborating between people remotely. Especially useful for passing comments and work between workmates in different timezone. When I am working with other workmates with different timezone, it is often hard to chat with them directly. Stixy provides a great way that I can leave a comment on the design and then sleep. My workmate will get the message when he is awake and I am still dreaming.
I use Stixy as an example to illustrate how to change it into real-time way because it is easier to illustrate in graph. However I have no any meaning to say Stixy is not good enough. Go try it and you will like it.
Leave a Reply
Hi makzan,
Great write-up. Thank you for using Stixy as an example and for sharing you insight. We actually have a working prototype utilizing Flash as you’re suggesting for real-time synchronization. We’re using Juggernaut (http://juggernaut.rubyforge.org/), since Stixy is a Ruby on Rails project.
/jonas
Thanks Jonas for your comments.
The Juggernaut server looks promising and I’m looking forward to using the real-time upgraded Stixy service soon.
by the way, I used SmartFoxServer (http://smartfoxserver.com) to make a prototype of sharing a note and text in real-time for this article. It is Java-based and mainly focus for Flash multi-player game development. Juggernaut seems better in this case because it is free and build for Ruby on Rails.