Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Real-time Observable Stream" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

With the use of Firebase database, Lukas goes through the code to demonstrate how to setup realtime updates in an Angular application.

Get Unlimited Access Now

Transcript from the "Real-time Observable Stream" Lesson

[00:00:00]
>> Lukas Ruebbelke: We've talked about the observable stream, the only difference is in our observable is real time. Whereas we are catching events from the user, where there is some initial output that generally is local to the application. Well, what happens when you take and you put your initial output, into a database that everybody's connected with.

[00:00:23] Well then it becomes real time. So first thing's first, start with a real time database, Firebase, problem solved. And so what you do here, if you're going to do this, first things first, create a Firebase account. They have a very generous free tier, and then you create a project.

[00:00:50] And that's going to generate some of this stuff down here like an API key domain. This is actually all generated, and I just basically copied it in. So it gives you the key, all these different stuff. Take it up and put this in your environment.ts.
>> Lukas Ruebbelke: And once you have this in, now.

[00:01:20] We need to initialize our modules, or input the, so the first thing we need to do before anything is we need to import the Angular Fire Module, initialize the app. And so what this does, this has to exist for every single Angular Fire app, is we're initializing the app and passing in our config.

[00:01:43] What that does is it actually connects us to our remote Firebase. I'm also using the Angular Fire database module, so if you just want to do the real time stuff then you can do this. But Qngular actually has a really nice authentication functionally, for instance like log in with any third party provider, like a social provider or email, and password different things.

[00:02:09] You can also do authorization as well, and pull that in, but in our case, we just care about the real time database. So two modules here, then we need to consume it.
>> Lukas Ruebbelke: So in our notification service,
>> Lukas Ruebbelke: What we are doing is essentially creating a reference to our remote endpoint.

[00:02:42] So I think I actually stepped through this, how far do I go?
>> Lukas Ruebbelke: Actually, so here's the entire code that I'm using, but the first thing we need to do is consume the data. And this happens in two parts, or a couple parts, actually. First and foremost, we define our notification string which now instead of coming from a subject or rather instead of the subject, we are setting this as FirebaseObjectObservable and it's a Notification.

[00:03:18] So, this is just another service that maps our observable to an endpoint as an object, and then we're pointing it to the remote endpoint, so db.object('/notifications') and so now we're connected, and then from here, we subscribe to it. So this point with these two lines here the finding the notification and then connecting app using db.object.

[00:03:52] We are ready to go, we have this string. Now we need to figure out what we gonna do with it. So in this case we are subscribing and we are pointing the notification. Whatever they come in, it would just passing it to the rest of the application via this.subject.net so still even the subject there.

[00:04:14] But I'm saying whenever something happens on the real-time stream, just take that and kick it in the subject, so we can broadcast it to the rest of the application. So, the new this one stream coming in, and then we're kind of doing a multi cast down. Because anybody who's subscribed to it can now listen.

[00:04:31] The reason why I'm using dot skip one, is because whenever it connects, it always fires one time. So there's always this one initial like hey, we're connected and that registers as a tick. And so I'm just saying throw the first one away, cuz that's basically your connection event.

[00:04:53]
>> Lukas Ruebbelke: And so you can assume it. You simply say I want to create a real time or basically an observable, that's pointed to this remote end point. Well so we're consuming it. How do we go the other direction? How do we update it? Well now, we just say this notification stream, dot set and we just pass it in so whereas before we had the subject.next and passed it in, we're now just kind of inserting AngularFire, or Firebase right into that spot.

[00:05:29] We're saying it comes in, let's update the database first, and then it'll come back down and we can subscribe there and then kick it back into the observable, so it's just this really small insertion that we have between, so we've just essentially introduced,
>> Lukas Ruebbelke: 1, 2, 3, 4, 5, five lines of code,

[00:05:59]
>> Lukas Ruebbelke: To modify our notification service and now it's real time, that's what I love about observables and Firebase. What do you guys think about that?
>> Speaker 2: That's awesome. Pretty legit.
>> Lukas Ruebbelke: Sometimes it's almost so easy, it's almost anticlimactic. Like, is that for real?
>> Speaker 2: You could just make a real time chat pretty quickly.

[00:06:31]
>> Lukas Ruebbelke: Very quickly. I gave a talk last year in London, in England about this. It's called, Go Beast Mode, with Real Time Observables and Angular, and I talk about one of the observable scripts. So some of the slides even you'll see in that talk. And I build out these really simple kind of like, here's a ball, here's some different things.

[00:06:56] Like really basic like demos, and then what I do it's like okay, let's turn these into real things. Where you saw where you're dragging this thing across the screen, well, that's like actually, where are you? Well, I'm going to put this pin on this map. Or I'm drawing these lines on the screen, well if you've ever used Map My Run or something it's like, I ran here, then I ran here, then I ran here, and then I ran here.

[00:07:21] In just a few lines of code, you can actually split that observable stream, put Firebase into it, and now it's real time. I mean, you saw it, I had five lines of code, and I took a local, observable stream, and I expanded it into a real time observable stream.

[00:07:43]
>> Lukas Ruebbelke: [SOUND] It's pretty neat technology.