読者です 読者をやめる 読者になる 読者になる

5分でActionCableの実装する!

f:id:sksksksksk:20170510221830j:plain
ActionCableを実装します。
機能に関する詳細はこちらです。

RoRでリアルタイム通信を実現することができます。
ACは、Rails5以降の機能ですので、5未満の方はアップデートをしてからこの記事を読み進めてくださいね。

デモ・Git

デモ

こちらは会員登録が必要になりますので無理なさらず。
私が個人で作ったアプリです。

Git Hub




#コントローラーの作成

$ 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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />

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>'
↓先ほど書いたコードの上に書いてください。



参考

http://mlearning.ga/?p=6



///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
「作ったアプリを発信しましょう!」
自分が作ったものを他者に発信しましょう。

Ruppishはあなたが作ったものを世に出すお手伝いをします。
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////