Add Time to simple Firebase chatt

Question

I am trying to add a time indication on a simple Firebase chat but I can't get it to work at all.

I have try to use :

var time = new Date() or
var time = new Date().getTime()

But it seems that it is not recognised by Firebase.

Would anyone have an idea on how to have the time printed with the message?

Thanks in advance!

My code looks like this:

<!doctype html>
<html>
<head>
<script src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<style>


  </style>

<title>
 Live
</title>
</head>

 <header style="background: #1E2E3C; height:20px; min-width:640px">
 <p style="color: white; font-family: helvetica; margin: 0px 8px 0px 0px ;text- align:right;font-size:16px"><span title="Close Window to LOGOUT">Chat Messenger </span></p>

</header>

<body style="background: white; margin: 0px;padding:0px">



 <div id='messagesDiv' style="height:300px; min-width:600px; overflow:auto;  padding:10px;     margin:8px; background: #ECF2F6; color: #1E2E3C; font-family: helvetica;font-size:18px;border-    radius:4px;"></div>

  <div>
 <input type='text' id='nameInput' placeholder='User Name' style="width:200px;height:25px; margin:1px 0px 4px 8px; background: white;border-radius:4px; border: 3px solid #E6ECF2; font-family: helvetica; color: #1E2E3C"><br>

    <span title="Press ENTER to send message">
 <input type='text' id='messageInput' placeholder='Message' style="width:610px; height:25px; margin:4px 8px 8px 8px; background: white;border-radius:4px; border: 3px solid #E6ECF2; font-family: helvetica; color: #1E2E3C">
    </span>

  </div>




  <script>

  var myDataRef = new Firebase('https://xxxxxxxx.firebaseio.com');
  $('#messageInput').keypress(function (e) {
    if (e.keyCode == 13) {
      var name = $('#nameInput').val();
      var text = $('#messageInput').val();

      myDataRef.push({name: name, text: text});
      $('#messageInput').val('');
    }
  });
  myDataRef.on('child_added', function(snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
  });
  function displayChatMessage(name, text) {
   $('<div/>').text(text).prepend($('<em/>').text(name+': ' )).appendTo($('#messagesDiv'));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
  };
</script>

Jobsamuel Jobsamuel · Accepted Answer · 2014-05-04T21:23:49

A way to get time from Firebase is using Firebase.ServerValue.TIMESTAMP when you .push() a message.

Like this myDataRef.push({name: name, text: text, time: Firebase.Server.TIMESTAMP});

Due to Firebase Timestamp is the time since the UNIX epoch, in milliseconds, you need to transform it before use it. This function might help you with that:

time = function (timestamp) { // Convert UNIX epoch time into human readble time.
    var epoch = new Date(timestamp);
    var date = epoch.toUTCString();
    return date;
}

Finally, your display logic might be something like this:

myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
var t = time(message.time);
displayChatMessage(message.name, message.text, t);
});

Add Time to simple Firebase chatt

1 Answers