Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Similar to Elixirだ 第6回
More from Joe_noh
More from Joe_noh (20)
Recently uploaded
Recently uploaded (12)
Elixirだ 第6回
- 1. 第6回 - Phoenixだ - GMO Pepabo, Inc. Joe Honzawa 2015/6/25 Elixir勉強会 Elixirだ
- 2. 前回やったこと > Mix > ドキュメンテーション > タスクを作ろう > Dialyzerで型チェック
- 3. 今回の内容 > Phoenixをちょっと飛ばす > インストールとプロジェクト作成 > ファイルを眺める > PhoenixのWebSocket > 実装 v0.13.1 使います
- 5. Phoenix
- 6. > Elixirで1番イケてるWAF > Railsに強く影響されてる > もちろんMVC > Plugベース > WebSocket標準装備 作者のChris McCord
- 7. Plug > コネクションの抽象化 > Rubyで言うところのRack > Plug.Conn構造体 RailsでRackを触る頻度よりも、 PhoenixでPlugを触る頻度のほうが高い
- 8. インストール
- 9. まずは公式 www.phoenixframework.org TOP > GUIDES > Installation
- 10. インストール $ mix archive.install https://…/phoenix_new-0.X.Y.ez
- 11. archive.install > $HOME/.mix/archivesに入る > どこでもタスクが使えるようになる > どこでもphoenix.newし放題
- 12. New!! $ mix phoenix.new my_app $ cd ./my_app $ mix phoenix.server
- 13. ファイルを眺める
- 14. いっぱーい !"" README.md !"" brunch-config.js !"" config !"" deps !"" lib !"" mix.exs !"" mix.lock !"" node_modules !"" package.json !"" priv !"" test #"" web rails new したときの気分だぜ
- 15. 大事なディレクトリ web !"" channels ← for WebSocket !"" controllers !"" models !"" router.ex !"" static ← sassやjs(ES6 OK) !"" templates ← .html.eex files !"" views ← templatesをレンダ #"" web.ex ← みんなこれをuseする
- 16. 設定 config !"" config.exs !"" dev.exs !"" prod.exs !"" prod.secret.exs #"" test.exs 共通設定と各環境設定 .gitignore済
- 17. priv priv !"" repo $ #"" migrations #"" static !"" css !"" images !"" js #"" robots.txt web/staticから 生成されるので .gitignore済
- 18. フロント周り !"" brunch-config.js !"" node_modules #"" package.json デフォルトでbrunchが使われる
- 22. 実装
- 24. ※1 今回はecto無し $ mix phoenix.new shout --no-ecto > Ecto > DBラッパー > 言語組み込みのクエリ言語 > デフォルトは要PostgreSQL
- 25. ※2 テスト > 一応書いてありますが > 参考程度に > 「へー」って感じで
- 26. 入力フォームを設置 > RootRouteのTemplateを編集 > web > templates > page > index.html.eex
- 27. WebSocket接続確立 > サーバ側 > channel “topic:*”, … > ワイルドカード > join/3 > OKなら{:ok, socket}を返す > ダメなら{:error, msg}
- 28. WebSocket接続確立 > クライアント側 > socket = new Socket(“/ws”) > socket.connect() > WebSocketに接続 > chan = socket.chan(…) > chan.join > チャンネルに接続
- 30. クライアントの発言を… > クライアント側 > chan.push(id, msg) > C→Sへメッセージを送る
- 31. クライアントの発言を… > サーバ側 > handle_in/3 > C→Sのメッセージを処理 > {:reply, rep, socket} > {:noreply, socket} > {:stop, why, socket} > {:stop, why, rep, socket}
- 32. クライアントの発言を… > サーバ側 > broadcast!/3 > 接続済みの全クライアントに送信 > ここでのIDは ”bc:msg”
- 33. サーバからのbroadcastを… > クライアント側 > chan.on(“bc:msg”, callback) > “bc:msg”受信時に発火
- 34. handle_outで発言に… > handle_out/3 > 送信されるメッセージをイジれる > フィルタリングなど > ここでは”bc:msg”を処理 > body末尾に”!!!!”を追加
- 35. サーバ ざっくり(再) クライアント(JavaScript) handle_out/3handle_in/3 chan.pushで送信 chan.onで受信 broadcast/3 push/3
- 36. 今回やったこと > Phoenixをちょっと飛ばした > インストールとプロジェクト作成 > ファイルを眺める > PhoenixにおけるWebSocket > 流れを追った