Elixir

Phoenix channelとReact.jsで簡易チャット

投稿日:

Phoenixでreact.jsをつかう

brunch.io

phoenixでは、Javascriptのビルドツールとして、brunch.ioがついている.

assets以下のjsやcssは、brunch.config.jsにしたがってビルドされる.

react.jsの追加の仕方は次のとおり.

で、brunch.config.jsを変更.

warningがいろいろでるけど、そのうちbabel7に移行すると思われ.

フォームとメッセージの表示部分をつくる

メッセージ投稿用のFormコンポーネントとメッセージ表示用のMessagesコンポーネントをつくる.

Formコンポーネントはこんなかんじで.
Formコンポーネントでstateとして値を保持する.
あとから、ボタンを押したらstateをpushするようにする.

onTextChangeメソッドはこんな感じ.

onButtonClickはとりあえず適当にログでも出しとく.

Messageコンポーネントのほうも適当にダミーを置いとく.

Phoenix channel

Channelでは情報のリアルタイムな双方向通信ができる.
次の翻訳は、ずいぶんバージョンが古いけど、おおむね構造は変わってない.

とりあえず大事なのは、ChannelsとMessages.
手順としては、サーバーサイドでは、
1. user_socket.exでトピックにjoinする.
2. 自作したsocket.exでイベントに対するコールバック(handle_in/3など)を書く.

クライアントサイドでは、
1. socket.jsでトピックにjoinする.
2. Javascriptのコードからイベントに対するコールバックとイベントpushを書く.

generate channel

user_channel.ex

もともとあるuser_channel.exは、ソケットハンドラといって、すべてのチャンネルを利用するためのデフォルトのchannelを割り当てるためのモジュール.
endpoint.exから読み込まれている.

ここで、とりあえず変更するのは、topicだけ.

message_channel.ex

message:lobbyのトピックでのイベントを設定する.
new_msgイベントが来たら、そのままbroadcastするだけ.

socket.js

もともとあるsocket.js
接続するtopicを上でmessage:lobbyにする.

Javascript コード

上のsocket.jsをインポートして、new_msgのイベントをlistenする.
React.jsではsetStateを呼べば、コンポーネントが再描画される.

そして、イベントをnew_messageのイベントをpushすれば上でlistenしたコールバックが呼ばれる.
さっきのonClickButtonでFormのstateをプッシュする.

Done

-Elixir
-, ,

執筆者:

関連記事

Ubuntu18.04でElixirとPhoenixのインストール

By: Kevin Dooley – CC BY 2.0 目次1 Elixir2 Phoenix Framework3 Erlang VMのインストール4 Elixirのインストール5 P …