This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Exercise 7 Solution" Lesson
>> Kevin Whinnery: Before I went to break I was kind of working a little bit on figuring out why my view.js theme switcher that I had attempted to demo a few minutes ago wasn't working. And it was a silly mistake as you might imagine. Here if we if we pull this up again, I have moved the location of the radio buttons.
[00:00:25] And now when I click them, I switch between a light and a dark CSS theme. And looking at the if we take a look at the elements we can see that the class changes from light to dark when I go back and forth. So the issue at play was I had added the radio buttons here above the footer, but it actually wasn't a part of the same element, the section element, that we attached our view.js component to.
[00:00:59] So the events that I was firing in the model I was trying to bind to was not actually part of the component. And so by moving the inputs inside the actual component, they were able to bind to the same model. So it's just the location of my mark up in the DOM was misplaced.
[00:01:23] The rest of the code was working fine.
>> Audience: [INAUDIBLE]
>> Kevin Whinnery: So that is the piece for the to do app for the theme switcher using view.js that we had before. And the other bit on that we asked you to take a look at going into the break was a socket IO and trying to incorporate socket IO into the updating flow of a of the To Do item.
[00:01:57] The challenge that I placed to you guys going into the break, and I didn't see any poor requests come in which is okay you're out having some Thai food, chowing down a sandwich catching up, totally fine. But the challenge I post to you guys was to using socket IO.
[00:02:18] Update the user, the view.JS based user interface based on some activity that was going on the server. Whenever a new to do was added, pushing event using socket IO up to the server. So let's go ahead and do that, I didn't see the poor request come in. So to over launch to try to get this, get this going, so we can take a look at that.
>> Kevin Whinnery: We reload here. We have a list of todos. Maybe knockout a couple of those there. There's our list. And we can still see that it is working and persisting stuff to a database. But now what we would like to have happen is when I add a to do list item over here and I just implement it for the add I get another item showing up over here.
[00:03:12] Here we go, if I add that over here. No, we do have a little JS error so whoops, minor problem as I was finishing this up. One moment please.
>> Kevin Whinnery: Just need to change that up right quick. Reload both of these and with any luck that will be the end of it.
[00:03:43] So I get it to you list yup yup and then we see that added on our other other tab as well. So the way that we implemented this was wiring up a socket server with our REST API endpoint. And when that add operation is executed, emit a message backup to the client with that todo that was added.
[00:04:08] So let's break down that code here real quick. We'll start on the backend. Now here in the server, at the command where we actually start up our server we add a little bit of logic here to actually initialize a socket IO server and associate that with the HTTP server for the application.
[00:04:29] So we create our HTTP server like before and now we create an instance of socket IO that we can use to manage incoming socket connections from our users. And then I pass that to a utility module that I created for handling socket communication over here which has a method called init, and then we pass to that a socket IO object.
[00:04:55] Now if we look at that socket object to find it's same level as webapp.js. That init function just passes the socket IO instance and assigns that to a module scoped variable called IO. And then we export another function called todo added which we intend to be called from our controller.
[00:05:24] It's gonna be passed todo item and then it's gonna use that socket IO instance to admit this event todo added to the other connected clients.
>> Kevin Whinnery: So that's the, I guess the other bit on the server side to point out is we just create it, we required that module here in our controller.
[00:05:47] And then in our create function, if the todo is created successfully then recall that function and omit that event in our socket IO server. Back in the in the view JS view, right now this is all implemented within the constructor for the view component. There's a few ways we could approach this but I create a property that's not gonna be observable on the on this view instance called socket.
>> Kevin Whinnery: And after I create that socket, I add a listener for to do added. Because the scope of this does change within this function, I just stashed it away in a variable called self.
[00:06:48] And then when that todo added item is fired, I'm going to check the list of todos that I already have to see if I have that todo item. So I'll check the ID of all of the ones that have been successfully created against the one that just got added.
[00:07:06] And if I don't already have it in my list of todo items, I go ahead and push that into that array, which then will update the UI with the latest list of todo items.
>> Kevin Whinnery: Any questions on that particular bit of code or socket IO stuff before we keep trucking?
>> Speaker 4: What is the of keyword? Is it basically serving the same purpose there as a for each loop or how exactly are you doing that particular loop?
>> Kevin Whinnery: It's sort of a variation on the traditional for loop where you have an iterator which is incremented. The primary reason I'm using this here rather than like an array for each, where you pass in a function with every element of the array is you can't break out of a for each loop.
[00:08:05] It's gonna be executed for every member of the array. Whereas in a for of loop, you can breakout early, which I needed to do here. So, yeah, so I'm sort of tracking the state there. I assign the current todo item to that t variable and then start to work with it in the for loop.
>> Kevin Whinnery: Other questions?
>> Kevin Whinnery: All right, cool beans. Let's keep moving. If you have any other questions as we go along that's great. I'll push up that branch of the socket IO changes and after we’re sort of off to the races our next exercise.