Action Cableは、 WebSocketとRailsのその他の部分をシームレスに統合するためのものです。Action Cable の概要
Action Cableの使い方の説明では基本的に何かしらのERBなどのHTMLテンプレートを使用しているので今回はHTMLでも使えるようにする方法をメモっておきます。
これを一度覚ればブログだろうがWebサービスだろうが何にでも使えると思います。
たぶん。
このブログでもこの技術で簡易チャットを実装してます。
準備
すでにAction Cableのアプリを作成していること。
作成方法はググれば出て来ます。
それとAction Cableはアプリで実行していること。
別Action Cableサーバーを使用している場合はわかりません。。
手順
- action_cable.jsを公開する!
- Action Cableを実行するサイトを許可する!
- JavaScript側での設定をする!
大まかにこんな感じ。
1. action_cable.jsを公開する!
これがないと始まらない。
以下コマンドでaction_cable.jsを探しましょう。
1 |
sudo find / -name action_cable.js |
検索できたらpublicディレクトリにjavascriptsとか適当な名前をつけたディレクトリを作成しその中にコピーしましょう!
それとApp変数で使用できるようにjavascriptsディレクトリにcable.jsと名前をつけて以下の内容を書いておきます。
1 |
(function(){this.App||(this.App={}),App.cable=ActionCable.createConsumer()}).call(this); |
この段階ではhtml上でaction_cable.jsを読み込んでも使用できません。
2. Action Cableを実行するサイトを許可する!
config/application.rbに以下を追加します。
1 2 3 4 |
config.action_dispatch.default_headers = { 'Access-Control-Allow-Credentials' => 'true', 'Access-Control-Allow-Origin' => 'http://himakan.net', } |
Access-Control-Allow-Originに許可したいサイトを設定します。
config/environments/production.rbに以下を追加します。
1 |
config.action_cable.allowed_request_origins = [ 'http://himakan.net' ] |
ここにも許可したいサイトを設定します。
この状態になるともうJavaScript側からいじれるようになります。
3. JavaScript側での設定をする!
設定すると言っても少しだけです。
JavaScriptでは以下の設定をします。
1 |
App.cable.subscriptions.consumer.url = 'ws://<アプリのURL>/cable'; |
これが設定し終わればもうApp.cable.subscriptions.createを実行し購読する手順ができるようになります。
あとはAction CableのJavaScriptの書き方で書いていけばOKですね。
あとがき
因みにiOSなどでAction Cable使いたいなぁとか思ったらAction Cable用のSwiftライブラリとか使わないと実装が面倒です。
参考
Action Cable の概要
ActionCable + Reactでチャットをつくってテストをして、と一通りやってみたのでメモった。
Rails4アプリに対してクロスドメインでAjaxでCookieを送信したい場合
スポンサードリンク