【rails6】Action Cableのチャットにユーザーのアイコン画像も送信したい

こんにちは！

今日は「Action Cableを用いて作成したメッセージ機能の不具合解消」のご報告となります。
最後までお付き合いくださいませ

「Action Cableを用いたメッセージ機能を実装したい！！」という方は予め下記をご参考に実装くださいませ

参考文献（メッセージ機能の実装について）

https://qiita.com/Takahiro_Ito/items/f27cc9e991fdb9347eee
https://techtechmedia.com/action-cable-rails6/
https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7

解消したかった事

メッセージ送信時にユーザーのアイコン画像が送付できなかった

環境

• Ruby on Rails 6.0
• AWS/EC2
• Nginx
• MariaDB
• unicorn
• エディタはVS Codeを使用しています
• jQuery導入
• 既にAction Cableで非同期通信に成功していること

まずは今日の完成形を見てみましょう

やりたい事

この通り、非同期でメッセージを送信していますが、
メッセージだけでなく「ユーザーのアイコン画像」も表示できていることがわかります。

これを実装しましょう！！

javascript/channels/room_channel.js を編集する

javascript/channels/room_channel.js

received(data) {

  // アイコン情報を取得します
  const $userIcon = document.getElementById('js-user-icon');
  const $defaultIcon = document.getElementById('js-default-icon');

  // 条件分岐でアイコン情報を返却します
  function icon(){
    if( $userIcon === null ){
      return $defaultIcon
    } else {
      return $userIcon
    };
  }

// 〜 中略　〜 

  const html =
    `<div class="incoming-msg">
       <div class="img-box">
         <div class="avatar-img">
           // ↓ここに画像配置の記述をしていきます
           <img src= "${icon()["src"]}" width="50" height="50" class="img-circle">
         </div>
       </div>
       <div class="partner-info">
         <div class="partner-name">
           ${data.user_image.record.nickname}
         </div>
         <div class="received-msg">
           <div class="received_withd_msg">
             ${data.message.message}
           </div>
           <div class="created-time">
             今
           </div>
         </div>
       </div>
     </div>`;
}
// 見づらくて申し訳ないですが、上記記述は全てreceived(data)の中に記述しているものです

では、肝心な画像の部分を抜粋して見てみましょう

<img src= "${icon()["src"]}" width="50" height="50" class="img-circle">

• icon() => 先ほどの条件分岐を呼び出しています
• ["src"] => 下記をご確認ください

画像はIcon情報内の「 src 」に含まれていますので、icon()["src"]と記述しましょう

viewにid情報を付与して完成です

処理の記述は上記で完了です、viewファイルにidを付与してあげましょう

show.html.erb

<div class="img-box"> 
  <div class="avatar-img">
    <%= link_to user_path(m.user.id) do %>
      <% if m.user.avatar.attached? %>
        ↓ 以下が画像の欄です idを付与しましょう　↓
        <%= image_tag(rails_blob_path(m.user.avatar), size: "50x50", class: "img-circle", id:"js-user-icon") %>
      <% else %>
        <%= image_tag("default_user.png", size: "50x50", class: "img-circle", id:"js-default-icon") %>
      <% end %>
    <% end %>
  </div>
</div>

これで完成です！
今日もご覧いただきありがとうございました！

もし、もっと簡単に書ける方法や処理を軽くする方法などございましたら是非コメント頂けますと幸いです