Build

AngularJS Chat Tutorial: Sending and Receiving Messages

3 min read Michael Carroll on Jul 29, 2019
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

This tutorial walks through building chat with our core pub/sub technology (and other PubNub features). We recently launched ChatEngine, a new framework for rapid chat development. Check out the ChatE...

This tutorial walks through building chat with our core pub/sub technology (and other PubNub features). We recently launched ChatEngine, a new framework for rapid chat development.

Check out the PubNub Chat AngularJS tutorial. →

Welcome to our 6-part tutorial on building a feature-rich chat application with AngularJS, a JavaScript library for building web and mobile apps, and PubNub, providing APIs and infrastructure for building real-time applications.

The PubNub AngularJS SDK simplifies the integration of PubNub into your web application with a similar API to the Javascript SDK. The SDK also provides support for the AngularJS events pattern and makes it easier to listen to PubNub events in your AngularJS app.

Tutorial Overview

This post is Part One, and work your way through the entire tutorial. By the end, you’ll have a fully-functional AngularJS chat application powered by PubNub. You can navigate between parts with the links below, or the left sidebar.

In this section, we’ll focus on PubNub’s core features: publishing and subscribing for sending and receiving messages in real time.

Open the demo Demo:
The demo of the AngularJS chat app is available here
Source code Source code:
The source code is available in the github repository

Installing PubNub AngularJS SDK

To get started, you can either use a package manager like npm or Bower. Another option is to manually include a script tag with the library from the PubNub CDN.

Using the PubNub CDN:

Using NPM:

npm install --save pubnub pubnub-angular

Using Bower:

bower install --save pubnub pubnub-angular

Messaging Basics

Now, let’s create a simple chat room – each user is given a random identifier and can chat with other anonymous users.

Initiating PubNub

In your Angular app, include this quick snippet to get started:

We’ve set up the PubNub app keys that you can get by signing onto the website, which you can then go create an app. We provided our own UUID  to identify the user for the PubNub network. Don’t worry if you forget to set the UUID. The PubNub SDK will generate one for you.

 

Sending messages

To send messages, let’s add a sendMessage() function in the Chat controller that will send the messages over the PubNub network.

We continue by adding a field and a button in our html template to trigger the sendMessage() function.

 

Receiving and displaying messages

Now that the messages are sent out, let’s receive them. In order to do that, we need to subscribe to the messages-channel channel and to react on the callback for when the message is sent and store it in the global messages array.


Now we can display the messages by iterating over them. It will be displayed on the page each time a new message is sent.

That’s it! You can find more information in the official PubNub AngularJS SDK documentation.

In the next tutorial, we will walk through how to improve our chat app for loading the previous messages when you initialize the app and when you scroll to the top of the screen. Also, we will walk through all of the best AngularJS practices to build a well-structured AngularJS app. Here’s how our chat app will look like:

AngularJS chat app with infinite scroll

See you in Part 2!

More from PubNub

How to Add a Notification Badge to Icons in React Native
Real-time Chat BlogDec 19, 20226 min read

How to Add a Notification Badge to Icons in React Native

Display real-time notification badges with PubNub and React Native to display important information and bring users back to your...

Michael Carroll

Michael Carroll

Digital Twins and the Future of Real-Time Data
InsightsDec 6, 20224 min read

Digital Twins and the Future of Real-Time Data

The concept of Digital Twins has evolved over the last two decades, however, one thing remains the same: the need for real-time...

Michael Carroll

Michael Carroll

How Many Text Characters Fit in a 32KB PubNub Message?
Real-time Chat BlogNov 24, 20224 min read

How Many Text Characters Fit in a 32KB PubNub Message?

Learn the ins-and-outs of PubNub message size and get a better idea of how many text characters fit in a single message.

Michael Carroll

Michael Carroll