flexonrails.net

An experimental STOMP adapter was recently released for RabbitMQ. This means that it is now possible for Flex/Flash apps to communicate with RabbitMQ using the ActionScript 3 STOMP client. The following is a simple demonstration of how to get these technologies to work together.

First, let’s start with a quick description of RabbitMQ and STOMP.

RabbitMQ:

RabbitMQ is a complete and highly reliable Enterprise Messaging system. The RabbitMQ client libraries and broker daemon can be used together to create an AMQP network, or used individually to bring the benefits of RabbitMQ to established networks.

Packages/installers are available for all major operating systems and platforms. RabbitMQ can also be deployed as a VMWare/Debian virtual appliance.

Features:

* A complete, conformant and interoperable implementation of the published AMQP specification
* Based on a proven platform, offering exceptionally high reliability, availability and scalability
* Good throughput and latency performance that is predictable and consistent
* Compact, easily maintainable code base, for rapid customisation and hot deployment
* Extensive facilities for management, monitoring, control and debugging
* Licensed under the open source Mozilla Public License

STOMP:

The Stomp project is the Streaming Text Orientated Messaging Protocol site (or the Protocol Briefly Known as TTMP and Represented by the symbol :ttmp).

Stomp provides an interoperable wire format so that any of the available Stomp Clients can communicate with any Stomp Message Broker to provide easy and widespread messaging interop among languages, platforms and brokers.

As you can see from its description, the primary protocol that RabbitMQ uses is AMQP. If you’d like to learn more about AMQP, then check out this site.

There is an ActionScript 3 client for AMQP that is being developed by Ben Hood. You can read more about this client and learn how to use it by checking out this post on Ben’s site.

Alright, let’s get started with the example of how to use as3-stomp client with RabbitMQ.

1. Follow the steps in this tutorial to get RabbitMQ running with the STOMP adapter.

2. Download the project files for the Flex app.

This project consists of two separate Applications: the ImageSender and the ImageReceiver. The project file also contains the compiled as3-stomp library, so you do not need to download it separately.

3. Import the project into Flex Builder. (This step is optional. Alternatively you could unzip the project file and run the apps by opening the ImageSender.html file and the ImageReceiver.html file in the bin-debug folder.)

4. Launch both applications.

Before we proceed let’s take a quick look at what happened when we launched the apps.

Both apps have an init method that gets called when the application first the creationComplete event. Here is what this method looks like in the ImageSender app:

private function init () : void
{
    var ch: ConnectHeaders = new ConnectHeaders();
    ch.login = "guest";
    ch.passcode = "guest"
    stomp.connect("localhost", 61613, ch);
}

In this code we create a ConnectHeaders object that we use to set the login and passcode for this session. By default, RabbitMQ creates a user called “guest” with password “guest”. We then call connect on the stomp client. The stomp client was instantiated using an MXML tag like so,

<stomp:Stomp id="stomp"  />

The code for the init method in the ImageReceiver app looks pretty much the same except that it contains one more line.

private var destination: String = "/queue/images";

private function init () : void
{
    var ch: ConnectHeaders = new ConnectHeaders();
    ch.login = "guest";
    ch.passcode = "guest"
    stomp.connect("localhost", 61613, ch);
    stomp.subscribe( destination );
}

On the final line in the init method we call the subscribe method on the stomp client. By calling this method we tell the stomp broker (RabbitMQ in this case) that we want to consume messages that are sent to this destination.

The code where we instantiate the stomp client in the ImageReceiver is also pretty much the same as it is in the ImageSender,

<stomp:Stomp id="stomp" message="handleMessages(event)"  />

The only difference is that we set message event property so that every time a message event is fired the handleMessages method gets called.

Ok, back to the demo.

5. Go to the ImageSender app and click the Images button.

6. Select an image from the list and use the mouse cursor to draw some lines on the image.

7. Click Send Image.

8. Go to the ImageReceiver app and you should see the image that you sent.

Ok, back to the code. When you clicked the Send Image button the sendImage method was called,

private function sendImage():void
{
    var image: ByteArray = ImageSnapshot.captureImage(canvas).data;
    stomp.send(destination, image);
}

In this method we use the ImageCapture class (FYI: this class is only available in Flex 3) to capture the image data from that canvas that contains our image and store it in a ByteArray. We then call send on the stomp client to send this data to the “/queue/images” destination.

RabbitMQ receives this message and sends it along to any consumer that are subscribed to this destination, including our ImageReceiver app.

When the stomp client in the ImageReceiver receives the message it fires a message event and calls the handleMessage method.

private function handleMessages(event : MessageEvent) : void
{
    var bd: BitmapData = new BitmapData(canvas.width, canvas.height);
    var loader : flash.display.Loader = new flash.display.Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded);
    loader.loadBytes(event.message.body);
    function onBytesLoaded (event : Event) : void
    {
        var content : DisplayObject = LoaderInfo( event.target ).content;
        bd.draw( content );
        canvas.graphics.beginBitmapFill(bd);
        canvas.graphics.drawRect(0,0, canvas.width, canvas.height);
        canvas.graphics.endFill();
    }
}

This method grabs the body of the message (which is the ByteArray containing the image data) and draws it on to a canvas.

That’s it. As always, let me know if you have any questions. And if you encounter any bugs that appear to be in the as3-stomp client, please submit a report here.

In a previous post I discussed how you can integrate Flex and Scala/Lift using BlazeDS.  In this post I’ll show that it’s also possible to get Rails running on BlazeDS using JRuby.

Here is what I am using for this example:

• Flex 3 Beta 3
• JRuby 1.1 RC1
• Netbeans 6.1 M1
• Flex Builder 3 Beta 3
• BlazeDS
• Goldspike Rake Plugin

You don’t really need Netbeans, but I’ve found that it makes things a bit easier.

For this example I am going to assume you have a basic understanding of Flex and Rails.  That said, if anyone has a question, not matter how basic, please feel free to ask.

Here are the source files if you want to follow along:

• Flex app
• Rails app (this is about 18 MB because it contains several ,jar files)

—– 

Ok, first lets get the Rails app set up.

1. Create a new Rails app called RoRBlaze.

2. Generate a controller called Greeting with an index view.  i.e.,

> ruby script/generate controller Greeting index

3.  Open up your newly generated greeting.rb file and add the following code:

class GreetingController < ApplicationController
  include Java
  import "flex.messaging.MessageBroker"
  import "flex.messaging.messages.AsyncMessage"
  import "flex.messaging.util.UUIDUtils"

  @@msgBroker = MessageBroker.getMessageBroker(nil)
  @@clientID = UUIDUtils.createUUID()

  def hello
    @msg = AsyncMessage.new()
    @msg.setDestination("notifications")
    @msg.setClientId(@@clientID)
    @msg.setMessageId(UUIDUtils.createUUID())
    @msg.setTimestamp(Time.new.to_f)
    @msg.setBody("Hello from Rails")
    @@msgBroker.routeMessageToService(@msg, nil)
    render :text => "Greeting Sent"
  end
end

4. Open view/greeting/index.rhtml and add a button to it like so,

<%=button_to "Send Greeting to Flex", :action=>"hello" %>

5. Go to the BlazeDS folder and  locate the following two .jar files in tomcat\webapps\blazeds\WEB-INF\lib:

• flex-messaging-common.jar
• flex-messaging-core.jar

6. Copy these .jar files into the lib folder in your Rails app (keep this folder open, you’ll need the more of the .jars in a moment).

7. In your Rails app open up config/environment.rb and add the following to the bottom of the file:

Dir["#{RAILS_ROOT}/lib/**/*.jar"].each do |jar|
  require jar
end

Alright, thats pretty much all of the Ruby code for this simple example.  Now we need to use the Goldspike Rails plugin to modify our Rails app so that it can run in a Java server (like Tomcat or Jetty or Glassfish, etc)

8.  From a command line, go to the root of your Rails app and install the Goldspike plugin:

> ruby script/plugin install http://jruby-extras.rubyforge.org/svn/trunk/rails-integration/plugins/goldspike

9. WARify you Rails app using the following rake command:

> rake war:standalone:create

Assuming that Goldspike did its job, you should now have a folder called WEB-INF in the root of you Rails app.  We need to add a few file to this folder to get BlazeDS working.

10. Copy the .jars from BlazeDS\tomcat\webapps\blazeds\WEB-INF\lib into RoRBlaze\WEB-INF\lib

11. Copy the folder BlazeDS\tomcat\webapps\blazeds\WEB-INF\flex into RoRBlaze\WEB-INF

12. Open up the web.xml file in blazeds\WEB-INF and merges its contents into the web.xml file in RoRBlaze\WEB-INF.  Click here to see what the final file should look like.

13. Open up RoRBlaze\WEB-INF\flex\messaging-config.xml and modify it so that it looks like this (click to view the file).  The key thing to note here is that we added a messaging destination called “notifications”.  This is the destination that the Greeting controller publishes to and it is the destination that our Flex app will subscribe to.

14. Open up RoRBlaze\WEB-INF\flex\services-config.xml and modify it so that it looks like this (click to view the file).  The key thing to notice in this file is that we defined a streaming channel called my-streaming-amf that BlazeDS will use to push messages over a persistent, streaming HTTP channel.

That’s it for the Rails app.  Now let’s create the Flex app.

—–

1. Create a new Flex Project (File -> New -> Flex Project)

2. Fill in the rest as follows:

• Project name: RoRBlaze
• Application type: Web Application
• Application server type: J2EE
• Use remote object access service: check this
• Root folder: RoRBlaze  (the root folder of your Rails app)
• Root URL: http://localhost:8080/RoRBlaze/
• Context root: /RoRBlaze
• Output folder: RoRBlaze\public
• Output folder URL: http://localhost:8080/RoRBlaze

3. Open up RoRBlaze.mxml and edit it like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical"
	creationComplete="consumer.subscribe()">

    <mx:Script>
        <![CDATA[
          	import mx.messaging.events.MessageEvent;

            private function messageHandler(message: MessageEvent): void
            {
                pushedMessage.text = message.message.body as String;
            }
        ]]>
    </mx:Script>

    <mx:Consumer
    	id="consumer"
    	destination="notifications"
    	message="messageHandler(event)"
    	channelConnect="trace(event)"
        channelFault="trace(event)"
        fault="trace(event)" />

    <mx:TextInput id="pushedMessage" width="300"/>
</mx:Application>

That’s it for the Flex app.  Let’s test everything out.

—–

1. Open a terminal and go to the root of your Rails app.  Then use Goldspike to boot up your Rails app in a Jetty server:

> rake war:standalone:run

In a few short seconds your Rails app should  be up and running.

2. Launch the Flex app.

3.  Open a browser and enter the following URL: http://localhost:8080/RoRBlaze/greeting

You should see a single button that says “Send Greeting to Flex”

4. Click the button.

Upon clicking the button you should see the browser display “Greeting Sent” and you should see “Hello from Rails” appear in the text input in your Flex app.

That’s it.  Assuming that everything worked properly, the Rails app should have pushed an AMF encoded message to Flex using a persistent streaming HTTP channel created by BlazeDS.

One importatant thing to take note off is that this technique could be useful to you even if you aren’t planning on using Flex/Flash as your presentation layer.  You could use a Juggernaut style approach and push messages from Rails to an embedded Flash player whose only job is to pass those messages along to the browser.

This example demonstrates a very simple way to integrate Flex, Rails, and BlazeDS.  I think the ideal way to integrate these technologies would be to use the ActiveMessaging plugin for Rails, since both ActiveMessaging and BlazeDS have JMS adapters which they could use to integrate with a more robust messaging system like ActiveMQ.  If I can find some time in the near future, and if there is any interest, I’ll do a follow up post on this.