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

執筆者:

関連記事

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

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

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

no image

Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard

環境 ruby 1.9.3 & rails 3.2.8 参考 cucumber + spork + guard + factory_girl あってもよいが[crayon-5ce14b2047 …

no image

TwitterBootstrapRailsでエラーが出る件

    undefined method `less’・・・的なエラーが出た. とりあえず下のgemを足したら動いた.そのうち修正されるとおもう. [crayon-5c …