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でよくあるデータ構造を追加してくれる系のGemのメモ〜タグ付け、評価システム、バージョン、論理削除、木構造とか

By: Jeff Dlouhy – CC BY 2.0 よくある構造というかよくあるスキーマを追加してくれるModelに一言書いておくだけで便利なGemをメモ(未検証)   目次 …

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …

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

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

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

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

RailsでECサイト構築7 デプロイ~spree+apache2+passenger

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql Rails3.2+Apache2+Passenger環境でSSLを使ってみる &nbsp …