Build a realtime user presence system with Angular 4 and Firebase. Easily keep track of status like online, offline, and away using the magic of Angular and RxJS. Inspired by Slack's user presence system. 

Full Lesson: https://angularfirebase.com/lessons/user-presenece-system-in-realtime/

New to Firebase Auth? Checkout this lesson: https://angularfirebase.com/lessons/angular-firebase-authentication-tutorial-oauth/
2024-02-04T08:12:01.291Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
273cb5d3-26ab-4f90-a68a-d36ba0b2263c
5567ffa55b8974180fa320134a38cd23f0d061d301d85b6ab8f9f227a6998660
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
A real time presence system allows users to know whether or not their fellow users are online, offline, or away in some other idle status.
In this episode we're going to use Slack as our inspiration to build a system that will show the status of users throughout the app.
We're building a fully fledged system that will be able to detect whether or not a user is engaging with an app based on a timer and also whether or not a user has closed the app and update the status on each of these events.
At this point, I'm assuming you have a basic authentication system in place with AngularFire 2.
If not, I've added a link in the description that discusses that topic more extensively.
The first thing we wanna do is see if the user has an active connection to the Firebase real time data base.
Firebase keeps track of this information in a secret location called info slash connected, which we can subscribe to just like anything else in the database.
This tells us whether the current client has a connection to the database.
So let's go into our auth service and put this to use.
First, we'll import the AngularFire database as well as AngularFire auth and the main Firebase SDK.
Then we'll set a variable for the current user's user ID.
And inside the constructor, we'll subscribe to the AngularFire auth state, which is just the currently logged in user.
And if we have a user, we're going to set their user ID on the service and also subscribe to that connection data that I just described earlier.
When we actually determine the current user status, we'll save it as the status property under their user ID in the real time database.
We're going to update the status frequently, so we'll create a helper function that we can just pass the status as an argument and that will update the database.
So anytime we detect a status change, we can call this helper and the database gets updated.
From there, we can create another function that will subscribe to the info slash connected data, which will just be a boolean true or false.
If it's true, we'll set the user status to online, and if it's false, we'll set it to offline.
Then we call our helper function and subscribe and we're all set.
If we go to the app, we can see that when we log in, we have an active connection to Firebase so we Play the online status.
This works okay when a user logs in, but if they close the window, it's not going to update the status to offline.
Thankfully, Firebase has an on disconnect callback that we can use to listen for when the user disconnects from the database.
To use this function, we need to interact with the Firebase SDK directly.
Let's add another function to our constructor, this time called update on disconnect.
It works by making a reference to the user status in the database and then calls the on disconnect function and then updates the status to offline.
So this function will only run when the database connection is disconnected.
In the app, we have a logged in user on the left and a non logged in user on the right.
When the logged in user closes their browser window, it ends the database connection and their status is updated to offline.
So what if a user has the app open, but they're not actively using it?
For that, we wanna set a third status called away.
We can manage that state by listening for mouse events in the browser and then resetting a timer each time a new mouse event occurs.
If that timer expires, then we can set the status to away.
So we'll set up a couple subscriptions, one for the mouse event and one for the timer itself.
Then we'll create another function called update on idle.
Inside this function, we create an observable that's listening to mouse events in the DOM.
Mouse events happen frequently, so we want to throttle them to happen only every 2 seconds.
If you imagine each circle representing a mouse event, They'll be grouped into chunks and only the first one that occurred in that 2 second period will be emitted.
When we get a mouse event, we can go ahead and update The status to online because we know the user's engaged.
And we also wanna reset the timer which is counting down to set the user to away status.
The timer itself is a subscription.
So if there's one existing in the app, we want to unsubscribe from it.
Then we create a new timer by calling observable dot Timer, this time we're setting it to 5,000 milliseconds.
In real life, you probably wanna set it a lot longer than that.
Then when that timer runs out, it'll set the status to away.
And on a final note, you probably want to end these subscriptions when you no longer need them.
For example, if a user signs out, we'll go ahead and unsubscribe from the mouse events as well as the timer.
If we go into the app and just let the mouse sit idle, we can see after 5 seconds the status gets updated to away.
If we go back into the app, it immediately updates back to online.
If I click log out, then it'll update to offline.
Now let's go ahead and build the actual component that the user sees on the front end.
So here I have a list of users that I pulled from the database, And I'm going to pass the user status to a child component called user status.
We do this by using the input decorator from Angular.
Inside the user status component typescript, we just import input and then declare a variable called status with that decorator.
This situation is a perfect time to use the NG switch directive which works just like a switch operator in JavaScript or any other programming language.
We pass the user status to NG Switch and then we can use an NG Switch case to display different templates depending on what the user status is.
So if the user is online, we give it a green success CSS class.
If they're offline, we give it a red CSS class and so on.
This makes it easy to add your own custom icons or whatever kind of presentation you wanna do here.
You can also add an NG switch default which will ensure that something Displays if none of the statuses match what you have in the Switch cases.
That's it for building a user presence system with Angular 4 and Firebase.
If this video helped you, please like and subscribe.
And if you want access to exclusive content and 1 on 1 project consulting, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as access to our pro members channel on Slack.
Thanks for watching and I'll talk to you soon.

Speaker 0: A real time presence system allows users to know whether or not their fellow users are online, offline, or away in some other idle status. In this episode we're going to use Slack as our inspiration to build a system that will show the status of users throughout the app. We're building a fully fledged system that will be able to detect whether or not a user is engaging with an app based on a timer and also whether or not a user has closed the app and update the status on each of these events. At this point, I'm assuming you have a basic authentication system in place with AngularFire 2. If not, I've added a link in the description that discusses that topic more extensively.

The first thing we wanna do is see if the user has an active connection to the Firebase real time data base. Firebase keeps track of this information in a secret location called info slash connected, which we can subscribe to just like anything else in the database. This tells us whether the current client has a connection to the database. So let's go into our auth service and put this to use. First, we'll import the AngularFire database as well as AngularFire auth and the main Firebase SDK.

Then we'll set a variable for the current user's user ID. And inside the constructor, we'll subscribe to the AngularFire auth state, which is just the currently logged in user. And if we have a user, we're going to set their user ID on the service and also subscribe to that connection data that I just described earlier. When we actually determine the current user status, we'll save it as the status property under their user ID in the real time database. We're going to update the status frequently, so we'll create a helper function that we can just pass the status as an argument and that will update the database.

So anytime we detect a status change, we can call this helper and the database gets updated. From there, we can create another function that will subscribe to the info slash connected data, which will just be a boolean true or false. If it's true, we'll set the user status to online, and if it's false, we'll set it to offline. Then we call our helper function and subscribe and we're all set. If we go to the app, we can see that when we log in, we have an active connection to Firebase so we Play the online status.

This works okay when a user logs in, but if they close the window, it's not going to update the status to offline. Thankfully, Firebase has an on disconnect callback that we can use to listen for when the user disconnects from the database. To use this function, we need to interact with the Firebase SDK directly. Let's add another function to our constructor, this time called update on disconnect. It works by making a reference to the user status in the database and then calls the on disconnect function and then updates the status to offline.

So this function will only run when the database connection is disconnected. In the app, we have a logged in user on the left and a non logged in user on the right. When the logged in user closes their browser window, it ends the database connection and their status is updated to offline. So what if a user has the app open, but they're not actively using it? For that, we wanna set a third status called away.

We can manage that state by listening for mouse events in the browser and then resetting a timer each time a new mouse event occurs. If that timer expires, then we can set the status to away. So we'll set up a couple subscriptions, one for the mouse event and one for the timer itself. Then we'll create another function called update on idle. Inside this function, we create an observable that's listening to mouse events in the DOM.

Mouse events happen frequently, so we want to throttle them to happen only every 2 seconds. If you imagine each circle representing a mouse event, They'll be grouped into chunks and only the first one that occurred in that 2 second period will be emitted. When we get a mouse event, we can go ahead and update The status to online because we know the user's engaged. And we also wanna reset the timer which is counting down to set the user to away status. The timer itself is a subscription.

So if there's one existing in the app, we want to unsubscribe from it. Then we create a new timer by calling observable dot Timer, this time we're setting it to 5,000 milliseconds. In real life, you probably wanna set it a lot longer than that. Then when that timer runs out, it'll set the status to away. And on a final note, you probably want to end these subscriptions when you no longer need them.

For example, if a user signs out, we'll go ahead and unsubscribe from the mouse events as well as the timer. If we go into the app and just let the mouse sit idle, we can see after 5 seconds the status gets updated to away. If we go back into the app, it immediately updates back to online. If I click log out, then it'll update to offline. Now let's go ahead and build the actual component that the user sees on the front end.

So here I have a list of users that I pulled from the database, And I'm going to pass the user status to a child component called user status. We do this by using the input decorator from Angular. Inside the user status component typescript, we just import input and then declare a variable called status with that decorator. This situation is a perfect time to use the NG switch directive which works just like a switch operator in JavaScript or any other programming language. We pass the user status to NG Switch and then we can use an NG Switch case to display different templates depending on what the user status is.

So if the user is online, we give it a green success CSS class. If they're offline, we give it a red CSS class and so on. This makes it easy to add your own custom icons or whatever kind of presentation you wanna do here. You can also add an NG switch default which will ensure that something Displays if none of the statuses match what you have in the Switch cases. That's it for building a user presence system with Angular 4 and Firebase.

If this video helped you, please like and subscribe. And if you want access to exclusive content and 1 on 1 project consulting, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to our pro members channel on Slack. Thanks for watching and I'll talk to you soon.
A real time presence system allows users to know whether or not their fellow users are online, offline, or away in some other idle status. In this episode we're going to use Slack as our inspiration to build a system that will show the status of users throughout the app. We're building a fully fledged system that will be able to detect whether or not a user is engaging with an app based on a timer and also whether or not a user has closed the app and update the status on each of these events.
networking
software development
modeling
software
At this point, I'm assuming you have a basic authentication system in place with AngularFire 2. If not, I've added a link in the description that discusses that topic more extensively. The first thing we wanna do is see if the user has an active connection to the Firebase real time data base. Firebase keeps track of this information in a secret location called info slash connected, which we can subscribe to just like anything else in the database.
This tells us whether the current client has a connection to the database. So let's go into our auth service and put this to use. First, we'll import the AngularFire database as well as AngularFire auth and the main Firebase SDK. Then we'll set a variable for the current user's user ID.
databases
And inside the constructor, we'll subscribe to the AngularFire auth state, which is just the currently logged in user. And if we have a user, we're going to set their user ID on the service and also subscribe to that connection data that I just described earlier. When we actually determine the current user status, we'll save it as the status property under their user ID in the real time database. We're going to update the status frequently, so we'll create a helper function that we can just pass the status as an argument and that will update the database. So anytime we detect a status change, we can call this helper and the database gets updated. From there, we can create another function that will subscribe to the info slash connected data, which will just be a boolean true or false. If it's true, we'll set the user status to online, and if it's false, we'll set it to offline. Then we call our helper function and subscribe and we're all set. If we go to the app, we can see that when we log in, we have an active connection to Firebase so we Play the online status. This works okay when a user logs in, but if they close the window, it's not going to update the status to offline. Thankfully, Firebase has an on disconnect callback that we can use to listen for when the user disconnects from the database. To use this function, we need to interact with the Firebase SDK directly. Let's add another function to our constructor, this time called update on disconnect. It works by making a reference to the user status in the database and then calls the on disconnect function and then updates the status to offline.
So this function will only run when the database connection is disconnected. In the app, we have a logged in user on the left and a non logged in user on the right. When the logged in user closes their browser window, it ends the database connection and their status is updated to offline.
databases
So what if a user has the app open, but they're not actively using it? For that, we wanna set a third status called away. We can manage that state by listening for mouse events in the browser and then resetting a timer each time a new mouse event occurs. If that timer expires, then we can set the status to away. So we'll set up a couple subscriptions, one for the mouse event and one for the timer itself. Then we'll create another function called update on idle. Inside this function, we create an observable that's listening to mouse events in the DOM. Mouse events happen frequently, so we want to throttle them to happen only every 2 seconds. If you imagine each circle representing a mouse event, They'll be grouped into chunks and only the first one that occurred in that 2 second period will be emitted. When we get a mouse event, we can go ahead and update The status to online because we know the user's engaged. And we also wanna reset the timer which is counting down to set the user to away status. The timer itself is a subscription. So if there's one existing in the app, we want to unsubscribe from it. Then we create a new timer by calling observable dot Timer, this time we're setting it to 5,000 milliseconds. In real life, you probably wanna set it a lot longer than that. Then when that timer runs out, it'll set the status to away. And on a final note, you probably want to end these subscriptions when you no longer need them. For example, if a user signs out, we'll go ahead and unsubscribe from the mouse events as well as the timer. If we go into the app and just let the mouse sit idle, we can see after 5 seconds the status gets updated to away. If we go back into the app, it immediately updates back to online. If I click log out, then it'll update to offline. Now let's go ahead and build the actual component that the user sees on the front end. So here I have a list of users that I pulled from the database, And I'm going to pass the user status to a child component called user status. We do this by using the input decorator from Angular. Inside the user status component typescript, we just import input and then declare a variable called status with that decorator. This situation is a perfect time to use the NG switch directive which works just like a switch operator in JavaScript or any other programming language. We pass the user status to NG Switch and then we can use an NG Switch case to display different templates depending on what the user status is. So if the user is online, we give it a green success CSS class. If they're offline, we give it a red CSS class and so on. This makes it easy to add your own custom icons or whatever kind of presentation you wanna do here. You can also add an NG switch default which will ensure that something Displays if none of the statuses match what you have in the Switch cases.
That's it for building a user presence system with Angular 4 and Firebase. If this video helped you, please like and subscribe. And if you want access to exclusive content and 1 on 1 project consulting, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to our pro members channel on Slack. Thanks for watching and I'll talk to you soon.
books
youtube
publishing
A real time presence system allows users to know whether or not their fellow users are online, offline, or away in some other idle status. In this episode we're going to use Slack as our inspiration to build a system that will show the status of users throughout the app. We're building a fully fledged system that will be able to detect whether or not a user is engaging with an app based on a timer and also whether or not a user has closed the app and update the status on each of these events. At this point, I'm assuming you have a basic authentication system in place with AngularFire 2. If not, I've added a link in the description that discusses that topic more extensively. The first thing we wanna do is see if the user has an active connection to the Firebase real time data base. Firebase keeps track of this information in a secret location called info slash connected, which we can subscribe to just like anything else in the database. This tells us whether the current client has a connection to the database. So let's go into our auth service and put this to use. First, we'll import the AngularFire database as well as AngularFire auth and the main Firebase SDK. Then we'll set a variable for the current user's user ID. And inside the constructor, we'll subscribe to the AngularFire auth state, which is just the currently logged in user. And if we have a user, we're going to set their user ID on the service and also subscribe to that connection data that I just described earlier. When we actually determine the current user status, we'll save it as the status property under their user ID in the real time database. We're going to update the status frequently, so we'll create a helper function that we can just pass the status as an argument and that will update the database. So anytime we detect a status change, we can call this helper and the database gets updated. From there, we can create another function that will subscribe to the info slash connected data, which will just be a boolean true or false. If it's true, we'll set the user status to online, and if it's false, we'll set it to offline. Then we call our helper function and subscribe and we're all set. If we go to the app, we can see that when we log in, we have an active connection to Firebase so we Play the online status. This works okay when a user logs in, but if they close the window, it's not going to update the status to offline. Thankfully, Firebase has an on disconnect callback that we can use to listen for when the user disconnects from the database. To use this function, we need to interact with the Firebase SDK directly. Let's add another function to our constructor, this time called update on disconnect. It works by making a reference to the user status in the database and then calls the on disconnect function and then updates the status to offline. So this function will only run when the database connection is disconnected. In the app, we have a logged in user on the left and a non logged in user on the right. When the logged in user closes their browser window, it ends the database connection and their status is updated to offline. So what if a user has the app open, but they're not actively using it? For that, we wanna set a third status called away. We can manage that state by listening for mouse events in the browser and then resetting a timer each time a new mouse event occurs. If that timer expires, then we can set the status to away. So we'll set up a couple subscriptions, one for the mouse event and one for the timer itself. Then we'll create another function called update on idle. Inside this function, we create an observable that's listening to mouse events in the DOM. Mouse events happen frequently, so we want to throttle them to happen only every 2 seconds. If you imagine each circle representing a mouse event, They'll be grouped into chunks and only the first one that occurred in that 2 second period will be emitted. When we get a mouse event, we can go ahead and update The status to online because we know the user's engaged. And we also wanna reset the timer which is counting down to set the user to away status. The timer itself is a subscription. So if there's one existing in the app, we want to unsubscribe from it. Then we create a new timer by calling observable dot Timer, this time we're setting it to 5,000 milliseconds. In real life, you probably wanna set it a lot longer than that. Then when that timer runs out, it'll set the status to away. And on a final note, you probably want to end these subscriptions when you no longer need them. For example, if a user signs out, we'll go ahead and unsubscribe from the mouse events as well as the timer. If we go into the app and just let the mouse sit idle, we can see after 5 seconds the status gets updated to away. If we go back into the app, it immediately updates back to online. If I click log out, then it'll update to offline. Now let's go ahead and build the actual component that the user sees on the front end. So here I have a list of users that I pulled from the database, And I'm going to pass the user status to a child component called user status. We do this by using the input decorator from Angular. Inside the user status component typescript, we just import input and then declare a variable called status with that decorator. This situation is a perfect time to use the NG switch directive which works just like a switch operator in JavaScript or any other programming language. We pass the user status to NG Switch and then we can use an NG Switch case to display different templates depending on what the user status is. So if the user is online, we give it a green success CSS class. If they're offline, we give it a red CSS class and so on. This makes it easy to add your own custom icons or whatever kind of presentation you wanna do here. You can also add an NG switch default which will ensure that something Displays if none of the statuses match what you have in the Switch cases. That's it for building a user presence system with Angular 4 and Firebase. If this video helped you, please like and subscribe. And if you want access to exclusive content and 1 on 1 project consulting, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to our pro members channel on Slack. Thanks for watching and I'll talk to you soon.
A
a
real
real
time
time
presence
presence
system
system
allows
allows
users
users
to
to
know
know
whether
whether
or
or
not
not
their
their
fellow
fellow
users
users
are
are
online,
online
offline,
offline
or
or
away
away
in
in
some
some
other
other
idle
idle
status.
status
In
in
this
this
episode
episode
we're
we're
going
going
to
to
use
use
Slack
slack
as
as
our
our
inspiration
inspiration
to
to
build
build
a
a
system
system
that
that
will
will
show
show
the
the
status
status
of
of
users
users
throughout
throughout
the
the
app.
app
We're
we're
building
building
a
a
fully
fully
fledged
fledged
system
system
that
that
will
will
be
be
able
able
to
to
detect
detect
whether
whether
or
or
not
not
a
a
user
user
is
is
engaging
engaging
with
with
an
an
app
app
based
based
on
on
a
a
timer
timer
and
and
also
also
whether
whether
or
or
not
not
a
a
user
user
has
has
closed
closed
the
the
app
app
and
and
update
update
the
the
status
status
on
on
each
each
of
of
these
these
events.
events
At
at
this
this
point,
point
I'm
i'm
assuming
assuming
you
you
have
have
a
a
basic
basic
authentication
authentication
system
system
in
in
place
place
with
with
AngularFire
angularfire
2.
2
If
if
not,
not
I've
i've
added
added
a
a
link
link
in
in
the
the
description
description
that
that
discusses
discusses
that
that
topic
topic
more
more
extensively.
extensively
The
the
first
first
thing
thing
we
we
wanna
wanna
do
do
is
is
see
see
if
if
the
the
user
user
has
has
an
an
active
active
connection
connection
to
to
the
the
Firebase
firebase
real
real
time
time
data
data
base.
base
Firebase
firebase
keeps
keeps
track
track
of
of
this
this
information
information
in
in
a
a
secret
secret
location
location
called
called
info
info
slash
slash
connected,
connected
which
which
we
we
can
can
subscribe
subscribe
to
to
just
just
like
like
anything
anything
else
else
in
in
the
the
database.
database
This
this
tells
tells
us
us
whether
whether
the
the
current
current
client
client
has
has
a
a
connection
connection
to
to
the
the
database.
database
So
so
let's
let's
go
go
into
into
our
our
auth
auth
service
service
and
and
put
put
this
this
to
to
use.
use
First,
first
we'll
we'll
import
import
the
the
AngularFire
angularfire
database
database
as
as
well
well
as
as
AngularFire
angularfire
auth
auth
and
and
the
the
main
main
Firebase
firebase
SDK.
sdk
Then
then
we'll
we'll
set
set
a
a
variable
variable
for
for
the
the
current
current
user's
user's
user
user
ID.
id
And
and
inside
inside
the
the
constructor,
constructor
we'll
we'll
subscribe
subscribe
to
to
the
the
AngularFire
angularfire
auth
auth
state,
state
which
which
is
is
just
just
the
the
currently
currently
logged
logged
in
in
user.
user
And
and
if
if
we
we
have
have
a
a
user,
user
we're
we're
going
going
to
to
set
set
their
their
user
user
ID
id
on
on
the
the
service
service
and
and
also
also
subscribe
subscribe
to
to
that
that
connection
connection
data
data
that
that
I
i
just
just
described
described
earlier.
earlier
When
when
we
we
actually
actually
determine
determine
the
the
current
current
user
user
status,
status
we'll
we'll
save
save
it
it
as
as
the
the
status
status
property
property
under
under
their
their
user
user
ID
id
in
in
the
the
real
real
time
time
database.
database
We're
we're
going
going
to
to
update
update
the
the
status
status
frequently,
frequently
so
so
we'll
we'll
create
create
a
a
helper
helper
function
function
that
that
we
we
can
can
just
just
pass
pass
the
the
status
status
as
as
an
an
argument
argument
and
and
that
that
will
will
update
update
the
the
database.
database
So
so
anytime
anytime
we
we
detect
detect
a
a
status
status
change,
change
we
we
can
can
call
call
this
this
helper
helper
and
and
the
the
database
database
gets
gets
updated.
updated
From
from
there,
there
we
we
can
can
create
create
another
another
function
function
that
that
will
will
subscribe
subscribe
to
to
the
the
info
info
slash
slash
connected
connected
data,
data
which
which
will
will
just
just
be
be
a
a
boolean
boolean
true
true
or
or
false.
false
If
if
it's
it's
true,
true
we'll
we'll
set
set
the
the
user
user
status
status
to
to
online,
online
and
and
if
if
it's
it's
false,
false
we'll
we'll
set
set
it
it
to
to
offline.
offline
Then
then
we
we
call
call
our
our
helper
helper
function
function
and
and
subscribe
subscribe
and
and
we're
we're
all
all
set.
set
If
if
we
we
go
go
to
to
the
the
app,
app
we
we
can
can
see
see
that
that
when
when
we
we
log
log
in,
in
we
we
have
have
an
an
active
active
connection
connection
to
to
Firebase
firebase
so
so
we
we
Play
play
the
the
online
online
status.
status
This
this
works
works
okay
okay
when
when
a
a
user
user
logs
logs
in,
in
but
but
if
if
they
they
close
close
the
the
window,
window
it's
it's
not
not
going
going
to
to
update
update
the
the
status
status
to
to
offline.
offline
Thankfully,
thankfully
Firebase
firebase
has
has
an
an
on
on
disconnect
disconnect
callback
callback
that
that
we
we
can
can
use
use
to
to
listen
listen
for
for
when
when
the
the
user
user
disconnects
disconnects
from
from
the
the
database.
database
To
to
use
use
this
this
function,
function
we
we
need
need
to
to
interact
interact
with
with
the
the
Firebase
firebase
SDK
sdk
directly.
directly
Let's
let's
add
add
another
another
function
function
to
to
our
our
constructor,
constructor
this
this
time
time
called
called
update
update
on
on
disconnect.
disconnect
It
it
works
works
by
by
making
making
a
a
reference
reference
to
to
the
the
user
user
status
status
in
in
the
the
database
database
and
and
then
then
calls
calls
the
the
on
on
disconnect
disconnect
function
function
and
and
then
then
updates
updates
the
the
status
status
to
to
offline.
offline
So
so
this
this
function
function
will
will
only
only
run
run
when
when
the
the
database
database
connection
connection
is
is
disconnected.
disconnected
In
in
the
the
app,
app
we
we
have
have
a
a
logged
logged
in
in
user
user
on
on
the
the
left
left
and
and
a
a
non
non
logged
logged
in
in
user
user
on
on
the
the
right.
right
When
when
the
the
logged
logged
in
in
user
user
closes
closes
their
their
browser
browser
window,
window
it
it
ends
ends
the
the
database
database
connection
connection
and
and
their
their
status
status
is
is
updated
updated
to
to
offline.
offline
So
so
what
what
if
if
a
a
user
user
has
has
the
the
app
app
open,
open
but
but
they're
they're
not
not
actively
actively
using
using
it?
it
For
for
that,
that
we
we
wanna
wanna
set
set
a
a
third
third
status
status
called
called
away.
away
We
we
can
can
manage
manage
that
that
state
state
by
by
listening
listening
for
for
mouse
mouse
events
events
in
in
the
the
browser
browser
and
and
then
then
resetting
resetting
a
a
timer
timer
each
each
time
time
a
a
new
new
mouse
mouse
event
event
occurs.
occurs
If
if
that
that
timer
timer
expires,
expires
then
then
we
we
can
can
set
set
the
the
status
status
to
to
away.
away
So
so
we'll
we'll
set
set
up
up
a
a
couple
couple
subscriptions,
subscriptions
one
one
for
for
the
the
mouse
mouse
event
event
and
and
one
one
for
for
the
the
timer
timer
itself.
itself
Then
then
we'll
we'll
create
create
another
another
function
function
called
called
update
update
on
on
idle.
idle
Inside
inside
this
this
function,
function
we
we
create
create
an
an
observable
observable
that's
that's
listening
listening
to
to
mouse
mouse
events
events
in
in
the
the
DOM.
dom
Mouse
mouse
events
events
happen
happen
frequently,
frequently
so
so
we
we
want
want
to
to
throttle
throttle
them
them
to
to
happen
happen
only
only
every
every
2
2
seconds.
seconds
If
if
you
you
imagine
imagine
each
each
circle
circle
representing
representing
a
a
mouse
mouse
event,
event
They'll
they'll
be
be
grouped
grouped
into
into
chunks
chunks
and
and
only
only
the
the
first
first
one
one
that
that
occurred
occurred
in
in
that
that
2
2
second
second
period
period
will
will
be
be
emitted.
emitted
When
when
we
we
get
get
a
a
mouse
mouse
event,
event
we
we
can
can
go
go
ahead
ahead
and
and
update
update
The
the
status
status
to
to
online
online
because
because
we
we
know
know
the
the
user's
user's
engaged.
engaged
And
and
we
we
also
also
wanna
wanna
reset
reset
the
the
timer
timer
which
which
is
is
counting
counting
down
down
to
to
set
set
the
the
user
user
to
to
away
away
status.
status
The
the
timer
timer
itself
itself
is
is
a
a
subscription.
subscription
So
so
if
if
there's
there's
one
one
existing
existing
in
in
the
the
app,
app
we
we
want
want
to
to
unsubscribe
unsubscribe
from
from
it.
it
Then
then
we
we
create
create
a
a
new
new
timer
timer
by
by
calling
calling
observable
observable
dot
dot
Timer,
timer
this
this
time
time
we're
we're
setting
setting
it
it
to
to
5,000
5,000
milliseconds.
milliseconds
In
in
real
real
life,
life
you
you
probably
probably
wanna
wanna
set
set
it
it
a
a
lot
lot
longer
longer
than
than
that.
that
Then
then
when
when
that
that
timer
timer
runs
runs
out,
out
it'll
it'll
set
set
the
the
status
status
to
to
away.
away
And
and
on
on
a
a
final
final
note,
note
you
you
probably
probably
want
want
to
to
end
end
these
these
subscriptions
subscriptions
when
when
you
you
no
no
longer
longer
need
need
them.
them
For
for
example,
example
if
if
a
a
user
user
signs
signs
out,
out
we'll
we'll
go
go
ahead
ahead
and
and
unsubscribe
unsubscribe
from
from
the
the
mouse
mouse
events
events
as
as
well
well
as
as
the
the
timer.
timer
If
if
we
we
go
go
into
into
the
the
app
app
and
and
just
just
let
let
the
the
mouse
mouse
sit
sit
idle,
idle
we
we
can
can
see
see
after
after
5
5
seconds
seconds
the
the
status
status
gets
gets
updated
updated
to
to
away.
away
If
if
we
we
go
go
back
back
into
into
the
the
app,
app
it
it
immediately
immediately
updates
updates
back
back
to
to
online.
online
If
if
I
i
click
click
log
log
out,
out
then
then
it'll
it'll
update
update
to
to
offline.
offline
Now
now
let's
let's
go
go
ahead
ahead
and
and
build
build
the
the
actual
actual
component
component
that
that
the
the
user
user
sees
sees
on
on
the
the
front
front
end.
end
So
so
here
here
I
i
have
have
a
a
list
list
of
of
users
users
that
that
I
i
pulled
pulled
from
from
the
the
database,
database
And
and
I'm
i'm
going
going
to
to
pass
pass
the
the
user
user
status
status
to
to
a
a
child
child
component
component
called
called
user
user
status.
status
We
we
do
do
this
this
by
by
using
using
the
the
input
input
decorator
decorator
from
from
Angular.
angular
Inside
inside
the
the
user
user
status
status
component
component
typescript,
typescript
we
we
just
just
import
import
input
input
and
and
then
then
declare
declare
a
a
variable
variable
called
called
status
status
with
with
that
that
decorator.
decorator
This
this
situation
situation
is
is
a
a
perfect
perfect
time
time
to
to
use
use
the
the
NG
ng
switch
switch
directive
directive
which
which
works
works
just
just
like
like
a
a
switch
switch
operator
operator
in
in
JavaScript
javascript
or
or
any
any
other
other
programming
programming
language.
language
We
we
pass
pass
the
the
user
user
status
status
to
to
NG
ng
Switch
switch
and
and
then
then
we
we
can
can
use
use
an
an
NG
ng
Switch
switch
case
case
to
to
display
display
different
different
templates
templates
depending
depending
on
on
what
what
the
the
user
user
status
status
is.
is
So
so
if
if
the
the
user
user
is
is
online,
online
we
we
give
give
it
it
a
a
green
green
success
success
CSS
css
class.
class
If
if
they're
they're
offline,
offline
we
we
give
give
it
it
a
a
red
red
CSS
css
class
class
and
and
so
so
on.
on
This
this
makes
makes
it
it
easy
easy
to
to
add
add
your
your
own
own
custom
custom
icons
icons
or
or
whatever
whatever
kind
kind
of
of
presentation
presentation
you
you
wanna
wanna
do
do
here.
here
You
you
can
can
also
also
add
add
an
an
NG
ng
switch
switch
default
default
which
which
will
will
ensure
ensure
that
that
something
something
Displays
displays
if
if
none
none
of
of
the
the
statuses
statuses
match
match
what
what
you
you
have
have
in
in
the
the
Switch
switch
cases.
cases
That's
that's
it
it
for
for
building
building
a
a
user
user
presence
presence
system
system
with
with
Angular
angular
4
4
and
and
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
access
access
to
to
exclusive
exclusive
content
content
and
and
1
1
on
on
1
1
project
project
consulting,
consulting
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
access
access
to
to
our
our
pro
pro
members
members
channel
channel
on
on
Slack.
slack
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains a real-time presence system that will detect user engagement and update status through timer and event logs. They will use the Angularare database and Angularter denies to access the app's data. The system will use a helper function to subscribe to connection data and update the status to offline. The speaker also discusses the use of a user status component and a timer reset feature.
User Presence System in Realtime - Online, Offline, Away
A real time presence system allows users to know whether or not their fellow users are online, offline, or away in some other idle status. In this episode we're going to use Slack as our inspiration to build a system that will show the status of users throughout the app. We're building a fully fledged system that will be able to detect whether or not a user is engaging with an app based on a timer and also whether or not a user has closed the app and update the status on each of these events. At this point, I'm assuming you have a basic authentication system in place with AngularFire 2. If not, I've added a link in the description that discusses that topic more extensively. The first thing we wanna do is see if the user has an active connection to the Firebase real time data base. Firebase keeps track of this information in a secret location called info slash connected, which we can subscribe to just like anything else in the database. This tells us whether the current client has a connection to the database. So let's go into our auth service and put this to use. First, we'll import the AngularFire database as well as AngularFire auth and the main Firebase SDK. Then we'll set a variable for the current user's user ID. And inside the constructor, we'll subscribe to the AngularFire auth state, which is just the currently logged in user. And if we have a user, we're going to set their user ID on the service and also subscribe to that connection data that I just described earlier. When we actually determine the current user status, we'll save it as the status property under their user ID in the real time database. We're going to update the status frequently, so we'll create a helper function that we can just pass the status as an argument and that will update the database. So anytime we detect a status change, we can call this helper and the database gets updated. From there, we can create another function that will subscribe to the info slash connected data, which will just be a boolean true or false. If it's true, we'll set the user status to online, and if it's false, we'll set it to offline. Then we call our helper function and subscribe and we're all set. If we go to the app, we can see that when we log in, we have an active connection to Firebase so we Play the online status. This works okay when a user logs in, but if they close the window, it's not going to update the status to offline. Thankfully, Firebase has an on disconnect callback that we can use to listen for when the user disconnects from the database. To use this function, we need to interact with the Firebase SDK directly. Let's add another function to our constructor, this time called update on disconnect. It works by making a reference to the user status in the database and then calls the on disconnect function and then updates the status to offline. So this function will only run when the database connection is disconnected. In the app, we have a logged in user on the left and a non logged in user on the right. When the logged in user closes their browser window, it ends the database connection and their status is updated to offline. So what if a user has the app open, but they're not actively using it? For that, we wanna set a third status called away. We can manage that state by listening for mouse events in the browser and then resetting a timer each time a new mouse event occurs. If that timer expires, then we can set the status to away. So we'll set up a couple subscriptions, one for the mouse event and one for the timer itself. Then we'll create another function called update on idle. Inside this function, we create an observable that's listening to mouse events in the DOM. Mouse events happen frequently, so we want to throttle them to happen only every 2 seconds. If you imagine each circle representing a mouse event, They'll be grouped into chunks and only the first one that occurred in that 2 second period will be emitted. When we get a mouse event, we can go ahead and update The status to online because we know the user's engaged. And we also wanna reset the timer which is counting down to set the user to away status. The timer itself is a subscription. So if there's one existing in the app, we want to unsubscribe from it. Then we create a new timer by calling observable dot Timer, this time we're setting it to 5,000 milliseconds. In real life, you probably wanna set it a lot longer than that. Then when that timer runs out, it'll set the status to away. And on a final note, you probably want to end these subscriptions when you no longer need them. For example, if a user signs out, we'll go ahead and unsubscribe from the mouse events as well as the timer. If we go into the app and just let the mouse sit idle, we can see after 5 seconds the status gets updated to away. If we go back into the app, it immediately updates back to online. If I click log out, then it'll update to offline. Now let's go ahead and build the actual component that the user sees on the front end. So here I have a list of users that I pulled from the database, And I'm going to pass the user status to a child component called user status. We do this by using the input decorator from Angular. Inside the user status component typescript, we just import input and then declare a variable called status with that decorator. This situation is a perfect time to use the NG switch directive which works just like a switch operator in JavaScript or any other programming language. We pass the user status to NG Switch and then we can use an NG Switch case to display different templates depending on what the user status is. So if the user is online, we give it a green success CSS class. If they're offline, we give it a red CSS class and so on. This makes it easy to add your own custom icons or whatever kind of presentation you wanna do here. You can also add an NG switch default which will ensure that something Displays if none of the statuses match what you have in the Switch cases. That's it for building a user presence system with Angular 4 and Firebase. If this video helped you, please like and subscribe. And if you want access to exclusive content and 1 on 1 project consulting, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to our pro members channel on Slack. Thanks for watching and I'll talk to you soon.
The speaker explains a real-time presence system that will detect user engagement and update status through timer and event logs. They will use the Angularare database and Angularter denies to access the app's data. The system will use a helper function to subscribe to connection data and update the status to offline. The speaker also discusses the use of a user status component and a timer reset feature.