Elixirだ第6回

第6回 - Phoenixだ -
GMO Pepabo, Inc.
Joe Honzawa
2015/6/25 Elixir勉強会
Elixirだ

前回やったこと
> Mix
> ドキュメンテーション
> タスクを作ろう
> Dialyzerで型チェック

今回の内容
> Phoenixをちょっと飛ばす
> インストールとプロジェクト作成
> ファイルを眺める
> PhoenixのWebSocket
> 実装
v0.13.1 使います

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

> Elixirで1番イケてるWAF
> Railsに強く影響されてる
> もちろんMVC
> Plugベース
> WebSocket標準装備
作者のChris McCord

Plug
> コネクションの抽象化
> Rubyで言うところのRack
> Plug.Conn構造体
RailsでRackを触る頻度よりも、
PhoenixでPlugを触る頻度のほうが高い

まずは公式
www.phoenixframework.org
TOP > GUIDES > Installation

インストール
$ 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済

priv
priv
!"" repo
$ #"" migrations
#"" static
!"" css
!"" images
!"" js
#"" robots.txt
web/staticから
生成されるので
.gitignore済

フロント周り
!"" brunch-config.js
!"" node_modules
#"" package.json
デフォルトでbrunchが使われる

ソ
ケ
ッ
ト
チ
ャ
ン
ネ
ル
チ
ャ
ン
ネ
ル
チ
ャ
ン
ネ
ル
サーバ
ざっくり
クライアント(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末尾に”!!!!”を追加

サーバ
ざっくり(再)
handle_out/3handle_in/3
chan.pushで送信 chan.onで受信
broadcast/3 push/3

今回やったこと
> Phoenixをちょっと飛ばした
> インストールとプロジェクト作成
> ファイルを眺める
> PhoenixにおけるWebSocket
> 流れを追った

Elixirだ 第6回

More Related Content