Elixir勉強用の題材としてブログを作りはじめた。blog.bokuweb.meブログの更新やコメントにも使用できるので、次はchannelを使用して簡単なチャットを作ってみる。Channelとは簡単にwebsocket通信ができる機能で、Node.jsにおけるSocket.io的なものと理解している。blog.bokuweb.meプロジェクト名はphoenix_channel_sandboxとする。phoenix_channel_sandboxまた今回、package.jsonのdependenciesを削除する際以下の2つは削除しない。},Channelへのjoinまでを実装バックエンドlib/phoenix_channel_sandbox/endpoint.exにsocket用のエンドポイントが用意されている。接続されることになる。UserSocketはweb/channels以下に雛形が生成されており、以下の行のコメントアウトを解除する。PhoenixChannelSandbox.RoomChannelメッセージはPhoenix.Socket.Messageの形式でやりとりされる。上記の"rooms:*"はtopic名で、topic名はtopic:subtopic、またはtopicの形式で指定される。*はワイルドカードなのでトピックroomsに来たすべてのサブトピックをRoomChannelモジュールに送ることになる。v1.1.4メッセージの受け先となるモジュールroom_channelをweb/channelsに作成する。socket}を返すことで、承認されchannelに参加できる。今回はtopic名rooms、subtopic名joinにアクセス接続が合った場合無条件に参加を承認している。バックエンドはこれでOKで、JS側を実装する。socket余談だけど、サンプルのJSには;がついていない。;付けない一派なんだろうか。http://localhost:4000/問題なければ下記のようにjoin成功のメッセージが出力されているはず。Reactを使った簡易チャットの実装バックエンドroom_channel.exに以下の関数を追加する。endhandle_in/3は受信メッセージをハンドルする関数で、今回はnew:messageというイベントを受け取った場合、メッセージ内容をブロードキャスト配信している。https://hexdocs.pm/phoenix/Phoenix.Channel.html#c:handle_in/3次にReactでマウントできるようweb/template/layout/app.tml.eexを掃除しておく。react-dom送受信が行えるよう、socket.jsを変更しておく。}}app.jsではフォームの描画とメッセージ受信時の更新、ボタン押下時のメッセージ送信を行う。今回はnew:replyというイベントをListenして、コールバックでメッセージ内容をstateに詰めてる。document.querySelector('#root'));ひとまずこれで最低限のチャットは可能となる。先日公開した、はてブviewer『Pasta』のElectron版を公開...2015-07-036月に見つけたWEBサービス等作ってみた記事まとめ6月に見つけたものをまとめました。【サービス】個人Web製作者...2015-04-013月に見つけたWEBサービス等作ってみた記事まとめ作ってみた系の記事3月分をまとめました。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。