Building Chat: Dealing with timestamps

Users need to know when they got a message so they can respond or react accordingly.

Timestamps are also important for record keeping. Often timestamp records are simply useful for users to know about. But in some cases, a timestamp is more valuable. Not displaying timestamps accurately can have real consequences in legal, medical, or contractual situations.

You should always include and display message timestamps in chat applications you build. Not having timestamps will disrupt your user experience and users expect that information in almost every chat scenario.

You may think you don't need timestamps for real-time 1<>1 style chats (like a support chat). However, imagine this from the user perspective of a support agent: A customer sends a message while you're responding to multiple other customers. You switch back to the new customer message, but you have no idea if the message was sent 5 minutes or 5 seconds ago. If it was 5 seconds ago then you have time to respond to other customer who have been waiting longer, but if it was 5 minutes you'll respond right away so they don't get frustrated and leave.

In the above example you didn't need the timestamps - you were attempting to communicate in real-time anyway. However, that extra information changed how you communicated so you could be more efficient.

Always include the message timestamps - It's just an easy way to help your users communicate better.

It's easy to misuse timestamps and the complexity of time zones makes it all the more challenging. Below are a few of the common mistakes often seen in chat apps:

• Displaying way too much information or not formatting. Don't display complete date plus hours, minutes, seconds and a decimal fraction of a second (eg 2022-07-16T19:20:30.45+01:00). It's way too much information to display in a pleasant way and it clutters the message area. Showing the date and the time down to the minute (eg 2022-07-16 2:15) is more compact and just as useful.

• Displaying timestamps in UTC or Epoch. While this format is a good way to store message timestamps it's not best to show it to the user in that format (not readable). Convert it to their local timezone and then display the timestamp.

• Using relative timestamps (eg sent 2 minutes ago) when you should use absolute timestamps (eg 2022-07-16 2:15) or vise versa. In most cases absolute timestamps are best for accuracy unless in your application accuracy isn’t important, but immediacy is.

• Server to client side inconsistency. If you're sending push notifications make sure they are coordinated with the user's local timezone. For example, if you send a notification at 1am local user time while it's 11pm server time with the message "Your package will be delivered tomorrow" when it's already 'tomorrow' for the user they may be confused. In this example the message should have said "Your package will be delivered today". You may need to consider the users timezone in order to improve this experience.

The JavaScript Tutorial Chat App is missing timestamps from displayed messages. Lets add them.

Start by downloading or cloning the JavaScript Tutorial Chat App and open the directory 'Step 5 - Add Usernames'. Or you can follow the tutorial and then come back here to add message timestamps.

Open index.html.

Replace the entire 'class chatControl' with this new version that accepts a timetoken from the received messages. This new version will take the timetoken and convert it to a local time string that will be displayed with each message.

Next, replace the PubNub listener with this one that forwards the timetoken to chatControl().

Last, replace pubnub.fetchMessages() with this one that forwards the timetoken to chatControl().

Your 'index.html' file should now look like this.

If you want to understand how this JavaScript Chat App works in detail - follow this tutorial.

Open 'index.html' in your browser. You should now see message timestamps formatted in a readable way that's local to the browsers timezone.