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 使います

4. ゴールリアルタイム通信できるWebアプリを Phoenixでつくる

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が使われる

19. Phoenixの WebSocket

20. ソケットチャンネルチャンネルチャンネルサーバざっくりクライアント(JavaScript)

21. サーバざっくりクライアント(JavaScript) handle_out/3handle_in/3 chan.pushで送信 chan.onで受信 broadcast/3 push/3

22. 実装

23. 今日のレシピ https://github.com/Joe-noh/shout Pull Request #1 コミットを順に見ていきますコードとスライドをキョロキョロしてね

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 > チャンネルに接続

29. jQueryを読む > そのまんま > application.html.eexに書いとく

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 > 流れを追った

Elixirだ第6回

Joe_noh

Transcript

Elixirだ 第6回

Joe_noh

Transcript

Elixirだ第6回