リアルタイムチャットのメッセージ表示順について

Question

チャットのコメント表示順を時系列順にしたい

Firebaseを使用してWebのリアルタイムチャットを作成しています。
Firebaseが展開しているサンプルコード（Friendly Chat）をベースにしています。
二人以上でコメントを投稿すると、自分の投稿したコメントが一番最新（もっとも下）に表示されてしまいます。
ブラウザをリロードすると時系列順のコメント表示となりますが、リロードなしでも時系列順の表示にしたいです。

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

自身の投稿コメントが最新のものとして表示されてしまい、
他の人が最新のコメントをしても、自身のコメントより古い時系列順で表示されてしまう。

赤：自身のコメント
紫：他人のコメント（後からコメントしたにも関わらず、表示順が後ろになる）

該当のソースコード

// Displays a Message in the UI.
function displayMessage(id, timestamp, name, text, picUrl, imageUrl) {
  var div = document.getElementById(id);
  // If an element for that message does not exists yet we create it.
  if (!div) {
    var container = document.createElement('div');
    container.innerHTML = MESSAGE_TEMPLATE;
    div = container.firstChild;
    div.setAttribute('id', id);
    div.setAttribute('timestamp', timestamp);
    for (var i = 0; i < messageListElement.children.length; i++) {
      var child = messageListElement.children[i];
      var time = child.getAttribute('timestamp');
      if (time && time > timestamp) {
        break;
      }
    }
    messageListElement.insertBefore(div, child);
  }
  if (picUrl) {
    div.querySelector('.pic').style.backgroundImage = 'url(' + addSizeToGoogleProfilePic(picUrl) + ')';
  }
  div.querySelector('.name').textContent = name;
  var messageElement = div.querySelector('.message');
  if (text) { // If the message is text.
    messageElement.textContent = text;
    // Replace all line breaks by <br>.
    messageElement.innerHTML = messageElement.innerHTML.replace(/\n/g, '<br>');
  } else if (imageUrl) { // If the message is an image.
    var image = document.createElement('img');
    image.addEventListener('load', function() {
      messageListElement.scrollTop = messageListElement.scrollHeight;
    });
    image.src = imageUrl + '&' + new Date().getTime();
    messageElement.innerHTML = '';
    messageElement.appendChild(image);
  }
  // Show the card fading-in and scroll to view the new message.
  setTimeout(function() {div.classList.add('visible')}, 1);
  messageListElement.scrollTop = messageListElement.scrollHeight;
  messageInputElement.focus();
}

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // TODO 8: Load and listens for new messages.
  var query = firebase.firestore()
    .collection('messages')
    .orderBy('timestamp', 'asc');
//    .limit(12);
  // Start listening to the query
  query.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
          deleteMessage(change.doc.id);
      } else {
          var message = change.doc.data();
          displayMessage(change.doc.id, message.timestamp, message.name,
                         message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

試したこと

Firebase上のデータベース及び、上記コードのorderByをascに変更

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

Firebase
Javascript

Comments

[xenbeat]

各メッセージの「timestamp」を表示して確認してみましたか？
したならその根拠を追記、していないならまずは確認してその結果を追記ください。

[tatsuya-ki]

データベース上のTimestampはユーザが投稿した時間通りとなっております。
※FirebaseのDB上のtimestampの確認結果

timestamp（赤ユーザコメント）
2019年6月1日 15:33:52 UTC+9
timestamp（紫ユーザコメント）
2019年6月1日 15:33:53 UTC+9

[xenbeat]

> データベース上のTimestampは
HTML上はどうなってますか？

[tatsuya-ki]

html上は、下記の通りmessagesで、javascript内の関数を呼び出しています。
javascript内の関数は上記に載せたコードの通りです。

***
<!-- Messages container -->
<div id="messages-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message">
<label class="mdl-textfield__label" for="message">Message...</label>
</div>
<button id="submit" disabled type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Send
</button>
</form>
***

[xenbeat]

> html上は、下記の通り

言葉足らずでしたね。
Chrome DevTools( https://developers.google.com/web/tools/chrome-devtools )等で実際にレンダリングされてる内容（HTML）を確認ください。
重要なのは「div.setAttribute('timestamp', timestamp);」で設定しているtimestampの部分です。

※既存データはクリアするなど一旦無視して、もう一度最初から試してみてください。
そして問題が起きた（順序がおかしくなった）時点のHTMLを確認してみてください。

[tatsuya-ki]

補足ありがとうございます！！
確認したところ、自身のコメントのtimestampがnullとなっていました。
他ユーザのコメントはtimestampに時間が反映されています。
リロードすると、nullだった部分にも時間が反映されておりました。

リロード無しでnullではなく時間を反映するにはどの部分を修正すればよいのでしょうか。

[xenbeat]

> 確認したところ、自身のコメントのtimestampがnullとなっていました。
やはりそうでしたか。これが原因ですね。

> リロード無しでnullではなく時間を反映するにはどの部分を修正すればよいのでしょうか。
回答にします。

Answer 1

次の部分を修正すればご希望の動作になると思います。

change.doc.data();
↓
change.doc.data({ serverTimestamps: 'estimate' });

少しだけ補足。サンプルコードではtimestampにserverTimestampsが登録されているので
デフォルトでは、サーバーの値（サーバータイムスタンプ）がローカルで使用可能になるまで、timestampにはnullが設定され、ローカルに書き込まれます。
上記の修正により、サーバーの値がローカルで使用可能になるまで、timestampにはローカルで試算された推定値が設定され、ローカルに書き込まれます。

Comments

[tatsuya-ki]

ありがとうございます！！
ご教示頂いたとおり修正したところ、
リアルタイムに表示順が反映されるようになりました。
補足も頂き大変勉強になりました。

[xenbeat]

????