Friday, February 27th, 2009

jsSO: Flash Shared Objects in Javascript

Category: Comet

<p>Daniel Prieler has created a new library that allows realtime communication in JavaScript between clients. It works by embedding Flash in the page which is connected to a rtmp-flash-server.

JSSO works like this:

The data-transfer and the connection to the server are maintained by a simple embedded Flashmovie in your page. The communication with other clients runs through the local Flashmovie and the Red5-Server.
The data-flow between two clients looks like this:

Javascript/jsSO – Flashmovie – Red5-Server – Flashmovie – Javascript/jsSO

javascript
< view plain text >
  1. // Connect to to a shared object Handler (SOSample) on the Red5-Server and
  2. // use the objectName "draw". The objectName is identical to a namespace
  3. // for your data or a chat-room.
  4. // SOSample is the simplest shared object example of the Red5-server
  5. jsSO.connect('draw', 'rtmp://localhost/SOSample');
  6.  
  7. // On button click set someVar in the shared object
  8. $(':button').live('click', function(){
  9.     jsSO.set('someVar', 'value');
  10. });
  11.  
  12. // Listen to changes on the shared object
  13. // event = A jquery event object
  14. // updates = If a var is updated it is set in the updates-object.
  15. //           See code below for usage
  16. // data = All data in the object
  17. jsSO.onSync(function(event, updates, data) {
  18.     if (updates.someVar) {
  19.         // someVar was updated
  20.         console.log(data.someVar);
  21.     }
  22. });

Related Content:

Posted by Dion Almaer at 5:41 am
13 Comments

+++--
3.8 rating from 30 votes

13 Comments »

Comments feed TrackBack URI

I wonder is the flash even needed there? why not just use Ajax to send messages directly to the server skipping the flash bit altogether?

and use a comet-like connection if you want live updates

Comment by kae — February 27, 2009

RTMP is a much better protocol for low-latency message passing than long-polling HTTP.

Comment by millenomi — February 27, 2009

Cool stuff, Does it contain fallbacks in case flashplugin is not present?

Comment by BenGerrissen — February 27, 2009

@kae: as millenomi already said, rtmp is really fast for low-tanency connections. with a local installation or even a installation on a remote webserver i have no lag e.g. when moving the mouse in the “draw example”.

@bengerrissen: thanks for the idea, i added it to the future improvements on my page.

Comment by dprieler — February 27, 2009

Wow, this is going really fast ! Iwonder if it scales well…

Is IE support planned ?

Comment by ywg — February 27, 2009

A game like xsketch might be a good test case for this.
http://xsketch.com/

Comment by GregHouston — February 27, 2009

Ummm, a Flash Shared Object does not have anything to do with server communication. A shared object in flash is essentially a cookie. Name Fail!

Comment by FlashMorgan — February 27, 2009

Before the flame war begins, I was being sarcastic with the Name Fail comment. I know you are talking about server side shared objects. Using Flash to communicate with other servers via javascript isn’t anything new. Lots of sites use this approach over Ajax because of Flash’s cross domain policies. Ajax is far more strict and locked down when communicating cross domain, Flash has options.

Comment by FlashMorgan — February 27, 2009

Another novel use of Red5, I love it.. nice work!

Comment by Mondain — February 27, 2009

Daniel Prieler, thank you this is really great. I am trying to get this working on my computer but don’t have a clue how to go about this as I have never done any Flash work before. So far I have installed Red5 server. Would you be able to provide details as to what files to copy onto the Red5 server to get this to work?

Comment by samtoocan — February 28, 2009

Ok I think I have worked it out so far. There are no files required to install on the Red5 as it uses the SoSample object that comes with the server. Now for my chat application, all I need to do is figure out how to talk to the Red5 server from PHP, which I also dont have a clue.

Comment by samtoocan — February 28, 2009

@ywg: i tested jsSO in firefox and ie6+7 and haven’t noticed any problems.

@samtoocan: yep, you only have to install red5 to start using jsSO, the SOSample is preinstalled in red5 :)

my next step for jsSO will be to implement a function to “call” server side logic on the red5 server.
then you are able to talk to your php-scripts by using a custom java-function with some database queries etc.

i also got asked how to implement a session for only 2 users (e.g. a 2 player game): the easiest way i could come up with is to created some random (or md5) id, which only those 2 players “know” and use this id in the conect method: jsSO.connect(‘game:’+random, …). it would also be nice to modify the red5-SOSample to only allow 2 connections for each sharedObject-name. but i’m not into the red5-java-codebase yet.

Comment by dprieler — March 1, 2009

@GregHouston > Shared Object could be Remote or Local. You are telling about local SO. Here, JsSO is used to get Remote SO.

This Library is really usefull but in fact very simple… it only call a swfObject on page wich does communications. You could create your own as I did since several months.

Comment by Metal3d — March 2, 2009

Leave a comment

You must be logged in to post a comment.