はじめに

実装の流れは長くなるので省略させていただきます。
自分が疑問に思ってノートに記録した物を記事にしていきます。

前提条件

Ruby 2.6.3
Rails 6.1.5

記事の対象者

実装を終えたが、それぞれの役割について理解を深めたい人

実装の流れ

リアルタイム機能を持ったDM機能を実装するまでの主な流れです。
用語については、Railsガイドを参考にしてください。

①サーバーサイド側のチャネルの処理を実装する
②クライアント側のチャネルの処理を実装する
③コネクションの設定ファイルに変更を加える
④データ保存後の処理をモデルに実装する
⑤ブロードキャストの処理を実装する
⑥表示するviewを実装する

上記流れの中で、記述方法に注意が必要なものだけ説明します。

①サーバーサイド側のチャネルの処理を実装する

コンシューマーがこのチャネルのサブスクライバになると下記コードが呼び出される。
（コンシューマーとはクライアントのこと。）

chat_room_channel.rb

 def subscribed
    stream_from "chat_room_channel"
 end

サーバー側のspeakアクションでは、クライアント側のspeakアクションから送られてきたデータを保存する。
下記の例（どの場所から、誰が、チャットメッセージを送ってきたか）

chat_room_channel.rb

 def speak(data)
    ChatMessage.create!(
      content:,
      user_id:,
      chat_room_id:
    )
  end

②クライアント側のチャネルの処理を実装する

指定のチャネルでサブスクリプションを作成すると、コンシューマーがサブスクライバになる。
この処理の中に、サーバーからのデータの受け取り処理や、送る処理を実装する。

chat_room_channel.js

appChatRoom = consumer.subscriptions.create("ChatRoomChannel",{});

他にも、チャットルームページだけで発火するように条件を加える。
例えば、下記の条件を加えることで、条件下のみspeakアクションが発火するようになる。

chat_room_channel.js

(/chat_rooms/.test(location.pathname)) {
  $(document).on("keydown", ".chat-room__message-form_textarea", function(e) {
    if (e.key === "Enter") {
      appChatRoom.speak(e.target.value);
~~以下略~~

③コネクションの設定ファイルに変更を加える

chat_room_channel.rb ではcurrent_userを使うことができないため、current_userを使うためのコードを書く必要がある。

connection.rb

private

      def find_verified_user
        self.current_user = env['warden'].user
      end

④データ保存後の処理をモデルに実装する

データ保存後にブロードキャストの処理を書いたファイルを呼び出す。

chat_message.rb

 after_create_commit { ChatMessageBroadcastJob.perform_later self }

まとめ

実装については記事を参考にすることで、行うことが可能です。
ただし、概念の理解はまだまだ必要だなと感じています。
特に難易度を上げている要因として、３つありました。

・クライアント側の処理がJavaScriptであること
　　→JSの知識について学習が少なかったため、苦労した。
・通信方法の設定変更などが必要だったこと
　　→MVCの概念ではなく、Action cableとwebsocketの独自の通信ルールのため理解が難しい
・知らないメソッドが多くあったこと
　　→処理の流れだけでなく、メソッドも独自のものがあり、混乱する

今回の実装を通して、まず、改めてJSの学習の強化していきたいと思いました。