Build a Chat App with Stream & Kong

Managing microservices manually can get very complicated and takes the focus away from business logic. API gateways help take care of the various collective management and housekeeping tasks necessary for running microservices.

One of the most popular API gateways is Kong. As the illustration below shows, Kong takes care of the tedious tasks involved in managing and running microservices while leaving you to focus on building exciting features by leveraging on products like Stream Chat for live chats or Stream Activity Feeds for creating engaging activity feeds.

In this tutorial, we will be creating a live chat app using Stream Chat and a backend microservice exposed through Kong's API gateway.

Prerequisites

Before you proceed with this tutorial, make sure you have Docker, Node.js, and npm or yarn installed on your machine. We'll be building the frontend with Svelte and the backend with Express. Both are chosen because of their simplicity and so that you can understand and follow along even if this is your first encounter with them. Being minimalist tools, they don't distract from what's going on.

Sign up for Stream Chat

Visit this link to create a free Stream account or login to your existing account.

Once you’re logged in, you can use the app that's automatically created for you. Or, if you prefer, go to the dashboard, hit the blue “Create App” button at the top right of the screen and give your app a name as shown below:

In the App Access Keys section at the bottom, copy your Key and Secret for use later.

Kong Setup

We'll be setting up Kong using Docker to keep our local machine clean and free of dependencies, and using Docker ensures that the steps are the same for all platforms.

We need to create a Docker network for Kong and our microservices, then setup Kong's database where its configurations will be stored, and start-up Kong after that.

You can verify that Kong is running with:

1$ curl -i http://localhost:8001/

For Kong to know about our microservice, we need to configure the microservice and tell Kong how to route requests to our app. But, we first have to create the microservice.

Setting up the Chat Microservice

Let's create our folder structure, initialize the project, and install the needed dependencies:

After that, create a file called index.js in the backend directory and paste in the code below:

We have two routes. The /token endpoint accepts a username and generates a new token using the Stream Chat Node.js SDK, as we need to authenticate any new users before they can gain access. The /ping endpoint is to check if the server is running.

Create a .env file in the current directory (backend) and add your key and secret you copied from your Stream dashboard:

In the scripts section of package.json in the backend directory, add a start command to run the server as shown below:

Start the server with:

1$ npm start

Now that we've successfully written our backend microservice let's Dockerize it so Kong can manage it.

Add a Dockerfile in the backend directory and paste in:

Then, in the root directory (kongchat) add a docker-compose.yml file and paste in:

With this, we can run our backend service using:

1$ docker-compose up -d

Or, if you prefer it to run in the foreground:

1$ docker-compose up

Registering Our Microservice With Kong

Now our back-end microservice is up and running; we need to tell Kong about it. To do so, we need to know its IP address on the kong-net network. We can find that out by running:

My microservice IP address, for example, is 172.19.0.4, as seen from the IPv4Address key of the Containers field. I omitted the irrelevant parts of the output.

Now we have our IP address in hand; we register it with Kong by making a POST request to Kong's services endpoint:

Now Kong knows about our microservice. We then need to tell Kong what requests to route to our microservice:

With that, we just told Kong to route GET and POST requests made to /api/kongchat to our microservice.

We can check that Kong is correctly routing our API requests to our microservice by sending a request to /ping:

Since we'll be communicating with Kong from the browser, we need to turn on the CORS plugin for our service:

Creating Our Frontend

In the frontend directory, we created earlier, run:

We're using Tailwind CSS for our styling. So let's integrate it into our development pipeline.
In postcss.config.js, paste in:

Replace the contents of rollup.config.js with:

Our changes complete the setup of our CSS pre-processing and inject our environment variables for use in the app.

Modify the style tag of App.svelte as below:

That's all for our CSS pre-processing. Let's dive into the mechanism of connecting to our proxied microservice.

When a user first loads the app, we want to show the login page below:

When the user types a username and clicks on Sign in, we want to show the chat window like the example below:

The contents of our App.svelte is shown below:

Let's go through the code.

At the beginning of our component's template, we have the app name and an indicator that shows if our microservice is up and running:

We call the /ping endpoint we created on the microservice using pingService() at intervals determined by pingInterval.

When the user first opens the app (s)he is not logged in (loggedIn is false) so we show the login form:

Submitting the login form will call joinChat() which sends a request to the Kong gateway to get a token. When the token is returned, we initialize Stream Chat (initializeStreamChat()) and our messaging channel (initializeChannel()), then we set loggedIn to true, retrieve previous messages (if any) and register a listener for new messages to the channel.
We then show the chat window for logged in users:

When the Send button is clicked, we publish the contents of message to the channel and empty it after that, and Stream Chat ensures that all registered clients get the newly published message.

Demo

Open the app in different browser windows, log in with different usernames, and you can send messages between the logged-in users as shown in the images below:

Conclusion

You can find out more about Stream Chat and Kong by going through their documentation. The source code for this tutorial is hosted on GitHub.