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

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

新規登録して質問してみよう
ただいま回答率
85.34%
GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

121閲覧

画像が投稿できる簡易的なアプリで投稿した際に双方向通信で別ブラウザにも即時表示したい

datiko

総合スコア74

GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/09/21 15:13

画像が投稿できる簡易的なチャットアプリを作成したい

  • 画像を添付したメッセージを投稿し、投稿した際に双方向通信で投稿時に別ブラウザにも画像とメッセージを表示したい

前提

JavaScriptで画像投稿ができるTeamsの様な簡易的なチャットアプリをを作っています。

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

AmplifyのGrapthQL API を使用して双方向通信を実装していますが
画像を添付したメッセージを投稿した際、別ブラウザでは文字列は投稿した瞬間に表示されるが画像が即時表示されずに困っております。

【投稿したブラウザ】
イメージ説明

【別ブラウザ】
イメージ説明

該当のソースコード

useEffect(() => { fetchData(); // 新しいメッセージが追加された際のsubscriptionの設定。 // onCreateChatMessageイベントがトリガーされたときに発火。 const subscription = API.graphql( graphqlOperation(onCreateChatMessage) // subscribeはgraphql APIでの双方向通信の決まり(subscription(リード処理), query(リード処理), mutation(更新処理)) // 何かアクションがあるのを待機している(Graph QLの変更の通知を待っている) ).subscribe({ // 変更があった場合{ value }に値(入力された値)が入ってくる next: async ({ value }) => { const newMessage = value.data.onCreateChatMessage; console.log("新しいメッセージ", newMessage) // 新しいメッセージの関連画像のURLを取得 console.log("双方向通信で取得した画像:", newMessage.Images.items) if (newMessage.Images && newMessage.Images.items.length > 0) { await Promise.all(newMessage.Images.items.map(async (imageItem) => { try { const url = await Storage.get(imageItem.image); setImageURLs(prev => ({ ...prev, [imageItem.image]: url })); } catch (err) { console.error("Error fetching image URL:", err); } })); } setChatMessages(prevMessages => [...prevMessages, newMessage]); }, error: error => console.error(error) }); // メッセージが削除された際のsubscriptionの設定。 // onDeleteChatMessageイベントがトリガーされたときに発火。 const deleteSubscription = API.graphql( graphqlOperation(onDeleteChatMessage) ).subscribe({ next: ({ value }) => { // { value }から新しいメッセージを取得 const deletedMessageId = value.data.onDeleteChatMessage.id; setChatMessages(prevMessages => // prevMessages=現在のメッセージリスト(テスト1〜4), newMessage=新しいメッセージを除去。 prevMessages.filter(message => message.id !== deletedMessageId) ); }, error: error => console.error(error) }); // useEffectのクリーンアップ関数。 // コンポーネントがアンマウントされるときに、subscriptionを終了。 return () => { subscription.unsubscribe(); deleteSubscription.unsubscribe(); }; }, []);

subscription.js

1export const onCreateChatMessage = /* GraphQL */ ` 2 subscription OnCreateChatMessage( 3 $filter: ModelSubscriptionChatMessageFilterInput 4 ) { 5 onCreateChatMessage(filter: $filter) { 6 id 7 message 8 Images { 9 items { 10 id 11 image 12 chatmessageID 13 createdAt 14 updatedAt 15 __typename 16 } 17 nextToken 18 __typename 19 } 20 createdAt 21 updatedAt 22 __typename 23 } 24 } 25`;

試したこと

双方向通信部分の
console.log("双方向通信で取得した画像:", newMessage.Images.items)
でnewMessageはの中身を見たところ、投稿した文字列は取得できている様であるがファイル名は取得できてないようで、双方向通信の処理が走るまでに画像が保存できていないのではないかと仮説を立てていますが、うまくいかず困っております。

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

"@aws-amplify/storage": "^5.9.4", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^13.5.0", "aws-amplify": "^5.3.10", "aws-amplify-react": "^5.1.43", "react": "^18.2.0", "react-dom": "^18.2.0", "react-image-file-resizer": "^0.4.8", "react-scripts": "5.0.1", "web-vitals": "^2.1.4"

もしお分かりの方がいらっしゃいましたら、ご教示お願い致します。

よろしくお願い致します。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.34%

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

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

質問する

関連した質問