Rails 5の目玉機能「Action Cable」で双方向通信を実装（1）

サンプルコードで学ぶRuby on Rails 5実践入門 第7回

開発するチャットアプリ（3）

動作確認

　これで、まずは発言メッセージをデータベースに保存する処理以外の、基本的なWebSocket通信が実現できました。以下のコマンドでPumaサーバーを起動し、「http://localhost:3000/chat_messages/index」にアクセスして問題なく動作することを確認してみましょう。

$ bin/rails s -d

図2　http://localhost:3000/chat_messages/index

　次に、WebSocket通信の様子が分かるようにクライアント側のブラウザをもう1つ立ち上げておきましょう。

図3　ブラウザを2つ立ち上げておく

　ここからは、より詳細にAction Cableの動作が分かるように、Chromeブラウザ上のデベロッパーツールを用いてJavaScriptコードにブレークポイントを入れて処理を追っていきます。

　デベロッパーツールを開いて、Sourcesタブから［localhost:3000 > assets > channels］とたどり、「chat_message.self-ハッシュ.js」ファイルを開きます。CoffeeScriptからコンパイルされたJavaScriptのソースコードが表示されるので、17行目のApp.chat_message.speakを呼び出しているコードとその直後を、該当の行番号17、18をクリックしてブレークポイントを入れます。

図4　JavaScriptコードにブレークポイントを入れる

　ブレークポイントを入れたブラウザ上で、実際に発言メッセージを入力してみましょう。ここでは、「テスト」と入力してエンターキーを押下します。17行目でJavaScriptの実行が止まります。この時点でサーバー側のアプリケーションログを確認しても変化はありません。デバッガーの再生ボタンをクリックしてコードの実行を先に進めてみましょう。17行目のApp.chat_message.speakメソッドが実行され、18行目のevent.target.value = '';が実行される前でコードが止まります。この時点でサーバー側のアプリケーションログを確認すると、以下のログが出力されていることが分かります。

$ tail log/development.log

　↓

ChatMessageChannel#speak({"message"=>"テスト"})
[ActionCable] Broadcasting to chat_message_channel: {:message=>"テスト"}
ChatMessageChannel transmitting {"message"=>"テスト"} (via streamed from chat_message_channel)
ChatMessageChannel transmitting {"message"=>"テスト"} (via streamed from chat_message_channel)

　このことから、クライアント側でApp.chat_message.speakメソッドが実行された後、サーバー側のChatMessageChannelのspeakメソッドが呼び出され、入力された発言メッセージである「テスト」を受け取り、配信されている様子が分かります。また、あらかじめ立ち上げておいたもう1つのブラウザを確認すると、既にチャネルから配信された発言メッセージが表示されています。

図5　発言メッセージがチャネルを通じて配信される

　再度、デバッガーの再生ボタンをクリックすると、発言した側のブラウザにも同じメッセージが表示されます。

図6　発言メッセージが自身のブラウザにも反映される

　同様に、もう1つのブラウザ側からも同じ動作となることを確認してみましょう。

まとめ

　今回はRails 5目玉機能の1つであるAction Cableのサンプルアプリ実装を通して、Action Cableへの理解を深めました。

　次回は引き続きAction Cableのサンプルアプリを拡張して、発言メッセージをデータベースに保存できるようにし、会員登録機能と関連付けを行います。

参考文献

• Ruby on Rails チュートリアル
• Ruby on Rails ガイド