都元ダイスケ IT-PRESS このページをアンテナに追加 RSSフィード

最近は会社ブログしか書いてません。

2007-03-07

[]Flexのsamplesにあるチャット(dashboard_chat)をいじってみた。

samplesを改変して、こんな感じでシンプルに。flex.war を雛形にして作ってみました。下記のコードでは、誰が発言しても、ユーザー名はtest-userになってしまいますが(汗)

まずは chat.mxml を新規作成。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    layout="absolute" width="900" height="150" pageTitle="FlexChat" creationComplete="initApp()">
    
    <mx:Producer id="producer" destination="dashboard_chat"/>
    <mx:Consumer id="consumer" destination="dashboard_chat" message="messageHandler(event)"/>
    
    <mx:VBox width="100%" height="100%">
        <mx:TextArea id="messageField" width="100%" height="100%" editable="false" wordWrap="false"/>
        <mx:HBox width="100%">
            <mx:TextInput id="inputField" width="100%" maxChars="256" enter="send()"/>
            <mx:Button label="Send" click="send()"/> 
        </mx:HBox>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
        import mx.messaging.messages.*;
        import mx.messaging.events.*;
        
        [Bindable]
        private var userId:String;
        
        private function initApp():void
        {
            consumer.subscribe();
            userId = "test-user";
        }

        public function send():void
        {
            var message:AsyncMessage = new AsyncMessage();
            message.body = {
                userId: userId,
                msg: inputField.text
            };
            producer.send(message);
            inputField.text="";
        }
        
        public function messageHandler(event:MessageEvent):void
        {
            var body:Object = event.message.body;
            if (messageField != null && body.userId != undefined)
            {
                var txt:String = body.userId + ": " + body.msg + "\n";
                messageField.text += txt;
                messageField.validateNow();
                messageField.verticalScrollPosition = messageField.maxVerticalScrollPosition;
            }
        }
        
        ]]>
    </mx:Script>
</mx:Application>

そして /WEB-INF/flex/messaging-config.xml に以下を追記。

    <destination id="dashboard_chat">
        <properties>
            <network>
                <session-timeout>0</session-timeout>
            </network>
            <server>
                <max-cache-size>1000</max-cache-size>
                <message-time-to-live>0</message-time-to-live>
                <durable>false</durable>
            </server>
        </properties>

        <channels>
            <channel ref="my-rtmp"/>
        </channels>
    </destination>

さらに /WEB-INF/flex/services-config.xml 内にある、my-rtmp の URL(services-config/channels/channel-definition(id=my-rtmp)/endpoint)のポート番号を2038から2037に変更しないと、うまく動きませんでした。なぜ? (雛形flex.warは2038で、samples.warは2037になっている。)

<endpoint uri="rtmp://{server.name}:2038" class="flex.messaging.endpoints.RTMPEndpoint"/>

<endpoint uri="rtmp://{server.name}:2037" class="flex.messaging.endpoints.RTMPEndpoint"/>

こんな感じで、なんとなくチャットっぽく動いた。

ところで、このチャットを改変して、以下のような事はできるんでしょうか?