Sharing Top Content from the Angular-sphere.

AngularJS Chat Tutorial: Realtime User List with User Presence (3/6)

Building an #AngularJS Chat App with a User Roster Using Presence API  #javascript

  • In Part 2: Building an AngularJS Chat App Using History API with Infinite Scroll, we learned how to add the pull-to-refresh and endless scrolling feature (loading previous messages when a user scrolls to the top of the screen).
  • Here’s what the infrastructure looked like: – – In the next steps, we will be adding a realtime user roster to our chat app while introducing an online-user-list component that get the online users from its User service.
  • Below is a picture of how the online-user-list component, the user service and PubNub will interact together: – – If you haven’t followed Part 2: Building an AngularJS Chat App Using History API with Infinite Scroll tutorial, get started by cloning the chat project in the state where we stopped….
  • Through our User service, we will be able to get the list of online users and have this list updated in real-time each time someone joins or leaves the chat app.
  • You now have a complete chat app with previous messages and infinite scroll and a user roster!

Learn how to build a complete AngularJS chat app with a realtime user roster

Welcome to Part 3 of our PubNub series on how to build a complete chat app with PubNub’s AngularJS SDK!

In Part 2: Building an AngularJS Chat App Using History API with Infinite Scroll, we learned how to add the pull-to-refresh and endless scrolling feature (loading previous messages when a user scrolls to the top of the screen).

In this tutorial, we will now walk through how to add a realtime roster that shows the people who are currently online and automatically updates when someone joins or leaves the chat room.

Here’s how our chat app will look like at the end of this tutorial:

In the last tutorial, we built a chat app with infinite scroll consisting of a UI split in components and a Message factory, which directly communicated with PubNub.

Here’s what the infrastructure looked like:

In the next steps, we will be adding a realtime user roster to our chat app while introducing an online-user-list component that get the online users from its User service.

Like a Lego blocks, we can simply add features to our chat app by adding components to our chat view.

Below is a picture of how the online-user-list component, the user service and PubNub will interact together:

AngularJS Chat Tutorial: Realtime User List with User Presence (3/6)

Comments are closed, but trackbacks and pingbacks are open.