•8 months ago
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:
Signing Up for Stream Chat
Bootstrapping the React Application
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
npxon your machine, install it first by running
yarn global add npx.
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:
Next, create a new
server.js file and open it in your favorite text editor. Populate the file with the following code:
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
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
timeout in the next step. You can start the server now by running
Building the Application Frontend
src/App.js and swap the code out for the following:
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:
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
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!