ASP.NET and Flex - friendship forever

I would like to devote this post to the integration of two ASP.NET and Flex platforms.

Foreword

As a rule, Flash is an excellent tool for creating rich multimedia projects, and with the release of ActionScript 3 and Flex technology, it has become a pleasure to program. In this case, you can create both RIA and desktop applications (thanks, Adobe AIR).

On the other hand, ASP.NET is a powerful tool for creating web applications. You can use two completely different approaches to building an application: either use WebForms + Web Services, or ASP.NET MVC, following the REST style.
Before we finish the lyrical digression, I would like to identify the tools that we need.
So this is

1. Visual Studio 2010 Professional
2. Flash Builder 4 Standard

Meet FluorineFX

As an example, I would like to give an example of an application that will work with frequently updated data and synchronize with other clients. Usually, in the case of Flex, either AMF-streaming or RTMP-streaming is used. To add support from the server, the FluorineFX library comes to the rescue. Project site and useful links here .
')

Preparing the server

Before creating an ASP.NET application, we need to create a library that is a mini-server that encapsulates services and logic for clients. To do this, create a new library project in C # and name it ServiceLibrary.
To monitor active clients, you need to create a class that inherits from the MessagingAdapter and implements the ISessionListener interface.

public class AppAdapter : MessagingAdapter, ISessionListener { public AppAdapter() { ClientManager.AddSessionCreatedListener(this); } #region ISessionListener Members public void SessionCreated(IClient client) { //     client.AddSessionDestroyedListener(this); } public void SessionDestroyed(IClient client) { //     } #endregion public override object Invoke(IMessage message) { //         return null; } } 

For clients working through remoting, we will create a service that will provide an API.

 [RemotingService()] public class DataService { public DataService() { } //     . public string GetData() { return "Hello, world!"; } } 

On this so far, the mini-server code is sufficient for use. Each instance of the class will be created when connecting a new client and working in the same domain as the ASP.NET application.

Web Application Preparation

The web application will work on ASP.NET 4. To do this, create a new project in the studio.
For client connections, FluorineFX uses a gateway, which is nothing more than a regular ASPX page, requests for which the http module of Fluorine will handle. We will look at this issue in more detail below, but for now let's add a regular ASP.NET page and name it Gateway.aspx.
Configuring web.config

 <configuration> <configSections> <sectionGroup name="fluorinefx"> <section name="settings" type="FluorineFx.Configuration.XmlConfigurator, FluorineFx" requirePermission="false"/> </sectionGroup> </configSections> <fluorinefx> <settings> <rtmpServer> <threadpool minWorkerThreads="0" maxWorkerThreads="25" idleTimeout="60000"/> <rtmpConnection pingInterval="0" maxInactivity="60000" maxHandshakeTimeout="0"/> <rtmptConnection pingInterval="5000" maxInactivity="60000" maxHandshakeTimeout="5000"/> <rtmpTransport receiveBufferSize="4096" sendBufferSize="4096" tcpNoDelay="true"/> </rtmpServer> </settings> </fluorinefx> <system.web> <compilation debug="true" targetFramework="4.0" /> <httpModules> <add name="FluorineGateway" type="FluorineFx.FluorineGateway,FluorineFx" /> </httpModules> </system.web> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules runAllManagedModulesForAllRequests="true"> <add name="FluorineGateway" type="FluorineFx.FluorineGateway, FluorineFx"/> </modules> </system.webServer> </configuration> 

Note that FluorineFX only works with configuration files located in the WEB-INF folder. This is how the server is configured for BlazeDS and LifeCycle Data Services.

And now we will create configuration files. To do this, create a folder WEB-INF in the root directory and a subfolder flex.
Add an xml file called 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> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://{server.name}:{server.port}/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/> <properties> <!-- <legacy-collection>true</legacy-collection> --> </properties> </channel-definition> <channel-definition id="my-rtmp" class="mx.messaging.channels.RTMPChannel"> <endpoint uri="rtmp://{server.name}:1950" class="flex.messaging.endpoints.RTMPEndpoint"/> </channel-definition> </channels> </services-config> 

Above, we specified 2 end-points: for AMF and RTMP channels, as well as the location of two configuration files for clients working through remoting and / or messaging. Add the files remoting-config.xml and messaging-config.xml to the same folder.

Flex Client

Now it's time to create a client. First, create a Flex project in Flash Builder. Next, open the project properties> Flex Compiler. In the "Additional compiler arguments" text box, add the following line -services "{project_location} \ WEB-INF \ flex \ services-config.xml" . And, of course, add a link to fds.swc to the project to enable support for RTMPChannel. This library is part of the LCDS, but if there is no LCDS, it is in the files at the end of the article. In the * .mxml file of the application, paste the following code:

 <fx:Declarations> <mx:Consumer id="consumer" destination="data_destination" message="messageHandler(event)"/> <mx:RemoteObject id="dataRO" destination="DataDest"> <mx:method name="GetData" result="GetDataResult(event)" fault="GetDataFault(event)" /> </mx:RemoteObject> </fx:Declarations> <fx:Script> <![CDATA[ private function GetDataResult(event:ResultEvent):void { var result:String = event.result as String; //  } private function GetDataFault(event:FaultEvent):void{ var error:String = ObjectUtil.toString(event.fault); //  } private function messageHandler(event:MessageEvent):void { var msg:IMessage = event.message; var type:object = msg.body; //  } ]]> </fx:Script> 

And the final touch is adding the SendMessage method to our AppAdapter to send messages from the server to the client.

AppAdapter.cs

 public class AppAdapter : MessagingAdapter, ISessionListener { /* * ... */ public override object Invoke(IMessage message) { //         MessageService messageService = this.Destination.Service as MessageService; messageService.PushMessageToClients(message); return null; } public static void SendMessage(string message) { MessageBroker msgBroker = MessageBroker.GetMessageBroker(null); AsyncMessage msg = new AsyncMessage(); msg.destination = "data_destination"; msg.headers.Add(AsyncMessage.SubtopicHeader, "client"); msg.headers.Add(AsyncMessage.EndpointHeader, "my-rtmp"); msg.headers.Add(AsyncMessage.RemoteCredentialsHeader, string.Empty); msg.headers.Add(AsyncMessage.FlexClientIdHeader, Guid.NewGuid().ToString("D")); msg.clientId = Guid.NewGuid().ToString("D"); msg.messageId = Guid.NewGuid().ToString("D"); msg.timestamp = Environment.TickCount; msg.body = message; msgBroker.RouteMessage(msg); } } 

Afterword

In this post I wanted to reveal the main essence of the possibility of binding Flex + ASP.NET. Of course, such moments as authentication and authorization, strictly typed server responses, and not just string and much more, were not disclosed. But more about that next time.
All code for Flex and the solution itself with an example for VS 2010 can be downloaded here .