質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

0回答

1272閲覧

RailsのActionCableを使った双方向の非同期通信でActiveStorageでUserに紐づいているアイコン画像を表示させたい

Yutaka.engin

総合スコア2

Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

0クリップ

投稿2021/06/08 05:56

編集2022/01/12 10:55

前提・実現したいこと

Rails6.0でチャットアプリを開発しています。
RailsのActionCableで双方向の非同期通信を実装している最中なのですが、ActiveStorageでUserに紐づいているアイコン画像を表示させたいです。

ビューファイルでは読み込めているのでリロードすると表示はされます。

発生している問題・エラーメッセージ

イメージ説明
↑現状

イメージ説明
この時検証ツールで確認するとこのようなエラーが出ています
(ページをリロードするとエラーは出ず画像は正常に表示されます)

404 (Not Found)

該当のソースコード

【Rails6】(送信時のリロード無し!)Action CableでSlack風チャットアプリを作成
↑を参考に実装しています

javascript

1 2import consumer from "./consumer" 3 4document.addEventListener('turbolinks:load', () => { 5 6 window.messageContainer = document.getElementById('message-container') 7 window.addMessage = document.getElementById('add-message') 8 if (messageContainer === null) { 9 return 10 } 11 12 consumer.subscriptions.create("RoomChannel", { 13 connected() { 14 }, 15 16 disconnected() { 17 }, 18 19 received(data) { 20 addMessage.insertAdjacentHTML('beforeend', data['message']) 21 }, 22 }) 23 const documentElement = document.getElementById('scroll-message') 24 window.messageContent = document.getElementById('message_content') 25 window.scrollToBottom = () => { 26 documentElement.scrollTop = documentElement.scrollHeight; 27 }; 28 scrollToBottom() 29})

ruby

1class RoomChannel < ApplicationCable::Channel 2 def subscribed 3 stream_from "room_channel" 4 end 5 6 def unsubscribed 7 # Any cleanup needed when channel is unsubscribed 8 end 9end

ruby

1class Message < ApplicationRecord 2 belongs_to :user 3 belongs_to :room 4 has_one_attached :image 5 6 validates :content, presence: true, unless: :was_attached? 7 8 def was_attached? 9 self.image.attached? 10 end 11 def template 12 ApplicationController.renderer.render partial: 'rooms/message', locals: { message: self } 13 end 14end

ruby

1class MessagesController < ApplicationController 2 def create 3 @room = RoomUser.find_by(user_id: current_user.id) 4 @message = Message.create!(params.require(:message).permit(:content, :image).merge(room_id: @room.room_id, user_id: current_user.id)) 5 ActionCable.server.broadcast 'room_channel', message: @message.template 6 end 7end 8

ruby

1class User < ApplicationRecord 2 # Include default devise modules. Others available are: 3 # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable 4 devise :database_authenticatable, :registerable, 5 :recoverable, :rememberable, :validatable 6 7 has_many :room_users 8 has_many :rooms, through: :room_users 9 has_many :messages 10 has_one_attached :icon 11 12 validates :name, presence: true 13end

html

1 <% @messages.each do |message| %> 2 <div id="message-container"> 3 <%= render partial: 'message',locals: { message: message }%> 4 </div> 5 <% end %> 6 <div id="add-message"> 7 </div> 8 </div> 9 </div> 10 <%= form_with model: [@room, @message], class:"message-form" do |f| %> 11 <%= f.text_field :content, class:"message-field", placeholder:"Message", autofocus: true %> 12 <label class="input-image"> 13 <%= f.file_field :image, class: "upload-file" %> 14 </label> 15 <%= f.submit "", class:"send", id:"send" %> 16 <% end %> 17 </div> 18</div>

試したこと

ActionCableを用いたリアルタイムチャットでユーザーアイコンを表示させたい
↑のサイトを参考にreceived(data){}の中にHTML書き込みフロントに返す記述に変更することで画像の表示はできましたが、document.getElementById('id')で画像の取得をしているためかメッセージの送信者の登録したアイコン画像ではなく別ユーザーの登録したアイコン画像が表示されます。

補足情報(FW/ツールのバージョンなど)

Rails6.0

  • ActivStrage
  • ActionCable
  • Devise

DB

  • MySQL

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問