Flex/Flash to STOMP to ActiveMQ

Internet 2 Comments

adobeflashplayerRecently, I wanted to look into writing a Flash client which uses the STOMP protocol to talk to an Apache ActiveMQ Server. I found this great blog, Flex chat application that uses Apache ActiveMQ and STOMP, that talks about creating a STOMP-based chat client using Flex. I tried to follow the blog and found that it was missing several installation steps and instructions on how to use the free Flex SDK. To save you the trouble, I’ve documented the missing steps below.

Note: I’ve never developed with Flash or Flex before but after some reading, I came to the realization that both were different ways of doing the same thing. Flash is an in-browser platform which uses the ActionScript language, similar to a Java Applet using the Java language. Flex could be considered as way to package ActionScript 3 (AS3) code, pre-built AS3 GUI libraries, and media files for compilation into a SWF file. This paragraph is probably totally inaccurate but it helps me keep things organized in my head.

First, download and unzip the latest Apache ActiveMQ Server to a directory like “c:\install\apache-activemq”.

  • Enable the STOMP support:
    • Open and edit “c:\install\apache-activemq\conf\activemq.xml”
    • Search for the text “<transportConnectors>”
    • Add the stomp connector definition under the existing openwire connector:
    <transportConnector name="openwire" uri="tcp://0.0.0.0:61616"/>
    <transportConnector name="stomp" uri="stomp://0.0.0.0:61613"/>
  • Run the ActiveMQ Server with this command: “c:\install\apache-activemq\bin\activemq.bat”. The ActiveMQ Server will start listening on ports 61616 and 61613.

Second, download and install the latest Flash Security Policy Server to a directory like “c:\install\flash-policy-server”. The Flash Security Policy Server allow cross-domain STOMP connections to be made from the Flex chat client.

Note: Adobe added cross-domain security restrictions to Adobe Flash 9 players and later versions. This restriction prevents the Flash player from connecting to another server or to a different port on the same server (such as the STOMP port 61613) from which the Flash player’s hosting HTML page was served. To allow the Flash player to talk to the different STOMP port 61613, we have to run a flash security policy server on the same hosting server with a configuration allowing the action.

  • Allow Flash clients to talk to the server’s Stomp port:
    • Open and edit “c:\install\flash-policy-server\resources\default_policy.xml”
    • Search for text “allow-access-from”
    • Under the allow access statement for port 8080, add a second line for the stomp port 61613:
    <allow-access-from domain="*" to-ports="8080" secure="false"/>
    <allow-access-from domain="*" to-ports="61613" secure="false"/>
  • Run the policy server with the command: “c:\install\flash-policy-server\start-policy-server.bat”. The policy server will listen on port 843.

Third, download and unzip the latest Adobe Flex SDK to a directory like “c:\install\flex-sdk”.

  • Add the Flex SDK bin directory to your path environmental variable:
    • Right-click on “My Computers” and select “Properties”. A dialog window will appear.
    • Click on “Advanced” tab and hit the “Environment Variables” button. A smaller dialog window will appear.
    • Double-click on the “Path” variable in either list boxes. An even smaller dialog window will appear.
    • Go to the “Variable value” edit field and append “;c:\install\flex-sdk\bin” to the end.
    • Hit OK, OK, OK.
  • Alternative, you can just run the following in the command prompt window before compiling with Flex: “set PATH=%PATH%;c:\install\flex-sdk\bin”

Fourth, download and unzip the STOMP Chat client source to a directory like “c:\projects\stompchat”.

  • Launch the Window command prompt application by going to Start menu, select “Run…”, type in “cmd”, and hit the OK button.
  • Go to the stompchat directory: “cd \projects\stompchat”
  • Compile the STOMP chat client using the Flex SDK compiler:
    mxmlc.exe -source-path=.\ .\StompChat.mxml -output .\StompChat.swf
  • Drag and drop the generated StompChat.swf file into two browser windows (the latest Firefox or IE will work). Login with any name and start chatting back and forth.

Congratulations! Hopefully everything worked for you.

If it didn’t, here are some debugging steps:

  • Manually connect to the ActiveMQ STOMP service to make sure it is actually running by following this Stomp Tutorial.
  • If you have the Java SDK installed, you can use JConsole to look at the ActiveMQ queue statistics.
    • Run “jconsole.exe” from the Java SDK bin directory.
    • Select “Local Process” and “run.jar start”. Click on Connect.
    • Click on “BMeans” tab
    • Expand “org.apache.activemq”, “localhost”, “Topic”, and “CHAT.DEMO” which is the queue name used by the STOMP chat client (if you open StompChat.mxml, you will see it defined as the topic variable)
    • Expand “Attributes” and select “QueueSize”. The QueueSize count should keep increasing as chat messages are received by ActiveMQ server. You will have to hit the Refresh button to update the count.

FYI, Integrating Flex and RabbitMQ using STOMP is another Flex STOMP example that sends an image file instead of just text chat messages. Here are the Flex SDK compilation commands for the example STOMP Image Share source:

mxmlc.exe -source-path=.\src\ -library-path+=.\libs\Stomp.swc .\src\ImageSender.mxml -output .\bin\ImageSender.swf
mxmlc.exe -source-path=.\src\ -library-path+=.\libs\Stomp.swc .\src\ImageReceiver.mxml -output .\bin\ImageReceiver.swf
2 Comments