1 00:00:00,660 --> 00:00:06,330 ‫We've now had the opportunity to mess around a little bit with our joint function and our handle in 2 00:00:06,330 --> 00:00:13,260 ‫function, we're now going to kind of leave behind all this demo and exploration stuff and focus more 3 00:00:13,260 --> 00:00:18,020 ‫on the real problem at hand, which is to just load our list of comments up onto the screen. 4 00:00:19,050 --> 00:00:23,250 ‫So at this point, I'm going to find my handle and function inside the comments channel. 5 00:00:23,520 --> 00:00:28,530 ‫I'm going to clear out all this log stuff that we have because I don't like having log statements laying 6 00:00:28,530 --> 00:00:28,930 ‫around. 7 00:00:29,760 --> 00:00:35,160 ‫OK, so now we want to focus on loading up our list of comments and somehow getting them onto the screen. 8 00:00:35,670 --> 00:00:41,490 ‫Now, some they want to make really clear to you, just in case it's not quite clear yet, is that we 9 00:00:41,490 --> 00:00:47,400 ‫are going to use our WebSocket connection to fetch this list of comments and then we are going to render 10 00:00:47,400 --> 00:00:48,720 ‫them on the client side. 11 00:00:49,050 --> 00:00:54,120 ‫So we're not going to use an HTML template like we have previously for rendering this list of template 12 00:00:54,120 --> 00:00:55,350 ‫of this list of comments. 13 00:00:55,350 --> 00:01:02,280 ‫We're going to entirely rely upon our JavaScript code to fetch the list of comments and then render 14 00:01:02,280 --> 00:01:03,120 ‫them to the screen. 15 00:01:03,510 --> 00:01:04,230 ‫So that's the plan. 16 00:01:06,990 --> 00:01:12,930 ‫Speaking of the list of comments on the screen, I want to mention one little issue that we haven't 17 00:01:12,930 --> 00:01:14,490 ‫quite addressed just yet. 18 00:01:15,030 --> 00:01:22,020 ‫As we know, the comments that we have created or the comment model that we have created is associated 19 00:01:22,020 --> 00:01:23,970 ‫with a very particular topic. 20 00:01:24,000 --> 00:01:24,240 ‫Right. 21 00:01:24,300 --> 00:01:30,990 ‫So when you leave comments, they are associated with a particular topic right now on our topic show 22 00:01:30,990 --> 00:01:35,260 ‫page, we know what topic we're looking at based on the wall. 23 00:01:35,730 --> 00:01:42,300 ‫So when the user goes to localhost, killing four thousand six, that means that we want to show the 24 00:01:42,690 --> 00:01:46,890 ‫topic and comments associated with topic ID six. 25 00:01:48,380 --> 00:01:53,990 ‫So my question to you is inside of this joint function where we're saying that we're going to return 26 00:01:53,990 --> 00:02:00,500 ‫back the list of all the comments associated with this topic, how can we figure out what topic we are 27 00:02:00,500 --> 00:02:01,580 ‫trying to look at? 28 00:02:01,910 --> 00:02:08,210 ‫How can we figure out what that we want to find like topic with six and find all the comments associated 29 00:02:08,210 --> 00:02:08,780 ‫with that? 30 00:02:09,440 --> 00:02:16,050 ‫We need to somehow when we join a channel, indicate what topic we are trying to learn more about. 31 00:02:16,100 --> 00:02:17,030 ‫OK, so that's our goal. 32 00:02:17,030 --> 00:02:19,490 ‫That's we have to kind of figure out how to do. 33 00:02:21,050 --> 00:02:23,540 ‫So I've got a plan on how to do this, so let's talk about it. 34 00:02:23,570 --> 00:02:25,820 ‫Let's talk about the plan is what the plan is going to be. 35 00:02:26,000 --> 00:02:32,090 ‫I do want to mention to you one quick thing before we actually talk about this plan, I want to remind 36 00:02:32,090 --> 00:02:38,960 ‫you that right now our socket file, our socket JS file, where we make some initial contact, is all 37 00:02:38,960 --> 00:02:41,360 ‫code that is instantly executed. 38 00:02:41,690 --> 00:02:48,140 ‫The instant that we load up our our Web page, like just as soon as Web page loads, this code is executed 39 00:02:48,140 --> 00:02:52,220 ‫and there's like nothing to stop it from running right now because I just want to point that out really 40 00:02:52,220 --> 00:02:52,520 ‫quick. 41 00:02:54,030 --> 00:03:01,200 ‫OK, so here's the plan, I'm going to suggest that we refactor all of that code that we just looked 42 00:03:01,200 --> 00:03:08,640 ‫at, all that all that socket code on the JavaScript side into a single function or object or something 43 00:03:08,850 --> 00:03:12,060 ‫that we will call our app on the JavaScript side. 44 00:03:12,900 --> 00:03:21,270 ‫Then inside of our topic show template, we will add in a script tag in that script tags purpose will 45 00:03:21,270 --> 00:03:26,460 ‫be to boot up our JavaScript app while passing in the topic ID. 46 00:03:27,090 --> 00:03:33,450 ‫So that's what's going to kind of connect the dots here between the HTML template side and our JavaScript 47 00:03:33,450 --> 00:03:38,970 ‫app, knowing what topic it's trying to figure out or what what topic ID it's supposed to be showing. 48 00:03:39,630 --> 00:03:45,480 ‫We're going to rely upon our template adding a script tag that's going to start up our app and pass 49 00:03:45,480 --> 00:03:47,100 ‫in the appropriate topic ID. 50 00:03:48,240 --> 00:03:55,500 ‫Then once our client app, once our JavaScript app with ID gets booted up with a topic ID equal to one 51 00:03:56,100 --> 00:04:02,880 ‫hour JavaScript app will attempt to join channel with comments Colen one and so one here is just a total 52 00:04:02,880 --> 00:04:03,640 ‫example, right? 53 00:04:03,690 --> 00:04:06,120 ‫Like whatever the topic ID might be. 54 00:04:06,120 --> 00:04:10,650 ‫One, two, three, four, five, six, whatever it might be, we will adjoin comments. 55 00:04:10,650 --> 00:04:13,170 ‫Colen, whatever the topic ideas. 56 00:04:14,680 --> 00:04:19,060 ‫Once we join that channel, the socket will be forwarded on to our comments channel. 57 00:04:20,420 --> 00:04:24,920 ‫We will look at the string that was used to join that channel. 58 00:04:24,950 --> 00:04:27,420 ‫We'll look at the idea on their little notice. 59 00:04:27,770 --> 00:04:31,650 ‫And whatever this number is, this must be the idea of the record they were trying to fetch. 60 00:04:32,370 --> 00:04:38,180 ‫We'll find all the comments associated with that topic and then we'll send them back over to our JavaScript 61 00:04:38,180 --> 00:04:38,570 ‫app. 62 00:04:38,780 --> 00:04:43,200 ‫And our JavaScript app will be responsible for rendering our list of comments to the screen. 63 00:04:44,000 --> 00:04:45,200 ‫So this is the overall plan. 64 00:04:45,210 --> 00:04:46,400 ‫This is our overall goal. 65 00:04:46,700 --> 00:04:51,410 ‫The real linchpin, the thing that makes it all work together is the fact that we are going to refactor 66 00:04:51,410 --> 00:04:57,890 ‫our JavaScript app to be a function of sorts that is going to be that is going to expect to receive 67 00:04:58,160 --> 00:05:00,650 ‫the idea of the topic that it needs to display. 68 00:05:01,490 --> 00:05:06,740 ‫So let's take a quick break and come back and start refactoring our app to meet this type of contract.