Building a Real-Time Node Chat Messaging App
This tutorial will take you through how you might create a live chat app that provides responses in realtime with the help of and . Essentially, we’ll be making a chatbot that interprets the intent of a user’s input using Natural Language Processing (NLP), allowing it to provide accurate responses.
You need to have a recent version of and installed on your machine before you can proceed with this tutorial. A working understanding of is also required, as we’ll be making use of to flesh out our application interface.
Finally, make sure to have installed on your computer. We’ll be using it to expose our local server to the web so that we can watch for new messages in our application.
Create a new React application
Open your terminal and navigate to the directory where you normally keep your coding projects. Next, run the command below to bootstrap a new React application using :
npx create-react-app live-chat
Once the command has finished running, cd into the live-chat directory, and run yarn start to start the development folder on port 3000.
Sign up for Stream
Follow to create a new Stream account, or to your existing account. Once you’re redirected to the dashboard, create a new app and take note of the application access keys which will be presented to you on creation.
Sign up for Dialogflow
Head over to the and sign up for a free account. Next, create a new agent by clicking the blue Create Agent button in the sidebar.
Once your agent is created, click the Small Talk option in the sidebar and enable it for your bot. The option allows your bot to respond to common greetings immediately without any further work on your part.
The next step is to grab your agent keys which you can do by heading over to your agent’s settings. Under Google Project, click on the service account name. This will open your Google Cloud Platform service account’s page.
Find the Dialogflow Integrations entry, and click the three dots menu on the right. Click the Create Key option and download your credentials in JSON format.
Create the live chat server
Let’s go ahead and set up our live chat server. Before we write any code, let’s install the additional dependencies we’ll be needing:
yarn add express body-parser cors dotenv stream-chat
Next, set up a new .env file in the root of your project directory and add your Stream and Dialogflow credentials as shown below:
Note that your Dialogflow private key and client email are found in the JSON file you downloaded in the previous section. Also note that only the private key is enclosed in quotes.
Create a new server.js file in the root of your project directory, and paste in the following code:
Here, we have a single /join route which expects a username from the client side and creates an authentication token for the user. The updateUser() method creates the user on our Stream chat instance, passing in the token for the user. If the user already exists, the method only updates the properties on the user.
After creating the user, we of the type commerce, whose id is set to live-chat. commerce is one of the five default on Stream and is aimed at providing good defaults for building something like your own version of Intercom or Drift.
The create() method creates a new channel and or returns a channel with the set id if it exists already. Finally, the user is added as a member of the live-chat channel and the authentication token, and API key is sent to the client. This is necessary for on the application frontend.
That’s all the code we need on the server to get our live chat application working. Run node server.js in the terminal to start the server on port 5500 before moving on to the next section.
Build the application interface
We need to install two additional packages for our application frontend: and axios. The former is the official set of React components for Stream Chat that removes all the hassle of creating a complex chat UI, while the latter is a popular library for making requests in both browser and nodejs environments.