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 Dialogflow and Stream’s chat infrastructure. 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.

Prerequisites

You need to have a recent version of Node.js  and yarn installed on your machine before you can proceed with this tutorial. A working understanding of React is also required, as we’ll be making use of Stream’s React components to flesh out our application interface.

Finally, make sure to have Ngrok 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 create-react-app:

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 this link to create a new Stream account, or sign in 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 Dialogflow website 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 initialise a channel of the type commerce, whose id  is set to live-chat. commerce is one of the five default channel types 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 authenticating users 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: stream-chat-react 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.