Build a One-to-One Chat App with JavaScript

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!

In this tutorial, we'll walk through building a one-to-one user chat application using just the Stream Chat SDK and Vanilla JavaScript.

You can also get the source code for this tutorial on GitHub.

Prerequisites

To follow along with this tutorial, you'll need to have a basic understanding
of JavaScript.

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:

Creating a Free Stream Chat account

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:

Account Dashboard

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 stream-chat-javascript:

$ mkdir stream-chat-javascript

Inside of your new stream-chat-javascript directory, create the following directory and file:

  • public - this houses all our client-side files
  • server.js - contains our server-side code

Then, inside the public directory, create the following files:

  • custom.js
  • index.html
  • style.css

Next, let’s initialize NPM, so that we can install packages; open your terminal and cd into your project root directory (stream-chat-javascript), then run:

$ 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

Now, let’s install express and the Stream Chat server SDK:

$ 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 server.js file:

https://gist.github.com/nparsons08/23a84134a4e3639f73d9ec0b153fb8f7

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 http://localhost:8800.

Generating and Utilizing Tokens

We’ll be using the JavaScript SDK on both the server, to generate our tokens, and the client end, to get real-time updates of what is happening on the chat, including real-time messages.

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 server.js file:

https://gist.github.com/nparsons08/2174410cb77b89b5e6712e8e0a1c51d6

Make sure to update the and 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:

https://gist.github.com/nparsons08/91feb2fefc716ba12f701b10168d261a

The three