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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Q&A

解決済

2回答

2018閲覧

【node.js】テキストとファイル読み込みの順序制御が出来ない

asakura

総合スコア29

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

0グッド

1クリップ

投稿2018/03/18 08:23

チャットアプリを作成していますが、
テキストメッセージの後に写真ファイルを表示したいのですが、
写真ファイルの読み込みに時間が掛かり、テキストメッセージの表示後に
写真ファイルが読み込まれてしまします。

具体的な内容ですが、
テキストメッセージ、写真ファイルの保管先:DynamoDB
写真データの保管先:S3

1.テキストメッセージ、写真ファイル名が記述れているレコードを取得
2.ファイル名を取得しS3へファイルを要求

すると、以下のようになってしまいます。
メッセージ1
メッセージ2
メッセージ1の写真ファイル
メッセージ2の写真ファイル

js

1// メッセージと写真ファイル取得.js 2 reservation_management_id = '906'; 3 4 postData.dynamoChatMessageGet(reservation_management_id).then(function(result) { 5 if (result.Count !== 0) { 6 for (i = 0; i < result.Count; i++) { 7// console.log('[DEBUG] ', result.Items[i].file_name.S); 8 9 if (result.Items[i].file_name.S !== 'notfile') { 10 file_name = result.Items[i].file_name.S; 11 // 添付ファイルの取得 12 postData.s3AttachmentFile(reservation_management_id, file_name).then(function(result) { 13 var fileData = result; 14 console.log('[DEBUG] Target Attachment File: reservation_management_id=', reservation_management_id, ' file_name=', file_name, 'length count:', fileData.length); 15 } 16 }); 17 } 18 } 19 } else { 20 console.log('[DEBUG] Not history reservation_management_id:', reservation_management_id); 21 } 22 });

js

1// DynamoDBからメッセージ取得する.js 2exports.dynamoChatMessageGet = function(reservation_management_id) { 3 // Promiseオブジェクトを返却する.処理成功時にはresolveが呼ばれる 4 return new Promise(function(resolve) { 5 var options = { 6 uri: chat_message_url + "get_chat", 7 method: 'POST', 8 headers: { 9 "Content-type": "application/json", 10 }, 11 json: true, 12 json: { 13 "table_name": "mgc_d_chat", // DynamoDBのテーブル 14 "reservation_management_id": reservation_management_id, // 予約番号 15 } 16 }; 17 request.post(options, function(error, response, body) { 18 if (!error && response.statusCode == 200) { 19 resolve(body); 20 } else { 21 console.log('error: ' + response.statusCode); 22 } 23 }); 24 }) 25};

js

1// S3から写真データを取得する.js:S3を管理しているWEBサーバへpostしてデータを取得 2exports.s3AttachmentFile = function(reservation_management_id, file_name) { 3 return new Promise(function(resolve) { 4 var options = { 5 uri: chat_message_url + "get_file", 6 method: 'POST', 7 headers: { 8 "Content-type": "application/json", 9 }, 10 json: true, 11 json: { 12 "reservation_management_id": reservation_management_id, // 予約番号 13 "file_name": file_name, //ファイル名 14 } 15 }; 16 request.post(options, function(error, response, body) { 17 if (!error && response.statusCode == 200) { 18 resolve(body); 19 } else { 20 console.log('error: ' + response.statusCode); 21 } 22 }); 23 }) 24}; 25

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

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

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

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

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

guest

回答2

0

画像ファイルを同期読み出しすれば解決、のように思うのですがどうでしょう。
あるいは、非同期でも、読み出し終了を待ち合わせるとか(これはできないことはないですよね?)

#Javascriptで同期読み出しができるのかは不勉強でしりませんw

投稿2018/03/18 15:14

y_waiwai

総合スコア87747

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

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

0

ベストアンサー

Node.jsのメリットである非同期として正しい動きに見えるんですが…。
これをプログラムレベルで解決しようとすると他のメッセージを処理中かどうかを見る必要が出てくるので
アプリ側でメッセージの表示順を制御してはどうですか?
画面がどういう構成なのかわかりませんが
メッセージのID順に表示して、画像ID?順に表示するみたいな感じです。
画像を一番後ろに追加するんじゃなくて、既存のメッセージIDの後ろに挿入するみたいな。

投稿2018/03/18 15:10

sousuke

総合スコア3828

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

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

asakura

2018/03/18 16:33

コメントありがとうございます。 おっしゃる通りで、メッセージにIDを持たせ、 一旦メッセージのみ出力し、画像取得し次第、ID単位へ変更をしようと検討中です。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問