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
-,

執筆者:

関連記事

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

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …

no image

CarrierWaveのファイルをpublic以外に移す

  参照 How To: Secure Upload 現状でCarrierWaveのファイルがpublicという公開フォルダに置かれるのが気になったので調べてみた 違ってるかもしれないので自 …

no image

RubyからHyper Estraierを使う1~search_do

環境:Ruby 1.9.3 & Rails 3.2.7 参考リンク github.com/grosser/search_do Getting started with acts_as_sear …

RailsでECサイト構築~spree

  *インストール方法を書き換えました.前の方法だとアドミンユーザーが登録されませんでした. 今回はインストール+日本語化だけ 目次1 インストール2 日本語化 インストール gem [cr …

Refinery CMS3.0にBootstrap3.1を適用する

目次1 Gemfile2 Sprocketを設定3 application.htmlをoverrideする4 Grid Layout5 Navbar6 Panel7 Well8 できた Gemfile …