ASP.NETとFlex-永遠の友情

この投稿は、2つのASP.NETプラットフォームとFlexプラットフォームを統合する可能性に捧げたいと思います。



まえがき


一般に、Flashはリッチなマルチメディアプロジェクトを作成するための優れたツールであり、ActionScript 3およびFlexテクノロジーのリリースにより、プログラミングの楽しみになりました。 同時に、RIAとデスクトップアプリケーションの両方を作成できます(ありがとう、Adobe AIR)。



一方、Webアプリケーションを作成するための強力なツールであるASP.NETがあります。 アプリケーションを構築するために、2つのまったく異なるアプローチを使用できます。RESTスタイルに準拠したWebForms + Web ServicesまたはASP.NET MVCを使用します。

余談を終える前に、必要なツールの概要を説明します。

だからこれは-

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




FluorineFXに会う


例として、頻繁に更新されるデータを処理し、他のクライアントと同期するアプリケーションの例を挙げたいと思います。 通常、Flexの場合、AMFストリーミングまたはRTMPストリーミングのいずれかが使用されます。 FluorineFXライブラリは、サーバー側のサポートを追加するのに役立ちます。 プロジェクトサイトと便利なリンクはこちら



クッキングサーバー


ASP.NETアプリケーションを作成する前に、クライアント用のサービスとロジックをカプセル化するミニサーバーであるライブラリを作成する必要があります。 これを行うには、C#で新しいライブラリプロジェクトを作成し、ServiceLibraryという名前を付けます。

アクティブなクライアントを監視するには、MessagingAdapterを継承し、ISessionListenerインターフェイスを実装するクラスを作成する必要があります。



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; } }
      
      





リモート処理を使用して作業するクライアントの場合、APIを提供するサービスを作成します。



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





現時点では、ミニサーバーコードで十分です。 クラスの各インスタンスは、新しいクライアントがASP.NETアプリケーションと同じドメインに接続して動作するときに作成されます。



Webアプリケーションの準備


WebアプリケーションはASP.NET 4で実行されます。これを行うには、スタジオで新しいプロジェクトを作成します。

クライアントを接続するために、FluorineFXはゲートウェイを使用します。これは、フッ素のhttpモジュールがリクエストを処理する通常のASPXページにすぎません。 この質問については後で詳しく説明しますが、ここでは通常のASP.NETページを追加し、Gateway.aspxと呼びます。

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>
      
      





FluorineFXは、WEB-INFフォルダーにある構成ファイルでのみ機能することに注意してください。 これは、サーバーがBlazeDSおよびLifeCycle Data Services用に構成されている方法です。



次に、構成ファイルを作成します。 これを行うには、ルートディレクトリとflexサブフォルダーにWEB-INFフォルダーを作成します。

services-config.xmlという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>
      
      





上記では、2つのエンドポイントを示しました。AMFおよびRTMPチャネルのほか、リモーティングおよび/またはメッセージングを介して動作するクライアントの2つの構成ファイルの場所です。 remoting-config.xmlファイルとmessaging-config.xmlファイルを同じフォルダーに追加します。



Flexクライアント


次に、クライアントを作成します。 最初に、Flash BuilderでFlexプロジェクトを作成します。 次に、プロジェクトのプロパティ> Flex Compilerを開きます。 [追加のコンパイラ引数]テキストボックスに、次の行-services "{project_location} \ WEB-INF \ flex \ services-config.xml"を追加します。 そしてもちろん、プロジェクトにfds.swcへのリンクを追加して、RTMPChannelサポートを有効にします。 このライブラリはLCDSの一部ですが、LCDSがない場合は、記事の最後のファイルに存在します。 アプリケーション* .mxmlファイルに、次のコードを貼り付けます。

 <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>
      
      





最後に、SendMessageメソッドをAppAdapterに追加して、サーバーからクライアントにメッセージを送信します。



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); } }
      
      







あとがき


この投稿では、Flex + ASP.NETバインディングの本質を明らかにしたかったのです。 もちろん、認証や承認、厳密に型指定されたサーバー応答などの文字列だけでなく、その他の瞬間も明らかにされていません。 しかし、次回については。

Flexのすべてのコードと、VS 2010のサンプルを含むソリューション自体は、 ここからダウンロードできます



All Articles