Railsで使えるGem

ActionCableのサンプルをみてみた

投稿日:2015年12月20日 更新日:

ActionCableとは

ActionCableは、railsでWebSocketを利用したリアルタイム通信を可能にするgem.
rails5から、railsの本体に取り込まれる.
github.com/rails/actioncable

詳しい情報は、
github.com/rails/actioncable/tree/archive

公式サンプルは、ここ
github.com/rails/actioncable-examples

公式サンプルの動画解説は、ここ
gorails.com/episodes/rails-5-actioncable-websockets

今回は、この記事のチャットアプリを試してみた.
Getting started with Rails 5’s ActionCable and websockets

rails4での利用

Gemfileに追加する.
サーバーはpumaを使うので、これも追加しておく.
今回は、ruby 2.2.1 rails 4.2.5の環境で実行した.

redisサーバーの準備

macの場合、brewでインストールしておく.

redisの仮起動は次の通り.

cableサーバーの準備

ApplicationCable::ConnectionとApplicationCable::Channel

まず、2つのクラスを作る必要がある.
app/channels/application_cable/以下にファイルを2つ作る.

ApplicationCable::Connection では、入ってくる接続を許可したりする.

ApplicationCable::Channel では、Channel間で共通のロジックを書いたりする.

config/redis/cable.yml

redisサーバーのpubsubを使っているらしいのでredisの設定ファイルも作る.
:が前後にあるので注意.

cable/config.ru

cableサーバーは別プロセスで動くので、それ用のrackファイルを作成する.

bin/cable

サーバー起動用のスクリプトファイルを作っておく.

次の通り実行権限を与えておく.

cableサーバーの起動

これで、 bin/cable でcableサーバーが起動する.

チャットアプリの内容

cable部分以外のRailsのプログラムの流れ

1 root ‘sessions#new’ → views/sessions/new.html.erb

config/routes.rbでルートアドレスにアクセスすると、まず、views/sessions/new.html.erbに飛ぶ
views/sessions/new.html.erbではusernameをPOSTするフォームがある.

2 POST ‘sessions#create’

usernameをPOSTすると、sessions_controllerでcookie.signed[:username]に保存.
その後、messages_pathにリダイレクト.

3 views/messages/index.html.erb

views/messages/index.html.erbには、フォームからremoteで[:message][:body]を/messagesにPOSTできる.
また、div id=”messages” があってmessages一覧を表示する場所が用意されている.

Channelクラスの作成

クライアントがChannelクラスを購読(subscribe)すると、subscribedメソッドが呼ばれる.

stream_fromメソッドは、名付けられたbroadcastingからstreamを開始する.
www.rubydoc.info/github/rails/actioncable/ActionCable%2FChannel%2FStreams%3Astream_from
上で定義したApplicationCable::Channelを継承して使う.

‘messages’ streamにbroadcastする

*今回はデータベースに保存しないので単純にcontrollerからbroadcastしてるけど、DHHのサンプルでは、Modelで保存後にJobを呼び出してBroadcastしている.

クライアントサイドでcableサーバーに接続

cableをrequireして、JaveScript(CoffeeScript)でサーバに接続する.

また、application.jsで、 require_tree .の前に、 channelsライブラリをrequireしておく.

クライアントサイドでChannelを購読する.

クライアントがWebSocketから何かを受け取ると、App.messages.received関数が呼び出される.

できた

こんな感じでブラウザを2つ並べると、リアルタイムで更新されることがわかる.
screenshot

Rails5では、アクションの外でrender viewsができるようになるらしい.
これを使えば、Javascriptの代わりにhtmlをそのまま発行できる.

情報

ActionCableコードリーディングその1
ActionCableコードリーディングその2

-Railsで使えるGem
-,

執筆者:

関連記事

Mac OSXにHyper EstraierのRuby Bindingをインストールする

By: Kanko* – CC BY 2.0 目次1 環境2 Hyper Estraierのインストール3 ソースのダウンロード4 パッチを適用する5 rvmのためにconfigureファ …

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …