•March 16th 2020
More and more applications are seeing the value in allowing users to communicate in real-time, either with one another or with their support team. Adding this feature to existing applications, or even new ones, however, can seem like a giant, time-consuming undertaking. To help make this task seem less daunting, let me introduce Stream Chat; Stream Chat can help you implement a chat solution in your application in minutes!
You can also get the source code for this tutorial on GitHub.
To follow along with this tutorial, you'll need to have a basic understanding
You'll also want to make sure you have Node (version 8 or above) installed on your system.
To check if you have Node installed on your system, enter the command below in your terminal:
$ node -v
If Node is installed, you will see the version installed displayed in response to the above command; otherwise, you will receive output similar to “command not found: node”.
Also, we recommend that you install the nodemon package, which will automatically restart the node application when it detects file changes in your directory (no more reloading!):
$ npm install -g nodemon
Once you've confirmed you have the necessary tools installed, let’s dive in!
Creating a Stream Account
Let's create a Stream account so that we can use the Stream API. We can do this by navigating to the Stream website and clicking the SIGNUP button.
On the modal that pops up, fill in your USERNAME, EMAIL ADDRESS, and PASSWORD and click the CREATE FREE ACCOUNT button:
On your Stream Dashboard (where you'll be directed after creating an account), you'll find your APP ID, API KEY, and API SECRET, which we’ll use in a bit:
Take note of these keys, we will be using them in the next steps. Also, keep them safe and private.
Creating the Project
To begin creating our project, initiate the directory for it in the directory where you store your code, and name it
Inside of your new
public- this houses all our client-side files
server.js- contains our server-side code
Then, inside the public directory, create the following files:
Next, let’s initialize NPM, so that we can install packages; open your terminal and
cd into your project root directory (
$ npm init
On the prompt that appears, press enter through all the prompts; the defaults for each will work for our application.
Creating a Node Server
$ npm install express stream-chat
Now that we have installed express let’s spin up a new Node server to serve our files; add the code below to the
Then, start up the server from your terminal by running this command:
$ nodemon server.js
Here, we have created a Node server that will be running on port
8800. You can now access the project on
Generating and Utilizing Tokens
To be able to initialize the client, we need to get a valid token, which we can generate from our Node server. Add the below piece of code for generating tokens in the
Make sure to update the
<STREAM_API_SECRET>placeholders with the ones we grabbed above.
With the above code, we have created a new
/token endpoint, to which we can make a request when generating a new token. We just need to pass in the
username to the URL via the query string - http://localhost:8800/token?username=theUserUsername when we want to generate a token for a user.
Creating the Interface
Add the following code to your
public/index.html file to create your chat interface:
<script>s at the end of this code allow us to connect into Stream, make HTTP requests (using Axios), and connect into the actions for the page, from our
Styling the App
Let's get our styling started by inserting the following into
Before we can start using the client SDK, we must first set the current user. Add the function below to the
public/custom.js file to do that:
When you load the app, the first page that shows up displays a form to input a username before proceeding. Currently, it does not do anything when you hit enter. Let’s fix that!
Add the code below to the
public/custom.js file, so we can listen to the input for when a user hits enter so we can display their message in the chat area:
Once the user hits enter, we call the
initializeClient() function to initialize the client.
If you open the app, and input a username, then hit enter, you may find that the app is almost empty but promising!:
To start to fill things out, let’s create a function that takes in an array of users, and then populates them to the DOM by targeting the
In the above code, we added a click event to each
user which calls the
selectUserHandler function when a
user is clicked.
Next, let’s create the
selectUserHandler function. Add the following code to
In this function, when we click on a user, we style that user differently so that we can uniquely identify the current user from other users.
Finally, let’s fetch and list users! Add the following function to the
Now call this function in the
initializeClient function so that we can fetch users as soon as we initialize the chat:
Initializing a Channel
To set up a channel for a one-to-one chat, we only need to pass in the two users' IDs and not worry about the channel name.
Add the below function to the
public/custom.js file for initializing a channel:
Now, let’s call this function when we click on a user that we want to chat with. Add the below to the
Adding New Messages to the Channel
Now, let’s create a function to append messages to the DOM. Add the below function to the
Note: This function will extract the user's
messagevalues from the payload, and then create a new DOM element that holds the
message. Once created, the message will be appended to the DOM using the message
Displaying Both Old and New Messages
By adding the code below to the
initializeChannel(members) method, we can listen for new messages to the channel:
We can add the following to the
initializeChannel(members) function to render messages already in the channel:
We have covered receiving messages, let's now jump into how to handle sending messages. Add the below function to the
Now that we have the framework set up, we can listen for the
message-input and the pressing of the
Enter key and add the message to the channel:
Testing It Out
To test out the chat:
- Open the application in two different tabs or browsers.
- Type in a username and hit Enter, in each.
- Select the user on the other tabs.
- Exchange messages!
In this post, we walked through how to create a web app to allow two users to converse in real-time, using Stream Chat. This is just the basics of what is possible. Check out the Stream Chat SDK to learn about even more ways you can improve the form and function of your app!
We can't wait to see what you create! Thanks for reading and happy coding!