5分でActionCableの実装する！
ActionCableを実装します。
機能に関する詳細はこちらです。
RoRでリアルタイム通信を実現することができます。
ACは、Rails5以降の機能ですので、5未満の方はアップデートをしてからこの記事を読み進めてくださいね。
Git
こちらは会員登録が必要になりますので無理なさらず。
私が個人で作ったアプリです。
コントローラーの作成
$ rails g controller chat show
モデルの作成
$ rails g model message body:text
チャット用チャンネルを作成
$ rails g channel chat speak
$ rails db:migrate
チャット用チャンネルを作成
$ rails g channel chat speak
これまで作成したものを確認しましょう。
$ rails server
/chat/showで画面が表示されます。
ソースコードの確認
ブラウザでページソースを表示してみましょう。<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Faction_cable.self-17ebe4af84895fa064a951f57476799066237d7bb5dc4dc351a8b01cca19cce9.js%3Fbody%3D1%22%20data-turbolinks-track%3D%22reload%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fcable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js%3Fbody%3D1%22%20data-turbolinks-track%3D%22reload%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fchannels%2Fchat.self-660d1dfffd7c22551eb29709ea5f789dbd62d8a2e602aa8e9126bd90ab1de200.js%3Fbody%3D1%22%20data-turbolinks-track%3D%22reload%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fchat.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js%3Fbody%3D1%22%20data-turbolinks-track%3D%22reload%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fapplication.self-b89234cf2659d7fedea75bca0b8d231ad7dfc2f3f57fcbaf5f44ed9dc384137b.js%3Fbody%3D1%22%20data-turbolinks-track%3D%22reload%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
ACが読み込まれていることがわかりますね。
接続エラーの解決
ここでデベロッパーコンソールを開くとエラーが出ていることがわかります。WebSocket connection to '~~/cable' failed: WebSocket is closed before the connection is established.
ソケットが閉じているので接続できません〜
という意味ですので、きちんと開いてあげましょう。
3つのポイントがあります。
①Pumaのインストール
ActionCableのようにリアルタイム通信を実現する為に特殊なソケットを利用する場合はWebサーバを対応しているPumaにする必要があります。
/Gemfile
gem 'puma' bundle
サーバを再起動してみてください。
するとログが以下のように変化します。
=> Booting Puma => Rails 5.0.0 application starting in development on http://0.0.0.0:8080 => Run `rails server -h` for more startup options Puma starting in single mode... * Version 3.8.2 (ruby 2.3.0-p0), codename: Sassy Salamander * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://0.0.0.0:8080 Use Ctrl-C to stop
① development.rbの編集
ActionCableにどのドメインを使用し、また動いていいよと命令を出してあげます。
以下を加えてください。
場所は問いません。
config/environments/development.rb
config.action_cable.allowed_request_origins = [ 'あなたのドメイン' ] ActionCable.server.config.disable_request_forgery_protection = true
ドメイン例（clou9を使用）
config.action_cable.allowed_request_origins = [ 'action-cable-sagae.c9users.io' ]
③ Redisを起動
Rails5にはredisサーバーが用意されてます。
このサーバーを動かすことでACを使うことができるようになります。
ターミナル
$ redis-server
それでは、コンソールをみてください。
どうでしょうか？
先ほどの接続エラーは出なくなると思います。
メッセージのブロードキャスト
クライアント側にメッセージを要求します。
ブラウザで入力した値を取得する処理になります。
app/assets/javascripts/channels/chat.coffee
App.room = App.cable.subscriptions.create "ChatChannel", connected: -> disconnected: -> received: (data) -> $('#messages').append data['message'] speak: (message) -> @perform 'speak', message: message
次に受け取ったデータをクライアントに返します。
入力された値をブラウザに表示します。
app/channels/chat_channel.rb
# chatチャンネル接続時にコールされる def subscribed stream_from "chat_channel" ActionCable.server.broadcast 'chat_channel', message: 'connected.' end # chatチャンネルのspeakメソッドは、受け取ったメッセージを全クライアントにブロードキャストする def speak(data) ActionCable.server.broadcast 'chat_channel', message: data['message'] end
これでデータの受け渡しができるようになりました。
ここで、一度サーバを再起動しましょう。
Pumaとredisどちらもです。
control+cで停止、起動は先ほどのコマンドを使ってください。
フォームの作成
以下のコードでユーザーの入力値を取得できます。app/views/chat/show.html.erb
<ul id="messages"> </ul> <form> <label>say something: <input type="text" data-behavior="chat_input"></label> </form>
app/assets/javascripts/channels/chat.coffee
↑先ほど書いたコードの下に書いてください。 $(document).on 'keypress', '[data-behavior~=chat_input]', (event) -> if event.keyCode is 13 # return = send App.room.speak event.target.value event.target.value = '' event.preventDefault()
入力値の表示
こちらは普通のJsの処理ですね。app/assets/javascripts/channels/chat.coffee
App.chat = App.cable.subscriptions.create "ChatChannel", received: (data) -> $('#messages').append ' <li>' + data['message'] + '</li>' ↓先ほど書いたコードの上に書いてください。
