How to build a real-time chat app

Create a real time chat application that utilises some of the most cutting edge front end technology available today.

How o build a chat application

What we're going to build

Follow this tutorial to build a real-time chat application. Once you download and install the Slack application to your PC, laptop and/or phone devices, allow anyone using the web-based chat app to instantly message you and get notified immediately through any of the downloaded Slack apps on your devices.

The best part is it's completely free. You don't have to make a purchase to complete this tutorial.

Contents

Technology stack

Overview of concepts

A brief introduction to some core concepts. Feel free to skip ahead if you are familiar with some of the following concepts. If you aren't familiar with these, I highly recommend reading through each to understand the underlying strategies that the frameworks in this tutorial are based on. This will help in understanding the motivations behind each approach.

Read about Redux data flow architecture

Overview: GraphQL API schemas and the redux data store

State in applications can be managed via a Redux data store. GraphQL is concerned with defining the types of data that can be held in the Redux store. A GraphQL schema will define the shape of objects that need to be created and sent to the client (web-browser) from the server. Typically just one endpoint is needed for GraphQL to serve all types of data.

A customised request can be sent from the client to the GraphQL endpoint. This empowers applications to retrieve all data needed in one concise asynchronous request, which maps very well to user events. GraphQL will then analyse the request and attempt to start building a response that fulfills the description of data specified in the request. Data can be retrieved from a database, session, another service or multiple services to build a normalised response Graph for clients to consume. The great thing is that the shape of a response is purposefully designed to look very similar to the shape of the request it was responding to.

Things you'll need:

Prior knowledge

Software

Software and adjacent system setup

We will need to setup some software and third-party services before we can start development.

Slack

If you haven't got a Slack user account, you'll need to create one at: https://api.slack.com/apps and create a new Slack workspace (this will require several steps including email verification but should be pretty straight forward). When creating the workspace, make sure to choose the Free option.

Once your workspace has been created, go back to https://api.slack.com/apps and click 'Create an app'. Type your app name and select your new workspace. Once you've created the app, make sure your web app is selected (this will be indicated by the name shown in the top right corner).

Navigate to the 'Basic Information' page from the left-hand navigation and click 'Add features and functionality'. Click 'Bots' and on the next page click 'Add a bot user'. Enter the details you want for the bot (can leave defaults) and click 'Add Bot User'.

In the left column navigate to the 'OAuth & Permissions' and scroll down to the section 'Scopes'. Click 'Add an OAuth Scope', then search and add the following scopes:

  • bot
  • channels:history
  • channels:read
  • channels:write
  • chat:write:bot
  • chat:write:user
  • users:read

Scroll back to the top of the page, click 'Install App to Workspace', then 'Allow' permissions requested.

Once you've added the correct permissions for the bot, navigate back to the 'OAuth & Permissions' page, you'll now be able to see two tokens associated with your new app, an 'OAuth Access Token' and 'Bot User OAuth Access Token'.

Before running your GraphQL API each time, make sure the following environment variables exists

Copy the 'OAuth Access Token' and set this as the environment variable SLACK_WEB_ACCESS_TOKEN.

The quickest way would be to export the variable in the terminal window, replacing <Your OAuth Access Token> with your new code:

export SLACK_WEB_ACCESS_TOKEN=<Your OAuth Access Token>

Copy the 'Bot User OAuth Access Token' and set this as the environment variable SLACK_RTM_ACCESS_TOKEN.

Again, you can export the variable in the terminal window, replacing <Bot User OAuth Access Token> with your new code:

export SLACK_RTM_ACCESS_TOKEN=<Bot User OAuth Access Token>

One variable will be needed for HTTP access to certain resources and the other for real-time-messaging communication over Websockets.

In your email inbox that you used to sign up with Slack, you should have been given a URL for your workspace. Make note of this as well as your user name and password. These will be needed to log in to Slack to see messages sent from users of the application we are going to build.

Our app

One of our aims for the project is to separate as many parts of the application as possible to enable us to easily swap and change them as and when we want.

It's worth taking some time to consider what a message actually is, the relationship it has to the person who created it. By accurately defining what a message consists of, we can find an overlapping scope of requirements to easily identify potential compatibility for integration of other third party services such as WhatsApp or Facebook.

We will write our application to allow for this flexibility of integration.

Part 1

App setup

First we will need to create a folder for our project to hold our front end web application and the web api server that will serve data to our application.

After you've created your project folder, open a command-line or terminal window and change directory to your new project folder

cd <project-folder-path>

(replace <project-folder-path> with a path to your new directory).

Create the Angular app

Angular CLI

The Angular CLI will be the framework we'll use to build out the front end application. To install, run the following command:

npm install -g @angular/cli

Now you have the Angular CLI installed, run the following Angular CLI command to setup a new workspace:

ng new

Call the project web-app, opt for y to add routing and choose SCSS as the CSS preprocessor.

The Angular CLI will create and setup a directory after your project name ready for you to build your Angular application. Inside there are alot files created. The CLI will setup a git repository for version control, initialise an npm package for managing project dependencies, include numerous configuration files, create a directory called 'src' with some essential Angular application files with more configuration files that you can customise, create an assets folder for saving images, fonts and other static media and an environments folder for storing enviornment configurations for deployment.

This will give you everything you need to get started developing with Angular. For more further reading about the artefacts created by the Angular CLI refer to the Angular CLI documentation

Test and confirm you have everything setup correctly by running the application with the following command.

ng serve

You should get a notification that says Angular has Compiled successfully. You'll now be able see a blank application in your web browser that says something like 'web-app is running' by navigating to http://localhost:4200.

Read A brief overview of Angular to get to grips with some Angular core concepts.

Apollo Client

We will use a framework for managing our application state. Apollo Client for Angular will manage API requests and responses from the server and primarily handle delivery of data to and from the application. Apollo uses GraphQL to describe the shape of application data. Add this by using the Angular CLI command:

ng add apollo-angular

This command will install the Apollo Angular client, add a new module file to the src/app directory called graphql.module.ts and will update the app.module.ts file to include this new GraphQL module.

Open the new graphql.module.ts file and change the url constant to the following:

web-app/src/app/graphql.module.ts
const uri = 'http://localhost:4123/graphql';

You may have guessed, this will be the URL location of our GraphQL server. All we need to do is specify one endpoint location to communicate via HTTP with the server for data. Later we will set up a separate websocket connection for real-time instant messaging.