‫We've now had the opportunity to mess around a little bit with our joint function and our handle in
‫function, we're now going to kind of leave behind all this demo and exploration stuff and focus more
‫on the real problem at hand, which is to just load our list of comments up onto the screen.
‫So at this point, I'm going to find my handle and function inside the comments channel.
‫I'm going to clear out all this log stuff that we have because I don't like having log statements laying
‫around.
‫OK, so now we want to focus on loading up our list of comments and somehow getting them onto the screen.
‫Now, some they want to make really clear to you, just in case it's not quite clear yet, is that we
‫are going to use our WebSocket connection to fetch this list of comments and then we are going to render
‫them on the client side.
‫So we're not going to use an HTML template like we have previously for rendering this list of template
‫of this list of comments.
‫We're going to entirely rely upon our JavaScript code to fetch the list of comments and then render
‫them to the screen.
‫So that's the plan.
‫Speaking of the list of comments on the screen, I want to mention one little issue that we haven't
‫quite addressed just yet.
‫As we know, the comments that we have created or the comment model that we have created is associated
‫with a very particular topic.
‫Right.
‫So when you leave comments, they are associated with a particular topic right now on our topic show
‫page, we know what topic we're looking at based on the wall.
‫So when the user goes to localhost, killing four thousand six, that means that we want to show the
‫topic and comments associated with topic ID six.
‫So my question to you is inside of this joint function where we're saying that we're going to return
‫back the list of all the comments associated with this topic, how can we figure out what topic we are
‫trying to look at?
‫How can we figure out what that we want to find like topic with six and find all the comments associated
‫with that?
‫We need to somehow when we join a channel, indicate what topic we are trying to learn more about.
‫OK, so that's our goal.
‫That's we have to kind of figure out how to do.
‫So I've got a plan on how to do this, so let's talk about it.
‫Let's talk about the plan is what the plan is going to be.
‫I do want to mention to you one quick thing before we actually talk about this plan, I want to remind
‫you that right now our socket file, our socket JS file, where we make some initial contact, is all
‫code that is instantly executed.
‫The instant that we load up our our Web page, like just as soon as Web page loads, this code is executed
‫and there's like nothing to stop it from running right now because I just want to point that out really
‫quick.
‫OK, so here's the plan, I'm going to suggest that we refactor all of that code that we just looked
‫at, all that all that socket code on the JavaScript side into a single function or object or something
‫that we will call our app on the JavaScript side.
‫Then inside of our topic show template, we will add in a script tag in that script tags purpose will
‫be to boot up our JavaScript app while passing in the topic ID.
‫So that's what's going to kind of connect the dots here between the HTML template side and our JavaScript
‫app, knowing what topic it's trying to figure out or what what topic ID it's supposed to be showing.
‫We're going to rely upon our template adding a script tag that's going to start up our app and pass
‫in the appropriate topic ID.
‫Then once our client app, once our JavaScript app with ID gets booted up with a topic ID equal to one
‫hour JavaScript app will attempt to join channel with comments Colen one and so one here is just a total
‫example, right?
‫Like whatever the topic ID might be.
‫One, two, three, four, five, six, whatever it might be, we will adjoin comments.
‫Colen, whatever the topic ideas.
‫Once we join that channel, the socket will be forwarded on to our comments channel.
‫We will look at the string that was used to join that channel.
‫We'll look at the idea on their little notice.
‫And whatever this number is, this must be the idea of the record they were trying to fetch.
‫We'll find all the comments associated with that topic and then we'll send them back over to our JavaScript
‫app.
‫And our JavaScript app will be responsible for rendering our list of comments to the screen.
‫So this is the overall plan.
‫This is our overall goal.
‫The real linchpin, the thing that makes it all work together is the fact that we are going to refactor
‫our JavaScript app to be a function of sorts that is going to be that is going to expect to receive
‫the idea of the topic that it needs to display.
‫So let's take a quick break and come back and start refactoring our app to meet this type of contract.