rails chat! rails 勉強会 @ 関西 [email protected]. rails chat の歴史

40
Rails Chat! Rails 勉勉勉 @ 勉西 [email protected]

Upload: grace-fowler

Post on 21-Jan-2016

226 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Rails Chat!

Rails 勉強会 @ 関西[email protected]

Page 2: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Rails Chat の歴史

Page 3: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• 2006/7/17 Flash Socket plugin– From: のりおさん– [rails:1365] Flash Socket plugin で

リアルタイム Chat ?

Page 4: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• 2006/7/20 Juggernaut– by Alex くん– Flash Socket plugin から改名

Page 5: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• 2006/8/16 Tigerbaumkuchen– by arton さん– Juggernaut を改良

Page 6: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Juggernaut

Page 7: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• Flash Socket plugin 改めジャガーノート– by Alex くん 16 歳 ( 英国 )

– Flash XMLSocket を用いたリアルタイム通信

– Rails plugin として配布

Page 8: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Flash Player 7 必須!

Page 9: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Flash から JavaScript を呼ぶ方法

1. getURL(“javascript:…”)

残念 !  制限がある (IE)

2. fscommand

良い。ただし version 7 以降

Page 10: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Tigerbaumkuchen

Page 11: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• タイガーバームクーヘン– by arton さん

• ジャガーノートのあまり嬉しくない点を改良– ping/pong :自動切断対策– クライアント単位の送信用スレッド:安定性を向上– メッセージの追い抜きを防止

Page 12: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Rails Chat の開発

Page 13: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/7/20• Juggernaut リリース• subversion, trac• オフレコモード• 過去ログ

Page 14: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/7/22• 日付単位の過去ログ #18

Page 15: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/7/23• Juggernaut 0.2 #22 juggernaut-branch• auto_link2 #38, #48• Queue を使う , 送信は別スレッド #42

Page 16: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/7/24• オフレコブロック #54

Page 17: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/7/25• Linux Firefox1.5 Flash7 で不具合 #55

– \n のせいだった

Page 18: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/7/29• コード貼り付け(複数行) #60

Page 19: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/8/2• remove client if the socket was

reconnected #68

Page 20: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/8/6• ruby code mode #70

Page 21: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/8/9• socket_server.swf を mtasc で生成

– 全てをコマンドラインで用意できる

Page 22: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/8/10• push_server port:443

– ファイアウォールを越える

Page 23: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

2006/8/16• replace juggernaut to

tigerbaumkuchen #75

Page 24: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

またたく間に実用的なチャットシステムとなる!

Page 25: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Juggernaut の構成

Page 26: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• Rails plugin として配布– lib, helper– JavaScript– Flash– push_server– config

Page 27: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

# gem install json

$ ./script/plugin install \svn://rubyforge.org/var/svn/juggernaut/trunk/juggernaut

$ rake install_juggernautpublic/javascripts/juggernaut_javascript.jspublic/socket_server.swfscript/push_serverconfig/juggernaut_config.yml

Page 28: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Tigerbaumkuchen の構成

Page 29: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

• 現在は Juggernaut と同じ構成

• Macromedia(r) Flash(r) JavaScript Integration Kit を同梱

– JavaScript から Flash を呼び出す仕組み

Page 30: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

http://rc.trac.arton.no-ip.info/index.fcgi/wiki/HowToInstall

$ svn co http://svn.arton.no-ip.info/RailsChat/trunk

Page 31: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Rails Chat の動作原理

Page 32: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Flash

JavaScript

Rails

PushServer

New User

Rails Chat!

Page 33: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

Flash

JavaScript

PushServer

Rails

Rails Chat!

Flash

JavaScript

Flash

JavaScript

Flash

JavaScript

Flash

JavaScript

Page 34: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

ソースコードを読む

Page 35: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

(1)Flash (socket_server.as):function connect() socket = new XMLSocket(); socket.connect(host, port); socket.onXML = newXML; socket.onConnect = newConnection; socket.onClose = endConnection;

push_server (serve):   # 接続に成功したら   # socket.onConnect が呼び出される   @socket = @server.accept   add_client listen @socket.gets # 待機 (接続維持)

Page 36: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

(2)Flash (socket_server.as):function newConnection(success=true) getURL("javascript:flashConnected()");

(3)JavaScript (flash_socket_javascript.js):function flashConnected() new Ajax.Request('/chat/login', ...)

Page 37: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

(4)Rails (chat_controller.rb):def login FlashSocket.send(data="<li>New User</li>")

Rails (flash_socket.rb):def self.send(data) @socket = TCPSocket.new(self.host, self.port) @socket.puts data @socket.close

Page 38: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

(5)push_server (serve): @socket = @server.accept add_client listen @socket.gets # 全  Client ( Flash ) で # socket.onXML  が呼び出される broadcast remove_client

Page 39: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

(6)Flash (socket_server.as):function newXML(input) getURL("javascript:flashData('"+ input.toString()+"')");

(7)JavaScript (flash_socket_javascript.js):function flashData(data) add(utf8to16(decode64(data)));

function add(message) new Insertion.Top('chat_data', message); new Effect.Highlight($$("ul li").first());

Page 40: Rails Chat! Rails 勉強会 @ 関西 moriq@moriq.com. Rails Chat の歴史

end endend