ActionScriptを使用したIce Webクライアントの開発

10716 ワード

ActionScriptを使用したIce Webクライアントの開発
現在のプロジェクトサーバ側ではIceを使用して構築されています.Iceには独自のネットワークプロトコルがあり、クライアント側とサーバ側はこのプロトコルに基づいて対話することができる.IceはSliceという中間言語を用いてサーバとクライアントのインタラクティブインタフェースを記述するため,ネットワークプロトコルという詳細を極めて遮断することができる.つまり、IceとSliceを利用すれば、簡単にネットワークプログラムを作成することができます.
その後、バックエンドにはWebブラウザ上で実行されるクライアントが必要になります.Iceと対話するには,TCPプロトコルを使用すると長接続が保証される.しかし、HTTPは短い接続です.一方、IceがサポートするWeb関連の言語を選択する必要があります.ブラウザ側で直接Iceサービスに接続する場合、選択可能な言語/プラットフォームは次のとおりです.
  • Flash
  • Silverlight

  • 私は以前erlangでIceのクライアントライブラリを簡単に書いたので、Iceの下位プロトコルについてある程度知っていて、必ずしもIceがサポートする言語を使うことができないので、HTML 5も実は選択です.また、ブラウザ側でAppletを使用する場合は、Javaも選択肢になるかもしれません.
    実は数ヶ月前にこの技術選択問題で簡単な研究をしたことがあります.その時確定した案はFlashを使うことです.しかし、その後、人員募集に問題が発生し、ActionScriptとフロントエンドページ技術ができるプログラマーを募集して私たちのプロジェクトをするようになりました.
    では、チームに既存のJavaプログラマーがいることを考慮すると、Javaでウェブサイトを書くプログラマーを募集するのは簡単で安いように見えますが、技術的な理由を排除する最善の選択のようです.しかし、ブラウザ側で直接サーバに接続してインタラクションを行うのではなく、Webサーバ側に中継をさせると、多くの問題に直面します.
  • ブラウザ側の操作結果の取得問題は、はっきり言って非リアルタイムであり、Ajaxなどの技術でリアルタイムをシミュレートしなければならない.
  • Webサーバ側は大量のコードを書く必要がある:ユーザー操作へのマッピング、結果キャッシュ等
  • サーバと対話する部分をFlashでラッピングし、UI関連のものをHTML/JS/CSSに残すことができれば、それは少し可能ではないでしょうか.ActionScriptでサーバ側とのインタラクティブな論理コードを記述するだけでは、ActionScriptをシステム的に学習したり、Flashでインタフェースをどのようにするかを理解したりする必要はありません.これらの技術の関係を理解する必要はありません.基本的にIce for ActionScriptの例コードを見て、このことを完成することができます.
    主な手順/方法を以下に示します.
    ActionScriptプログラムの開発
    Webページに埋め込まれたFLASHを開発し、Flex SDKのみが必要です.SDKにはコンパイラ関連のツールがいくつか用意されています.IDEを使うつもりはありません.IDEがもっと複雑に見えるからです.簡単なgoogleの後、基本的にFlashファイルを構築することができます.
  • 基本的なプログラムを構築するにはmxmlファイルが必要で、このファイルでは主にFlashがページ上で初期化を完了したイベントをキャプチャし、内部ロジックを初期化するために使用される
  • ActionScriptのソースコードを作成し、Javaに似たファイル・クラスの編成をしているように見える
  • Flex SDKのmxmlcプログラムを使用してコンパイルし、swfファイルを生成する.例えば、mxmlc myflexapp.mxml-library-path+=xxx.swc
  • Webページに埋め込み、簡単な方法でswfobject.jsというライブラリを借りて埋め込む方法:
  •      <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            var params = {};
          params.play = "true";
            params.quality = "high";
            params.bgcolor = "white";
            params.allowscriptaccess = "always";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "asclient";
            attributes.name = "asclient";
            attributes.align = "middle";
            swfobject.embedSWF("asclient.swf", "flashContent", "1", "1",
                "0", "", 
                flashvars, params, attributes);
            swfobject.createCSS("#flashContent", "display:none;");
        </script>
    

    もちろん、ページにはflashContentというdivを追加する必要があります.
         <div id="flashContent">
            <p>no flash</p>
        </div>
    

    私のmxmlファイルも簡単です.
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        applicationComplete="doApplicationComplete()" >
        <fx:Script>
        <![CDATA[
     import ASClient.Coordinator;
     import flash.external.ExternalInterface;
    
     private var _coordinator:Coordinator;
    
     public function doApplicationComplete():void
     {
     trace("doApplicationComplete");
     _coordinator = new Coordinator();
     _coordinator.reg_methods();
     ExternalInterface.call("as_ready"); 
     } 
     ]]>
        </fx:Script>
    </s:Application>
    

    ActionScriptログ
    ActionScriptコードをログでデバッグします.最も簡単な方法はtrace関数でログを出力することです.ログを正常に出力するには、次の手順に従います.
  • ブラウザにデバッグバージョンのFlash Playerをインストール
  • ログはユーザディレクトリの下に出力され、手動でログディレクトリを作成する必要がある(管理者がユーザ名に置き換える):
      C:\Users\Administrator\AppData\Roaming\Macromedia\Flash Player\Logs
    
  • ユーザーディレクトリ下新規プロファイルmm.cfg:
      AS3StaticProfile=0
      AS3Verbose=0
      TraceOutputFileEnable=1 
      TraceOutputBuffered=0
      ErrorReportingEnable=1  
      AS3Trace=0
    
  • DEBUGバージョンのFlashファイルをコンパイルし、flex sdkの下にあるflex-config.xmlファイルを修正し、debug=true構成を追加すればよい
  • 開発中にブラウザキャッシュの問題に注意する必要があります.新しいFlashファイルをコンパイルすると、ブラウザはページをリフレッシュしてもキャッシュ内のFlashを使用する可能性があります.もちろん、最も重要なのは、ブラウザを通じてFlashを含むこのページにアクセスし、Webサーバが勝手にすることです.
    Flash Policyファイル
    Flashのバージョンの後、Flashでsocket接続を外部に確立するには、まずターゲットホストから返されるpolicyファイルを取得します.つまり、接続を確立する前に、Flashの最下位レベルでは、アクセス権を記述するファイルをターゲットホストに問い合わせます.
    簡単に言えば、ターゲットホストは843ポートでTCPリスニングを確立する必要があり、ネットワーク接続があれば以下の内容を送信し、コンテンツ後に終了を示すために0 x 00を追加する必要がある.(もちろん、細かいことは多いので、自分でgoogle)
    <cross-domain-policy>
         <allow-access-from domain="*" to-ports="*" />
    </cross-domain-policy>
    

    最初は友人からの既製のPolicyサービスを利用していましたが、私が書いたFlashは私のIceサービスに接続することができますが、常に2秒以上待たなければなりません.Google Flash Policyに関するコンテンツでは、確かに遅延があることがわかりますが、それはターゲットホストが843ポートでサービスしていないためです.その後、私は自分でerlangでPolicyサービスを書いたが、遅延はなくなった.おそらく、彼のPolicyサービスが終了として0 x 00を追加しなかったためだと推測されています.
    ActionScriptとJavaScriptのインタラクション
    ActionScriptを使用してサーバとのインタラクションをパッケージする以上、JavaScriptは必ずActionScriptと通信する必要があります.この通信プロセスはJavaScriptでActionScriptの関数を呼び出すことであり,逆にも同様である.このプロセスは簡単です.
    JavaScriptでActionScript関数を呼び出します.
    まずActionScriptが呼び出す関数を登録する必要があります.
    ExternalInterface.addCallback("service_loadall", loadAll);
    
    ExternalInterface.addCallbackで登録した関数は、実はclosureなので、クラスに自分のメンバー関数を登録してもいいです(メンバー関数はthisを使用してclosureが形成されているため).
    次にJavaScriptで呼び出します.
        function asObject() {
            // asclient   Flash    name ( ?)id
            return window.document.asclient;
        }
        var as = asObject();
        as.service_loadall();
    

    ActionScriptでJavaScriptを呼び出すと簡単です.一言:
    ExternalInterface.call("service_load_done", args);
    

    両者の間の関数パラメータ伝達については、そのタイプを自動的にマッピングできます.しかし、私のアプリケーションではデータが複雑なので、JSON形式に変換し、JavaScriptでは操作が簡単です.
    ページ切り替え
    ここで必要なWebフロントエンドページは、管理システムのようなものなので、ページ切り替えが可能です.問題は、ページジャンプが発生するとFlashオブジェクトが再初期化され、新しいページでは前のページで確立したネットワーク接続(または可能?)が使用できないことです.この問題を解決するために、サーバはもちろん再ログインメカニズムを設計することができ、クライアントが特殊な方法でシステムに入り、正常なログインの一環を迂回することができる.しかし、Glacier 2というゲートウェイを使用し、このゲートウェイには接続に対するタイムアウト管理があり、このように新しい接続を繰り返し確立することはリソースに浪費されています.
    以上、先端でこの問題を回避するしかないと思います.たとえば、フロントエンド開発者は依然として多くのページを別々に設計することができ、ページには通常のリンクも使用できます.JavaScriptコードを作成し、ページ内のリンクを対応するJavaScriptコードに置き換え、新しいページコンテンツを動的にロードし、ページ内の一部のコンテンツを置き換え、できるだけページ設計者に正常なページを作成させ、ページ切り替えの問題を解決します.
    これは下手な方法だが、私の限られた先端知識体系の下では、そうするしかないようだ.
    原文住所:http://codemacro.com/2013/06/09/ice-web-client/written by Kevin Lynx  posted at http://codemacro.com