Code of Resistance!!: Phoenix - Channels Guideの実行例を実施

2015年6月7日

概要
実行例を実施する
疑問点について

1.概要

1.1
記事を書いた理由。

ちょっと実行例を実施する時に戸惑ったのと、
v0.11.0のソースコードと少し異なる部分があったため。

ソースコードの記述例一式と実行について記事を書きます。

合っているとか妥当とかは置いておくとして。
実行できる！って言うことを優先しています。

1.2

あらかじめ、テスト用のプロジェクトは作成しておいて下さい。

以下、私の実行例
>cd 作業ディレクトリ

>mix phoenix.new phoenix_channels
>y(npm?の使用を聞かれるからyes)
>cd phoenix_channels
>mix phoenix.server
ブラウザからlocalhost:4000にアクセス。

アプリケーション名： phoenix_channels
設定は全てデフォルト

2.実行例を実施する

2.1
ソースコード例の一式～
以下の通り作成した。

/web/router.ex

/web/channels/room_channel.ex

/web/static/js/app.js

/web/templates/page/index.html.eex

/web/templates/layout/application.html.eex

2.2
いつも通りの実行を行う。
>mix phoenix.server

以下のアドレスへアクセスする。
アドレス： http://localhost:4000

ブラウザのタブをもう一つ追加して同じアドレスへアクセスする。

index.html.eexで記述したインプットフォームへ適当に文字を入力し"Enter"を押す。
どちらのタブにも入力内容が表示されれば、動作確認は問題ない。
参考までに画像を貼っておく・・・参考になるかな～・・・

ブラウザタブ1

ブラウザタブ2

Tips
Javascriptのコンソールログを確認すれば、
"Welcome to Phoenix Chat!"と出力されている。

3.疑問点について

3.1
疑問1

"http://localhost:4000"にアクセスしているのに、
チャネルの"/ws"のパスも動いてるは何故？

また、"http://localhost:4000/hello"と言った時の動作は？
これは検証すればいいが一応・・・

追記(2015/06/07-15:54)
解答
application.html.eexには以下の記述があり、app.jsを実行している。

ソースコード抜粋
----
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
----

app.jsには、以下の記述があり実行されている。

ソースコード抜粋
----
let socket = new Socket("/ws")
socket.connect()
let chan = socket.chan("rooms:lobby", {})
----

つまりべた書きで実行してたわけか・・・そりゃ動きますわ・・・

3.2
疑問2

RoomChannelで"rooms:lobby"とそれ以外の処理を行うjoinコールバック関数を定義している。
"http://localhost:4000"にアクセスした時、
"rooms:lobby"を指定していないのに動作しているのは何故？

デフォルトの設定がなされている？
あるならそれはどうやって設定？ないし処理している？

追記(2015/06/07-15:55)
解答
疑問1での解答より、べた書きで実行しているため。
app.jsに書いてある。

3.3
疑問3

例えば、チャネルのルーティングを二つ作成したとする。
"/ws1"、"/ws2"と言ったパスで。

今回の実行では、
"http://localhost:4000"にアクセスした時、
"/ws"のパスも動いているが、二つ定義している時は、どちらも動くのか？

追記(2015/06/07-15:56)
解答
疑問1での解答より、べた書きで実行しているため、
定義しても動作しないと見受けられる。

っといった疑問点がありますね。
私が調査できてないだけ、読み取れていないだけと言うこともありますが、
この辺りを把握しないと実際のアプリケーションには組み込めないです。

~~今後の調査で把握できれば、また別記事を上げますね。~~

追記(2015/06/07-15:58)
全て同じ解答に行き着くという・・・ソースを読めって話ですね～
ようは、HTTPの通信とWebSocketの関係が分かってなかったわけですね・・・この私が！！
WebSocketの説明について参考までに・・・
参考1： https://www.atled.jp/jireinavi/develop/websocket/
参考2： south37のブログ - WebSocketについて調べてみた。

以上！！

参考にさせて頂いたサイト様
Phoenix - Channels Guide
Phoenix Framework - Channel 日本語翻訳

管理人の独り言～
Channel Routesについて別記事を上げてますので、良かった一緒にどうぞ～
続！Phoenixのルーティング(Router)について分かったこと

これにて、Elixir(Phoenix)強化週間中の記事終わり～
今後もElixirはやっていきますが。
今回ので何とか基礎は習得できたかな？
それらを組み合わせて掲示板もどきの作成にでも入りますか～

記事を書いてから気付いた。
"Tying it all together"って書いてあんじゃん・・・おおうorz

自分用メモ・・・
httpの通信は、"http://・・・"
WebSocketの通信は、"ws://・・・"

http://とws://は両立して流せるけど、別の通信ってことか。

しかし、通信の流れを追ってみたが・・・
~~/wsは追えるが、rooms:lobbyが追えない・・・何でだろう？~~
httpとWebSokectの通信混じると、私の貧弱な頭では分からないいいいい・・・
参考： http://d.hatena.ne.jp/uuwan/20130121/p1

Code of Resistance!!

ページ

2015年6月7日

Phoenix - Channels Guideの実行例を実施

人気の投稿