開発するチャットアプリ（3）
動作確認
これで、まずは発言メッセージをデータベースに保存する処理以外の、基本的なWebSocket通信が実現できました。以下のコマンドでPumaサーバーを起動し、「http://localhost:3000/chat_messages/index」にアクセスして問題なく動作することを確認してみましょう。
$ bin/rails s -d
次に、WebSocket通信の様子が分かるようにクライアント側のブラウザをもう1つ立ち上げておきましょう。
ここからは、より詳細にAction Cableの動作が分かるように、Chromeブラウザ上のデベロッパーツールを用いてJavaScriptコードにブレークポイントを入れて処理を追っていきます。
デベロッパーツールを開いて、Sourcesタブから［localhost:3000 > assets > channels］とたどり、「chat_message.self-ハッシュ.js」ファイルを開きます。CoffeeScriptからコンパイルされたJavaScriptのソースコードが表示されるので、17行目のApp.chat_message.speakを呼び出しているコードとその直後を、該当の行番号17、18をクリックしてブレークポイントを入れます。
ブレークポイントを入れたブラウザ上で、実際に発言メッセージを入力してみましょう。ここでは、「テスト」と入力してエンターキーを押下します。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つのブラウザを確認すると、既にチャネルから配信された発言メッセージが表示されています。
再度、デバッガーの再生ボタンをクリックすると、発言した側のブラウザにも同じメッセージが表示されます。
同様に、もう1つのブラウザ側からも同じ動作となることを確認してみましょう。
まとめ
今回はRails 5目玉機能の1つであるAction Cableのサンプルアプリ実装を通して、Action Cableへの理解を深めました。
次回は引き続きAction Cableのサンプルアプリを拡張して、発言メッセージをデータベースに保存できるようにし、会員登録機能と関連付けを行います。
