Red5でHello World(3) - クライアント編 その２

※他のRed5関連のエントリはこちら

※本稿は随時加筆修正していく可能性があります。
まずはこちらから。

FlashdevelopでのFlexアプリのコンパイルと実行のやり方
コンパイルはメニューから、「プロジェクト」→「プロジェクトのビルド」
実行は同じく「プロジェクト」→「プロジェクトをテスト」

せっかくなので、前回のMain.mxmlに画面部品をテキトーに追加して実行してみる。
Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Label id="myLabel" x="0" y="0" width="100" height="25" fontSize="20" text="ラベル"/>
   <mx:Button id="myBtn" label="ボタン" />
   <mx:TextInput id="myTextInput" text="テキストインプット" />
   <mx:TextArea id="myTextArea" text="テキストエリア" width="200"/>

</mx:Application>

コンパイルすると出力ペインに下記のようなログが出力されます。

プロセスを実行中・・・
・・・Build succeeded
Done(0)

Build succeededが表示されていればたぶん大丈夫。
続いて実行するとFlash Player画面が開き、ボタンなどが表示されていると思います。

それではついにRed5と接続！

HelloTest.asに記載する処理
HelloTest.asに必要となるコードをわかりやすい（かどうかわからん）ブロックごとに分けて記載していきます。

必要になるするパッケージを定義

import flash.net.NetConnection;
import flash.events.NetStatusEvent;

HelloTestクラス内にメンバ変数を定義。
Red5の自作アプリのURIを表す文字列と、Red5との接続を制御するオブジェクト用。

private var _uri:String;
private var _nc:NetConnection;

Red5自作アプリのURIに接続する基本の流れ
コードA

_uri = new String("rtmp://(Red5のIPアドレス)/(自作アプリの名前)");

_nc = new NetConnection();
_nc.connect(_uri);
_nc.addEventListener(NetStatusEvent.NET_STATUS, _onNetStatus);

URIはポート番号5080は不要。入れるとうまく動かない。
3行目でNetConnectionオブジェクトを生成、4行目でRed5サーバへ接続。
この後、5行目でイベントリスナを登録している。
イベント発生時に呼ばれるメソッド"_onNetStatus"をコーディングする必要あり。
このメソッドはRed5との接続時、および切断時に呼ばれる。
引数のイベントオブジェクト内の情報から接続成功、切断、失敗、拒否が判別でき、状況に応じた処理を書くことができる。

//Red5接続、切断時に実行される
private function _onNetStatus(evt:NetStatusEvent):void
{
   switch (evt.info.code)
   {
      case "NetConnection.Connect.Success": 
         trace("connect success");
         break;
      case "NetConnection.Connect.Closed": 
         trace("connect Closed");
         break;
      case "NetConnection.Connect.Failed": 
         trace("connect Failed");
         break;
      case "NetConnection.Connect.Rejected": 
         trace("connect Rejected");
         break;
      default: 
         trace("何か起こった？");
   }
}

ここまでがRed5接続の基本的な流れ。
これに、サーバ編で作成したRed5サーバ側メソッドを呼び出すコードを追記していく。

必要になるパッケージを定義

import flash.net.Responder;

サーバ側メソッドを呼び出した結果を格納するメンバ変数をHelloTestクラス内に追加

private var _respose:Responder;

以下、サーバ側メソッド呼び出しの基本的な流れ。例えば、サーバ接続処理後に記載、または実行されるようにする。
コードB

_respose = new Responder(_success, _stat);
_nc.call("hello", _respose, txt);

1行目はResponderオブジェクトの生成、2行目でRed5サーバ側の"hello"という名前のメソッドを呼び出している。callメソッドの第3引数はサーバ側へ渡す情報。今回はString。
Responderのコンストラクタで引数としているイベントメソッド"_success"、および"_stat"をコーディングする必要あり。

//サーバ側メソッド呼び出し成功時に実行される
private function _success(result:Object):void
{
   trace("メソッド呼び出し成功");
   trace(result);
}

//サーバ側メソッド呼び出し失敗時に実行される
private function _stat(status:Object):void
{
   trace("ステータス");
   for (var key:String in status)
   {
      trace("key = " + key + " / value = " + status[key]);
   }
}

ついでにコネクション切断の流れ
コードC

_nc.close();
_nc = null;

以上、Red5との接続、メソッド呼び出し、切断の本筋は数行で書けます。
どちらかというと、イベントハンドラ諸々を書くのがめんどうです。

お手軽にメソッド呼び出しを試したい場合は、コードA、コードBをHelloTextクラスのinitializeメソッドに書き、必要なパッケージ、メンバ変数、イベント発生時のメソッドもつければ完成。
Flexアプリ起動時に1回だけサーバ側メソッドが呼ばれます。ちなみに、コードA、Bコードの後にCを書くとうまく動きません。（挙動は要調査）

画面上のボタンなどから接続やメソッド呼び出しを個別に実行したい場合は、コードA、B、Cを独立したメソッドとして実装し、ボタン押下時に呼び出すようにするとよいかと思います。
また、Null対策などを施して堅牢にする営みを忘れずに。

次回は動画の再生を予定。

参考：最も安易なHelloTest.as

package
{
    import mx.core.IMXMLObject;
    import flash.net.NetConnection;
    import flash.events.NetStatusEvent;
    import flash.net.Responder;
    
    public class HelloTest implements IMXMLObject
    {
        private var _uri:String;
        private var _nc:NetConnection;
        private var _respose:Responder;
        
        private var txt:String;
        
        public function HelloTest()
        {
        
        }
        
        /* INTERFACE mx.core.IMXMLObject */
        
        public function initialized(document:Object, id:String):void
        {
            _nc = new NetConnection();
            _nc.connect(_uri);
            _nc.addEventListener(NetStatusEvent.NET_STATUS, _onNetStatus);
            
            _respose = new Responder(_success, _stat);
            txt = new String("hogehoge");
            _nc.call("hello", _respose, txt);
        
        }
        
        //Red5接続、切断時に実行される
        private function _onNetStatus(evt:NetStatusEvent):void
        {
            switch (evt.info.code)
            {
                case "NetConnection.Connect.Success": 
                    trace("connect success");
                    break;
                case "NetConnection.Connect.Closed": 
                    trace("connect Closed");
                    break;
                case "NetConnection.Connect.Failed": 
                    trace("connect Failed");
                    break;
                case "NetConnection.Connect.Rejected": 
                    trace("connect Rejected");
                    break;
                default: 
                    trace("何か起こった？");
            }
        }
        
        //サーバ側メソッド呼び出し成功時に実行される
        private function _success(result:Object):void
        {
            trace("メソッド呼び出し成功");
            trace(result);
        }
        
        //サーバ側メソッド呼び出し失敗時に実行される
        private function _stat(status:Object):void
        {
            trace("ステータス");
            for (var key:String in status)
            {
                trace("key = " + key + " / value = " + status[key]);
            }
        }
    }

}

[参考サイト]
そにらぼ » Blog Archive » [Red5入門コース第3回]サンプルアプリケーションの作成
※他にも参考にしたサイトがありますが、失念しています。判明次第追記します。