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.

Messaging Angular app source code

Messaging GraphQL api source code

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

• Part 1: App setup
• Part 2: Setup GraphQL with Apollo Server
• Part 3: Retrieve a list of messages from Slack to build a GraphQL query
• Part 4: Display a list of messages with Angular
• Part 5: Use a GraphQL query to populate a list of messages in an Angular component
• Part 6: Create and POST a new message using a GraphQL Mutation
• Part 7: Create an Angular component to send a message to the GraphQL API
• Part 8: Create a GraphQL Subscription to send real-time message
• Part 9: Integrate GraphQL Subscriptions into Angular components to build a list of messages
• Part 10: Animate new incoming messages in an Angular component

Technology stack

• Angular 8 (Front end app framework)
• Apollo (State management)
• GraphQL (Data schema)
• Slack API & SDK (Third party services and installable applications)

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

• Basic knowledge of HTML, CSS & CSS preprocessors
• A fair grasp of Javascript fundamentals. Further reading - Speaking Javascript by Dr. Axel Rauschmayer
• If you haven't written a web app using Angular before, I recommend following the "Tour of heroes" tutorial from the official Angular website first.

Software

• NodeJS version 10 or later
• A text editor such as Visual Studio Code, Sublime or Webstorm
• Slack messaging app(s) to test our work. Installed to your phone and/or laptop

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.

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 artifacts 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.

Next we will create the GraphQL API