Flex 勉強に共有ホワイトボードつくってみた - Producer と Consumer で

ついカッとなってチャットサンプルを丸コピしてつくってみた。

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

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical" 
    width="400" height="366"
    creationComplete="consumer.subscribe()">

    <mx:Script>
        <![CDATA[
            import mx.messaging.messages.IMessage;
            import mx.messaging.messages.AsyncMessage;
            import mx.messaging.events.MessageFaultEvent;
            import mx.messaging.events.MessageEvent;

            private function messageHandler(event:MessageEvent):void {
                trace("consumerMessageHandler");
                                
                var x:int = event.message.body.sharedWhiteBoardX as int;
                var y:int = event.message.body.sharedWhiteBoardY as int;
                
                var g:Graphics = whiteBoard.graphics;
                
                g.beginFill(0xFFFFFF);
                g.drawRect(x, y, 2, 2);
                g.endFill();
            }
            
            private function faultA(event:MessageFaultEvent):void {
                trace("faulatasdfasdf");
            }
            
            public function whiteBoardMouseDownHandler(event:MouseEvent):void {
                trace("mouseDown" + event.localX + ":" + event.localY);
                whiteBoardMouseMoveHandler(event);
            }
            
            public function whiteBoardMouseMoveHandler(event:MouseEvent):void {
                var g:Graphics = whiteBoard.graphics;
                
                if (event.buttonDown) {
                    trace("mouseMove" + event.localX + ":" + event.localY);
                    
                    g.beginFill(0xFFFFFF);           
                    g.drawRect(event.localX, event.localY, 2, 2);
                    g.endFill();
                    
                    var message:IMessage = new AsyncMessage();
                    message.body.sharedWhiteBoardX = event.localX;
                    message.body.sharedWhiteBoardY = event.localY;
                    producer.send(message);
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Producer id="producer" destination="sharedWhiteboard2"/>
    <mx:Consumer id="consumer" destination="sharedWhiteboard2" 
        message="messageHandler(event)"
        fault="faultA(event)"/>

    <mx:Canvas id="whiteBoard" x="10" y="10" width="380" height="280"
        borderStyle="solid"
        mouseDown="whiteBoardMouseDownHandler(event)"
        mouseMove="whiteBoardMouseMoveHandler(event)">
    </mx:Canvas>
    
    <mx:Label x="10" y="328" text="subscribed:" width="75"/>
    <mx:Text id="subscribedStatus" x="93" y="328" width="105" text="{consumer.subscribed}"/>

</mx:Application>

WEB-INF\flex\messaging-config.xml に↓一行を追加。

<destination id="sharedWhiteboard2"/>

予想通りこの程度だと Producer と Consumer のペア使うほうがスッキリつくれる。

で、これもやっぱり上手く同期されたりされなかったりする。ただ、挙動見てると consumer#subscribed が true 返るようになるまで 1 分近くかかったりすることがあるんだけど、当然、こうなってしまえば同期は上手くようになる。ううむ……なんだろうなぁ。