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