Ephemeral Chat Messages

One increasingly common feature in chat apps is the ability to send self-destructing messages, also known as "ephemeral" messages. When this feature is enabled, the messaging system automatically erases the content minutes or seconds after the message is sent. This deletion is effective on all the devices that received the message, as well as on system servers, to ensure that no lasting record of the conversation is kept.

This tutorial will demonstrate how you can implement ephemeral messages in your chat app by hooking into the Stream Chat API! A demo of the application we’ll be building is shown below; notice how the messages disappear after a short time:

Prerequisites

To follow along with this tutorial, you'll need to have Node.js and yarn installed on your computer. We'd also recommend that you have some experience with building React applications.

Signing Up for Stream Chat

Create a free Stream account or sign in to your existing account here. Once you’re logged in, create a new application and grab your app access keys, which we’ll be making use of shortly:

Bootstrapping the React Application

Use the create-react-app package to bootstrap a new React application for this tutorial:

    npx create-react-app stream-chat-demo

If you do not have npx on your machine, install it first by running yarn global add npx.

Next, cd into the stream-chat-demo directory and run the command below, to install the additional dependencies we’ll be using throughout the process of building our React app and Node.js server:

    yarn add express cors dotenv body-parser random-username-generator stream-chat stream-chat-react axios -D

With our dependencies installed, let’s go ahead and move on to the next step of the setup!

Setting Up the Express Server

Create a new .env file in the root of your project directory, and paste in the credentials from your Stream application dashboard:

https://gist.github.com/ayoisaiah/388cbad5a7b075489f16e96a4174d620

Next, create a new server.js file and open it in your favorite text editor. Populate the file with the following code:

https://gist.github.com/ayoisaiah/721eae63f9e1aee6941b7735ff338315

We have two routes on the server. The /join route creates or updates a user on our Stream chat instance and generates a token that enables authentication on the application frontend. Meanwhile, the /delete-message route expects a message_id and timeout, and deletes the message from the stream chat instance after the expiration of the timeout.

We’ll take a look at how we can send a message_id and timeout in the next step. You can start the server now by running node server.js.

Building the Application Frontend

Open up src/App.js and swap the code out for the following:

https://gist.github.com/ayoisaiah/f021749980d00f6211c30cb716ba1e40

That’s all the code we need to have a fully functional chat application! You can now start the development server using yarn start and send a few messages in the app. Make sure your server is running before opening up the application.

Automatically Deleting Messages for Everyone

Now, let’s implement self-destructing messages for everyone! Update your App.js file as follows:

https://gist.github.com/ayoisaiah/35ee6e109dd475e8f7e7dcbf66abbc1f

The relevant changes are on lines 50-57. Stream Chat has a neat feature that allows us to listen for events that occur on a channel. Here, we’re listening for the message.new event which is triggered when a new message is sent in the channel. We then pass the message_id of the new message and a timeout of 5 seconds to the /delete-message route on the server which has the effect of deleting the message after five seconds.

To prevent the request from being sent multiple times (from all connected clients), we’re checking if the current user is the user who sent the message before triggering the POST to /delete-message.

Final Thoughts

You now should have the basic structure in place to build ephemeral messaging into your chat application! For real-world applications, you might consider making the timeout for when messages disappear more configurable for users through a settings menu.

If you ran into any issues while building the demo, you can always clone the repo from GitHub for a fresh start. Be sure to check out Stream's interactive API tour and API documentation to learn about other things you can do with the Stream platform!

Thanks for reading!

TutorialsChat