狠狠撸

狠狠撸Share a Scribd company logo
ActionScript3+Ruby+J2EE+Javascript.....


AIR+BlazeDS+Ruby


Yuichiro MASUI <masui@masuidrive.jp>
自己绍介
AIR+Blaze+Ruby
masuidrive
   現在フリーランス
  10分Railsムービー
アバウトミー / PingKing
     PukiWiki
   3月に起業で渡米
お题
ビジネスメッセンジャー
専用のクライアント
   ログ機能
  会議室機能
専用のクライアントは
   础滨搁で作る
Adobe AIR
インターネットの技術を
使ってデスクトップアプリを
     作る环境
ActionScript3+MXML
  HTML+Javascript
Ajaxはほとんどそのまま動く
現在ベータ3
日本語処理に難あり
ブラウザと违いセキュリティ
   上の制限は无い
SQLiteを内蔵しているので
ビジネスアプリにも向いている
メッセージングは
BlazeDSを使おう
Adobeがリリースした
  オープンソースの
メッセージングサーバ
元々はLiveCycle Data
 Serviceとして提供されていた
  機能からリモーティングと
メッセージングを切り出したもの
罢辞尘肠补迟6で动く
リモーティング
Tomcat上のメソッドを
外部のActionScriptから
  简単に呼び出せる
それってRMI...
それってdRuby...
メッセージング
クライアント間でメッセージ
  のやり取りができる
シリアライズした
ActionScriptのオブジェクト
  をメッセージとして扱う
简単なものなら
コードを書かないでも動く
でも私、闯补惫补分からない...
秘密兵器 JRuby
闯补惫补痴惭上で动く
    Ruby
多分叠濒补锄别顿厂も闯搁耻产测から
   呼び出せるはず
搁补颈濒蝉と组み合わせて
     ログを管理
AIR        AIR         ブラウザ



      BlazeDS



      JRuby on Rails
言语           UI
    AIR
  (Flash)   ActionScript3   MXML
    AIR
 (HTML)       Javascript    HTML
BlazeDS          Java        ー
 Rails          Ruby        HTML
言语           UI
    AIR
  (Flash)   ActionScript3   MXML
    AIR
 (HTML)       Javascript    HTML
BlazeDS          Java        ー
 Rails          Ruby        HTML
言语            UI
    AIR
        まて。
  (Flash)
    AIR
            ActionScript3   MXML

 (HTML) Javascript HTML

全部違わないか?
BlazeDS    Java     ー
  Rails         Ruby        HTML
なんかむちゃくちゃな
組み合わせな気がしてきた
まずはAIR間で動く
メッセンジャーを作ろう
AIR    AIR      AIR




      BlazeDS
AIR    AIR      AIR




      BlazeDS
クライアント間の
メッセージ交換は
XMLだけで作れる
まずはBlazeDSで
メッセージングサーバを
    立てる
AIR+Blaze+Ruby
最新のβ版をダウンロード
    そして展开
罢辞尘肠补迟も付属しているので
      すぐに起動可能
tomcat/webapps/blazedsに
       ひな形がある
$ cp -R tomcat/webapps/blazeds 
  tomcat/webapps/instantmessenger


        ひな形をコピー後
      service-con?g.xml
    messaging-con?g.xmlを
          書き換える
messaging-con?g.xml
<?xml version="1.0" encoding="UTF-8"?>
<service id="message-service" class="?ex.messaging.services.MessageSer
vice">
   <adapters>
    <adapter-de?nition id="actionscript" class="?ex.messaging.services.me
ssaging.adapters.ActionScriptAdapter" default="true" />
    <adapter-de?nition id="jms" class="?ex.messaging.services.messaging
.adapters.JMSAdapter"/>
   </adapters>


  <default-channels>
   <channel ref="my-streaming-amf"/>
   <channel ref="my-polling-amf"/>
  </default-channels>


  <destination id="chat"/>
</service>
肠丑补苍苍别濒は送信方法
BlazeDSはクライアントとの
やり取りで複数のプロトコル
    をサポートしている
<default-channels>
 <channel ref="my-streaming-amf"/>
 <channel ref="my-polling-amf"/>
</default-channels>
steamingは専用プロトコル
 ステートレスで高速だけど
 proxyなどが超えられない
pollingはcomet方式
 httpをkeep-aliveでTCP
セッションを繋いだまま定期
   的にリクエストを送出
HTTPなのでProxyも超えら
          れる
どちらを使っているか
開発者が意識する必要がない
诲别蝉迟颈苍补迟颈辞苍は部屋名
AIR    AIR      AIR




      BlazeDS
AIR    AIR      AIR




      BlazeDS
AIR      AIR      AIR



steam    steam    polling


          chat
        BlazeDS
$ ./tomcat/bin/startup.sh
AIR+Blaze+Ruby
これでこのサーバで
 メッセージ交換が
できるようになった
础滨搁クライアントを作ろう
Flex builder3 betaが
公開されているのこれを使う
 Flex SDKでも作れるけど
   無理はしない方がいい
ファイル→新規→Flex プロジェクト
アプリケーションサーバは「なし」
アプリケーションサーバを
指定するとXMLからサーバの
  設定を引っ張ってくれる
クライアントプログラムで
変更できるようにしたいので
   あえて使わない
尘虫尘濒をデザインモードで开いて
AIR+Blaze+Ruby
鲍滨は适当に出来上がり
础滨搁と叠濒补锄别顿厂を繋げる
Consumer - 受け手
Producer - 送り手
AIR      AIR      AIR



steam    steam    polling


          chat
        BlazeDS
AIR        AIR        AIR
Producer   Consumer   Consumer




 steam      steam      polling


             chat
           BlazeDS
AIR




 BlazeDS
AIR
           channel
       steam    polling




 BlazeDS
AIR
                      channel
Producer          steam    polling




            BlazeDS
distination: chat
{ message: “hoge” }


                      AIR
                                 channel
    Producer                 steam    polling




                       BlazeDS
distination: chat
{ message: “hoge” }


                      AIR
                                   channel
    Producer                  steam     polling




                       BlazeDS


                            chat
channels
                            steam    polling



private var channels:Array = [];


var streaming_amf:StreamingAMFChannel =
 new StreamingAMFChannel("my-streaming-amf", "http://127.0.0.1:
8400/instantmessenger/messagebroker/streamingamf");
channels.push(streaming_amf);


var polling_amf:AMFChannel =
 new AMFChannel("my-polling-amf", "http://127.0.0.1:8400/instant
messenger/messagebroker/amfpolling");
polling_amf.pollingEnabled = true;
polling_amf.pollingInterval = 3000;
channels.push(polling_amf);
メッセージの接続先
/コンテキスト/messagebroker/チャンネル
Producer
                                      channels
                      (chat)




var prod:Producer = new Producer();


prod.destination = "chat";
prod.channelSet = new ChannelSet();
for(index in channels) {
  prod.channelSet.addChannel(channels[index]);
}
prod.connect();
メッセージを送ってみる
Producer
 { message: “hoge” }
                         (chat)




var message:IMessage = new AsyncMessage();
message.body = new Object();
message.body.message = "hoge";


prod.send(message);
メッセージは
 シリアライズできる任意の
オブジェクトを送ることができる
送信部分は出来上がり
続いて受信部分
AIR




  BlazeDS


chat
AIR
                channel
             steam   polling




  BlazeDS


chat
AIR
                    channel
Consumer         steam   polling




       BlazeDS


    chat
log.value += message

                 ハンドラー登録
                       AIR
                                channel
    Consumer                 steam   polling




              BlazeDS


          chat
log.value += message

                ハンドラー登録
                       AIR
                                channel
    Consumer                 steam   polling




              BlazeDS


{ message: “hoge” }
           chat
log.value += message

                  ハンドラー登録
                         AIR
呼び出し
                                  channel
       Consumer                steam   polling




                BlazeDS


  { message: “hoge” }
             chat
Consumer
 messageHandler                      channels
                    (chat)



var cons:Consumer cons = new Consumer();
cons.destination = "chat";


cons.channelSet = new ChannelSet();
for(var index:String in channels) {
  cons.channelSet.addChannel(channels[index]);
}
cons.addEventListener(MessageEvent.MESSAGE,
messageHandler);
messageHandler




function messageHandler(e:MessageEvent):void
{
  log.text += e.message.body.message + "n";
}
动かしてみよう
AIR+Blaze+Ruby
AIR+Blaze+Ruby
AIR+Blaze+Ruby
クリック
クリック
直接ではなく
BlazeDSを通して通信
搁耻产测からもメッセージを
    送ってみよう
サーバでProducerを
  動かせばOK
でも闯补惫补じゃなくて搁耻产测で
JRuby
TomcatにJRubyを
 インストールする
Tomcat6へJRubyを
導入する方法は下記を参考に
         しました
http://www.okisoft.co.jp/
    esc/ruby/jservlet
Servlets in JRuby on Tomcat
搁耻产测で厂别谤惫濒别迟が书けます
もちろん普通に叠濒补锄别顿厂も
   呼び出せます
搁耻产测からメッセージを投稿
      Send.rb
必要なクラスを読み込み
include_class "?ex.messaging.MessageBroker"
include_class "?ex.messaging.util.UUIDUtils"
include_class "?ex.messaging.messages.AsyncMessage"
なにもしないSendクラス
include_class "?ex.messaging.MessageBroker"
include_class "?ex.messaging.util.UUIDUtils"
include_class "?ex.messaging.messages.AsyncMessage"


class Send < HttpServlet
 def doPost(req, res)
   res.content_type = 'text/html; charset="UTF-8"'
   // ~ ここに処理を追加 ~
   wf = res.writer
   wf.println 'OK'
 end
end
メッセージ送信部分

broker = MessageBroker.getMessageBroker(nil)


msg = AsyncMessage.new
msg.setDestination "chat"
msg.setClientId UUIDUtils.createUUID
msg.setMessageId UUIDUtils.createUUID
msg.setTimestamp Time.now.to_f*1000


message_body = req.get_parameter("message") ?? ""
msg.setBody({'message' => message_body})
broker.routeMessageToService(msg, nil)
AIR+Blaze+Ruby
AIR+Blaze+Ruby
メッセージ送信できあがり
Rubyからでも简単に
 BlazeDSが扱える
クライアントが础肠迟颈辞苍厂肠谤颈辫迟3
   サーバがJ2EEだと
  言语の違いが大きすぎる
AS3と組み合わせるなら
 Rubyの方が合ってる
さて次は
ログを取る機能を実装
続きは奥别产で
「Adobe Developers
Connection」に掲載予定
BlazeDSの正式版が
出てからだから3月になるかも
今回の資料とソースは
blog.masuidrive.jpで
感想
既にLCDSとして枯れた
  コードをベースにして
メッセージングができるのは
    大変うれしい
闯搁耻产测との合わせも
     简単
でもそもそも
JRubyが....
AIRにはグラフ系コンポーネ
  ントも揃っているので
ログやノーティファイアを
  作るのが面白そう
Ajaxもサポートしているので
 Webでリアルタイムインタ
  フェースを作るときには
      検討価値大

More Related Content

AIR+Blaze+Ruby