[Ruby on Rails]Action CableをHTML5で使用する方法

Action Cableは、 WebSocketとRailsのその他の部分をシームレスに統合するためのものです。Action Cable の概要

Action Cableの使い方の説明では基本的に何かしらのERBなどのHTMLテンプレートを使用しているので今回はHTMLでも使えるようにする方法をメモっておきます。

これを一度覚ればブログだろうがWebサービスだろうが何にでも使えると思います。
たぶん。
このブログでもこの技術で簡易チャットを実装してます。

準備

すでにAction Cableのアプリを作成していること。
作成方法はググれば出て来ます。
それとAction Cableはアプリで実行していること。
別Action Cableサーバーを使用している場合はわかりません。。

手順

  1. action_cable.jsを公開する!
  2. Action Cableを実行するサイトを許可する!
  3. JavaScript側での設定をする!
    大まかにこんな感じ。

1. action_cable.jsを公開する!

これがないと始まらない。
以下コマンドでaction_cable.jsを探しましょう。

検索できたらpublicディレクトリにjavascriptsとか適当な名前をつけたディレクトリを作成しその中にコピーしましょう!

それとApp変数で使用できるようにjavascriptsディレクトリにcable.jsと名前をつけて以下の内容を書いておきます。

この段階ではhtml上でaction_cable.jsを読み込んでも使用できません。

2. Action Cableを実行するサイトを許可する!

config/application.rbに以下を追加します。

Access-Control-Allow-Originに許可したいサイトを設定します。

config/environments/production.rbに以下を追加します。

ここにも許可したいサイトを設定します。

この状態になるともうJavaScript側からいじれるようになります。

3. JavaScript側での設定をする!

設定すると言っても少しだけです。
JavaScriptでは以下の設定をします。

これが設定し終わればもうApp.cable.subscriptions.createを実行し購読する手順ができるようになります。
あとはAction CableのJavaScriptの書き方で書いていけばOKですね。

あとがき

因みにiOSなどでAction Cable使いたいなぁとか思ったらAction Cable用のSwiftライブラリとか使わないと実装が面倒です。

参考

Action Cable の概要
ActionCable + Reactでチャットをつくってテストをして、と一通りやってみたのでメモった。
Rails4アプリに対してクロスドメインでAjaxでCookieを送信したい場合

スポンサードリンク