Flex + C# + FluorineFx

Secure Cassini

2009-12-23T11:12:00.000-08:00

Everybody's heard of the open source web server by Microsoft, "Cassini". If not it is the same server that is used in Visual Studio (as far as i have read). You can find the full source code of cassini on the msdn blog of Dmitryr .

Now this server is a lacking in one functionality (which we required) and that is it does not support SSL or HTTPS connections. Hence, you cannot host a secure website on this server.
This server is basically meant for local use and not to host websites that are accessible externally (use IIS instead). Although it can support external connections by changing just one parameter. Our requirement was to host a website locally on a computer which would be accessible by the host computer only (generally) but the connection that is established must be secure that is, it must use HTTPS.

Configuring IIS has always been a tough job (at least for me), hence we came out with a solution and implemented HTTPS in Cassini, which can now host websites over secure connection using HTTPS.

All you need to do is obtain a certificate (to prove your site's identity) this can be purchased (from VeriSign or other such service providers) or can be self signed. I will shortly upload the source files of the Secure version of Cassini and also the method to generate a self signed certificate.

Real Time Messaging

2009-10-08T06:31:00.000-07:00

Finally, after two days of hard work and lots of hick ups , I was able to implement real time messaging between C# and Flex.

Let's get into code real fast as I know it must have been very frustrating trying to get it done (without any documentation from Fluorine or any help, I was unable to find it on google too, surprising).

The example I show here is same as one of the samples provided by Fluorine however, I think if you are able to run this sample by your own code you can develop an application that is able to send messages as your requirements are. The example I used is of Date feed. We will send send date and time from the server side (C#) to the flex RTMP client and display it here.

The C# code is as below. Create an empty solution add a Fluorine class library and a Fluorine Website to the solution. In the class library add a class "DateFeedService" as below.

using System; using System.Collections; using System.Threading; using FluorineFx; using FluorineFx.Messaging; using FluorineFx.Messaging.Messages; namespace ServiceLibrary { /// <summary> /// Summary description for DateFeedService. /// </summary> [RemotingService] public class DateFeedService { private static Thread _thread; private static bool _isRunning = false; static object _objLock = new object(); public DateFeedService() { } public void toggle() { lock (_objLock) { if (!_isRunning) { _isRunning = true; _thread = new Thread(new ThreadStart(Push)); _thread.Start(); } else { _isRunning = false; _thread.Join(); _thread = null; } } } private void Push() { while (_isRunning) { MessageBroker msgBroker = MessageBroker.GetMessageBroker(null); DateTime now = DateTime.Now; AsyncMessage msg = new AsyncMessage(); msg.destination = "datefeed"; msg.clientId = Guid.NewGuid().ToString("D"); msg.messageId = Guid.NewGuid().ToString("D"); msg.timestamp = Environment.TickCount; Hashtable body = new Hashtable(); body.Add("userId", "daemon"); body.Add("msg", now.ToString()); msg.body = body; msgBroker.RouteMessage(msg); Thread.Sleep(1000); } } } }

And the Flex side code is as below.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 width="100%" height="100%"
 verticalScrollPolicy="off" horizontalScrollPolicy="off"
 creationComplete="initMessaging()"> <mx:Script> <![CDATA[
 import mx.messaging.channels.StreamingAMFChannel;
 import mx.messaging.channels.AMFChannel;
 import com.MyCompany.MyProject.event.GetMessageEvent;
 import mx.messaging.events.MessageEvent;
 import mx.rpc.events.ResultEvent;
 
 public function initMessaging():void
 {
 myConsumer.subscribe();
 }
 
 public function clickHandler():void
 {
 feeder.toggle();
 }
 
 public function messageHandler(event:MessageEvent):void 
 { 
 var body:Object = event.message.body;
 lab1.text = body.userId + ": " + body.msg;
 } 
 
 ]]> </mx:Script> <mx:RemoteObject id="feeder" destination="fluorine"> <mx:method name="toggle"/> </mx:RemoteObject> <mx:Consumer id="myConsumer" destination="MyMessaging" message="messageHandler(event)"/> <mx:Button label="Start" click="clickHandler()"/> <mx:Label id="lab1"/> </mx:Application>

Now comes the most important (and undocumented) part that will instruct the .NET side to start a RTMP server and listen on a particular port, this is the configuration part.

Since we are using Remoting and Messaging both in the same application we will have to configure both for the application to work.

Moreover, configuration is required in the Flex and .NET side as well.

The configuration for the flex side is as below:

<?xml version="1.0" encoding="utf-8" ?> <services-config> <services> <service id="remoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <destination id="fluorine"> <channels> <channel ref="my-amf"/> </channels> <properties> ServiceLibrary.DateFeedService</source> </properties> </destination> </service> <service id="message-service" class="flex.messaging.services.MessageService" messageTypes="flex.messaging.messages.AsyncMessage"> <adapters> <adapter-definition id="messagingAdapter" class="FluorineFx.Messaging.Services.Messaging.MessagingAdapter" default="true"/> </adapters> <destination id="MyMessaging"> <adapter ref="messagingAdapter"/> <channels> <channel ref="my-rtmp"/> </channels> <properties> *</source> <network>  <session-timeout>20</session-timeout> </network> </properties> </destination> </service> </services> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://localhost:3262/MyWebsite/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/> <properties>  </properties> </channel-definition> <channel-definition id="my-rtmp" class="mx.messaging.channels.RTMPChannel"> <endpoint uri="rtmp://{server.name}:2037" class="flex.messaging.endpoints.RTMPEndpoint"/>  </channel-definition> </channels> </services-config>

Configuration for the C# side is as below. These files must be located in the Fluorine website we created earlier within the WEB-INF/flex folder.

Three files are necessary.
1. services-config.xml

<?xml version="1.0" encoding="utf-8" ?> <services-config> <services> <service-include file-path="remoting-config.xml" /> <service-include file-path="messaging-config.xml" />  </services> <security> </security> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://{server.name}:{server.port}/{context.root}/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/> <properties>  </properties> </channel-definition> <channel-definition id="my-rtmp" class="mx.messaging.channels.RTMPChannel"> <endpoint uri="rtmp://{server.name}:2037" class="flex.messaging.endpoints.RTMPEndpoint"/> <properties> <idle-timeout-minutes>20</idle-timeout-minutes> </properties> </channel-definition> </channels> </services-config>

2. remoting-config.xml

3. messaging-config.xml

The first configuration file sets up channels for Remoting and messaging and instructs to load the remaining two config files for the services section.
The other two files deal with the configuration of the messaging and remoting adapters. The messaging config file configures the application to start RTMP server on a particular port and listen for incoming requests from subscribers.

Hope the above example help you to send real time messages to your flex application from C#.
Comments ?

2009-08-24T03:18:00.000-07:00

The following example will help you connect your Flex application to C# code via FluorineFx.While this is easy, lack of proper example makes the job tough for beginners like me. Since after googling and searching the web I was finally able to do it, I thought it would be good to post an example.
The following example will assist you with communicating with C# code using Remoting. The Flex application will create an object of the remote class and execute a function of the remote class.
Since Flex uses AMF and C# uses SOAP for remoting we need a gateway like FLuorinFx (or WebORB).

Requirements :

You will need the following softwares.
1. Adobe Flex 3.0 (or above)
2. MS Visual Studio 2005 (or above)
3.FluorineFx (available at http://www.fluorinefx.com/download.html)

Create an empty solution in VS 2005. Add a FluorineFx class library and a FluorineFx website to the solution. Implement the following class in your class library.

namespace MyDemoLib
{

    [RemotingService]
    public class Math
    {
        public Math()
        {
        }

        public int add(int x,int y)
        {
            return x + y;
        }
    }
}

Build the project and run it. The class library is automatically built and added in the references section of the website. If you create a different project for the two then add the dll of the class library manually.

Now comes the Flex part.
Create a simple project in flex.
I named it "DemoProjectFluorine". Since we are taking a simple example we will design the main application page to accept the user input. If you have decided to make a more complex project the you would probably make a custom mxml component and then use it in the main application page.

The code is as below.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; public function remoteAdd():void { myRemoteObj.add(int(txtNum1.text),int(txtNum2.text)); } public function faultHandler(event:FaultEvent):void { Alert.show("Fault", event.fault.toString()); } public function resultHandler(event:ResultEvent):void { lblResult.text = "Result =" + int(event.result); } ]]> </mx:Script> <mx:RemoteObject id="myRemoteObj" destination="fluorine" source="MyDemoLib.MyMath" fault="faultHandler(event)"> <mx:method name="add" result="resultHandler(event)"/> </mx:RemoteObject> <mx:TextInput id="txtNum1" x="89" y="76"/> <mx:TextInput id="txtNum2" x="89" y="143"/> <mx:Button x="109" y="210" label="Add using Remoting" click="remoteAdd()"/> <mx:Label x="10" y="80" text="Num 1"/> <mx:Label x="10" y="147" text="Num 2"/> <mx:Label x="47" y="272" width="179" height="26" fontSize="12" id="lblResult"/> </mx:Application>

In the above code we create a RemoteObject and use this object to call the remote method.
One important point is to include a configuration file in the flex project that helps to resolve the uri to the appropriate website ( which we created and ran before). Also include this file in the Flex compiler settings.
You can do this by a right click on the flex project -> properties ->Flex compiler and include the path to this configuration file in the additional compiler arguments.
"-services "services-config.xml" "

The configuration file is as below.

Please note the endpoint URI for the above is at port 1425, please change it to the port on which your ASP.NET website runs.

All is done now you are ready to go.

Just for fun add a breakpoint to the method in the website and see the magic. When you enter the two numbers and click "Add" button, the Visual Studio Debugger pops up confirming the connection and a call being placed. I felt great when this happened, I had just called a method in a different application domain ( and in a different language ) from an entirely different application.

Hope this simple example helps you. Any comments are welcome.

Fun !!