1 00:00:01,450 --> 00:00:05,930 This video is yet another really exciting one, 2 00:00:05,930 --> 00:00:08,970 because now we're gonna create our very first 3 00:00:08,970 --> 00:00:13,750 real web server capable of accepting requests 4 00:00:13,750 --> 00:00:15,973 and sending back responses. 5 00:00:17,930 --> 00:00:22,930 And the first step is to include yet another package 6 00:00:22,950 --> 00:00:24,223 or another module, 7 00:00:27,470 --> 00:00:29,533 and this one is called http. 8 00:00:33,530 --> 00:00:36,280 So we're using the require function again, 9 00:00:36,280 --> 00:00:41,280 and then requiring the built-in http module, 10 00:00:41,380 --> 00:00:45,260 and that's the one that gives us networking capabilities 11 00:00:45,260 --> 00:00:48,423 such as building an http server. 12 00:00:50,264 --> 00:00:52,980 Now, let's actually comment out this code here 13 00:00:52,980 --> 00:00:55,863 so that it doesn't get in our way. 14 00:00:59,980 --> 00:01:04,133 So let's actual create kind of a divider here. 15 00:01:07,520 --> 00:01:09,723 So this one is filed, 16 00:01:12,730 --> 00:01:17,730 and this one is for server. 17 00:01:18,030 --> 00:01:20,930 And now, in order to build our server, 18 00:01:20,930 --> 00:01:22,900 we have to do two things. 19 00:01:22,900 --> 00:01:24,980 First, we create a server, 20 00:01:24,980 --> 00:01:27,820 and then second, we start the server 21 00:01:27,820 --> 00:01:31,033 so that we can actually listen to incoming requests. 22 00:01:32,840 --> 00:01:37,680 We use our http module and just like before 23 00:01:37,680 --> 00:01:40,760 we used a method that is on that object. 24 00:01:40,760 --> 00:01:43,283 So just like we did with the fs module. 25 00:01:44,120 --> 00:01:46,530 So, http.createServer 26 00:01:50,440 --> 00:01:54,000 and create server will accept a callback function, 27 00:01:54,000 --> 00:01:56,130 which will be fired off each time 28 00:01:56,130 --> 00:01:58,870 a new request hits our server. 29 00:01:58,870 --> 00:02:01,240 And this callback function gets access 30 00:02:01,240 --> 00:02:05,080 to two very important and fundamental variables. 31 00:02:05,080 --> 00:02:08,763 It is the request variable, and a response variable. 32 00:02:09,850 --> 00:02:12,373 And a little bit more about them in a second. 33 00:02:13,670 --> 00:02:15,293 So, request, and response, 34 00:02:18,510 --> 00:02:20,630 So all we want to do now is to actually 35 00:02:20,630 --> 00:02:23,890 send back a response to the client 36 00:02:23,890 --> 00:02:26,420 and we do that with res., 37 00:02:26,420 --> 00:02:30,763 which is this object here, this response object, .end, 38 00:02:32,690 --> 00:02:33,547 and then 'Hello from the server!'. 39 00:02:33,547 --> 00:02:36,850 .end, and then 'Hello from the server!'. 40 00:02:37,780 --> 00:02:42,740 So that is the response that we're going to send back. 41 00:02:42,740 --> 00:02:46,720 So again, each time that a new request hits our server 42 00:02:46,720 --> 00:02:49,910 this callback function here will get called, 43 00:02:49,910 --> 00:02:51,998 and the callback function will have access 44 00:02:51,998 --> 00:02:55,780 to the request object which holds all kinds of stuff 45 00:02:55,780 --> 00:03:00,680 like the request url, and a bunch of other stuff. 46 00:03:00,680 --> 00:03:03,340 On the other hand, this response object here 47 00:03:03,340 --> 00:03:05,880 gives us a lot of tools basically 48 00:03:05,880 --> 00:03:07,820 for dealing with the response, 49 00:03:07,820 --> 00:03:10,860 so for sending out the response. 50 00:03:10,860 --> 00:03:14,200 The simplest one is .end, 51 00:03:14,200 --> 00:03:18,200 and this end here, the naming of this method 52 00:03:18,200 --> 00:03:21,060 will make a bit more sense a bit later. 53 00:03:21,060 --> 00:03:24,270 For now, just know that this is the simplest way 54 00:03:24,270 --> 00:03:28,493 of sending back a very, very simple response in this case. 55 00:03:29,630 --> 00:03:31,840 So that's really all we have to do 56 00:03:31,840 --> 00:03:34,810 to send back a plain text response 57 00:03:34,810 --> 00:03:36,863 when a certain request comes in. 58 00:03:37,730 --> 00:03:41,060 Now, if you're a bit confused about all these terms, 59 00:03:41,060 --> 00:03:44,950 like incoming request, or sending responses, 60 00:03:44,950 --> 00:03:48,220 or even about why we do actually have requests 61 00:03:48,220 --> 00:03:51,450 and responses here on our server 62 00:03:51,450 --> 00:03:54,000 then don't worry, because we have a whole lecture 63 00:03:54,000 --> 00:03:56,660 coming up about how the web works 64 00:03:56,660 --> 00:04:00,430 where we're gonna talk all about the client-server model, 65 00:04:00,430 --> 00:04:04,260 and really how network applications work in general. 66 00:04:04,260 --> 00:04:06,880 Again, in this section my main focus 67 00:04:06,880 --> 00:04:09,330 is on actually showing you all the stuff 68 00:04:09,330 --> 00:04:11,260 and really making it work, 69 00:04:11,260 --> 00:04:13,793 and then the theory will follow a bit later. 70 00:04:14,950 --> 00:04:16,610 So that's the philosophy I've used 71 00:04:16,610 --> 00:04:20,450 in all my other courses, and it's been working really well, 72 00:04:20,450 --> 00:04:22,410 and so I believe it's a good thing 73 00:04:22,410 --> 00:04:24,390 to do it here as well. 74 00:04:24,390 --> 00:04:28,100 Anyway, creating a server was the first part, 75 00:04:28,100 --> 00:04:30,800 and now the second part is to actually listen 76 00:04:30,800 --> 00:04:33,633 to incoming requests from the client. 77 00:04:34,880 --> 00:04:39,690 Now, in order to do that we actually need to save 78 00:04:39,690 --> 00:04:44,203 the result of this createServer here to a new variable. 79 00:04:45,620 --> 00:04:47,803 So, we call it usually server, 80 00:04:49,840 --> 00:04:54,840 so server is the result of this createServer method here. 81 00:04:55,720 --> 00:04:59,580 So it will create a server, and now we use that server 82 00:05:00,730 --> 00:05:03,620 and on that we can call listen. 83 00:05:03,620 --> 00:05:07,250 Listen accepts a couple of parameters the first one 84 00:05:07,250 --> 00:05:10,060 is the port, and usually the port 85 00:05:10,060 --> 00:05:13,660 that we use in Note is for example, 8000. 86 00:05:13,660 --> 00:05:16,270 But you will see other numbers like 3000, 87 00:05:16,270 --> 00:05:19,850 or 80, or something like that. 88 00:05:19,850 --> 00:05:22,890 And in case you're wondering what a port actually is, 89 00:05:22,890 --> 00:05:24,870 well it doesn't really matter, 90 00:05:24,870 --> 00:05:27,250 but all you need to know is it's basically 91 00:05:27,250 --> 00:05:30,540 a sub-address on a certain host, 92 00:05:30,540 --> 00:05:33,453 and the host is what we specify next. 93 00:05:34,400 --> 00:05:36,410 We actually don't need to specify it 94 00:05:36,410 --> 00:05:39,000 and then we'll default to a local host, 95 00:05:39,000 --> 00:05:42,140 but we can actually specify it also 96 00:05:42,140 --> 00:05:44,680 to local host explicitly. 97 00:05:44,680 --> 00:05:49,680 So, local host usually has this address as a default, 98 00:05:50,190 --> 00:05:53,390 and local host simply means the current computer. 99 00:05:53,390 --> 00:05:57,920 So the computer that the program is currently running in. 100 00:05:57,920 --> 00:06:00,680 And again, this is the standard IP address 101 00:06:00,680 --> 00:06:02,133 for that local host. 102 00:06:03,420 --> 00:06:07,830 So this one here will start listening for incoming requests. 103 00:06:07,830 --> 00:06:10,233 So basically starting up the server. 104 00:06:11,095 --> 00:06:13,550 And as an optional argument 105 00:06:13,550 --> 00:06:16,360 we can also pass in a callback function, 106 00:06:16,360 --> 00:06:19,110 which will be run as soon as the server 107 00:06:19,110 --> 00:06:20,893 actually starts listening. 108 00:06:22,060 --> 00:06:27,060 So here, it's quite usual to simply display a message 109 00:06:27,470 --> 00:06:30,350 that the server has been started. 110 00:06:30,350 --> 00:06:33,947 So let's say listening to requests on port 8000. 111 00:06:40,037 --> 00:06:42,830 And now all we have to do is to actually go 112 00:06:42,830 --> 00:06:47,320 to this url on our computer on port 8000. 113 00:06:47,320 --> 00:06:48,860 Now before we can do that of course, 114 00:06:48,860 --> 00:06:51,930 we have to run the Note application, 115 00:06:51,930 --> 00:06:56,560 so note index.js, and here we have our lock. 116 00:06:56,560 --> 00:06:59,803 So listening to request on port 8000. 117 00:07:00,680 --> 00:07:03,590 And you see that the app keeps running, 118 00:07:03,590 --> 00:07:06,090 so before it was always stopping 119 00:07:06,090 --> 00:07:08,270 right away, so it did its work, 120 00:07:08,270 --> 00:07:10,500 and then it exited the application. 121 00:07:10,500 --> 00:07:12,890 Right now it doesn't do that. 122 00:07:12,890 --> 00:07:15,770 That's because of something called the event loop 123 00:07:15,770 --> 00:07:17,920 that we're going to talk about a bit later 124 00:07:17,920 --> 00:07:20,270 in another section of this course. 125 00:07:20,270 --> 00:07:23,740 But, no matter what the technical reasons are for this, 126 00:07:23,740 --> 00:07:27,600 it is obvious that the app cannot really exit right away, 127 00:07:27,600 --> 00:07:31,513 because then we could not receive any new requests. 128 00:07:32,550 --> 00:07:34,290 So when we start a server, 129 00:07:34,290 --> 00:07:37,410 Note cannot simply exit the process 130 00:07:37,410 --> 00:07:40,790 so exit the program, because the whole goal 131 00:07:40,790 --> 00:07:43,523 is to wait for the requests to come in. 132 00:07:46,050 --> 00:07:48,650 So this is what I'm gonna show you next. 133 00:07:48,650 --> 00:07:53,650 For now, let's just open up the IP address on port 8000. 134 00:07:55,450 --> 00:07:59,850 And for that we use the colon, and then the port number. 135 00:07:59,850 --> 00:08:02,860 So, this is the host, which is local host, 136 00:08:02,860 --> 00:08:05,083 colon, and then the port number. 137 00:08:06,090 --> 00:08:08,340 Hit enter, and here we go. 138 00:08:08,340 --> 00:08:11,320 So, hello from the server! 139 00:08:11,320 --> 00:08:13,370 And so yeah, it really works. 140 00:08:13,370 --> 00:08:17,350 You have a real web server running on your computer 141 00:08:17,350 --> 00:08:20,880 using NoteJS, congratulations. 142 00:08:20,880 --> 00:08:25,880 So let's go back here and, again analyze what happened here. 143 00:08:27,220 --> 00:08:30,980 We created our server, using createServer 144 00:08:30,980 --> 00:08:33,260 and passed in a callback function 145 00:08:33,260 --> 00:08:36,620 that is executed each time that a new request 146 00:08:36,620 --> 00:08:39,820 hits the server, and then we started listening 147 00:08:39,820 --> 00:08:43,577 for incoming requests on the local host IP, 148 00:08:43,577 --> 00:08:45,440 and then on port 8000. 149 00:08:46,700 --> 00:08:50,840 Once we had all this running, we actually did the request 150 00:08:50,840 --> 00:08:52,840 by hitting that url. 151 00:08:52,840 --> 00:08:56,620 So basically by hitting local host on port 8000. 152 00:08:56,620 --> 00:09:01,460 So then, under the hood of NoteJS an event was fired 153 00:09:01,460 --> 00:09:03,230 which is something that, again, 154 00:09:03,230 --> 00:09:05,260 we're going to talk about a bit later. 155 00:09:05,260 --> 00:09:08,320 But what matters here is that this event 156 00:09:08,320 --> 00:09:12,633 then made it so this callback function was called. 157 00:09:14,060 --> 00:09:17,070 And finally as a result of that, 158 00:09:17,070 --> 00:09:19,463 we then got back this string. 159 00:09:22,590 --> 00:09:26,030 Just for the sake of curiosity, 160 00:09:26,030 --> 00:09:29,633 lets actually take a look at the request object. 161 00:09:32,760 --> 00:09:37,340 We need to close the server and start it again 162 00:09:37,340 --> 00:09:39,340 because we did some changes to the code. 163 00:09:40,550 --> 00:09:44,530 And notice how this time I actually used control C 164 00:09:44,530 --> 00:09:47,090 in order to exit the application. 165 00:09:47,090 --> 00:09:49,430 So remember that in the beginning 166 00:09:49,430 --> 00:09:51,100 when we used the ripple, 167 00:09:51,100 --> 00:09:54,033 I used control D in order to exit it. 168 00:09:55,270 --> 00:09:58,700 But now when we have a Note program running like this 169 00:09:58,700 --> 00:10:02,060 We need to use control C to basically break 170 00:10:02,060 --> 00:10:03,253 from that program. 171 00:10:05,420 --> 00:10:08,200 That's why here I used control C 172 00:10:08,200 --> 00:10:10,102 and throughout the rest of the course 173 00:10:10,102 --> 00:10:12,300 when I want to finish a program 174 00:10:12,300 --> 00:10:15,090 I will always be using control C. 175 00:10:15,090 --> 00:10:18,500 So, that's control and not command C, again. 176 00:10:18,500 --> 00:10:21,373 Even on a Mac you need to use control C. 177 00:10:23,810 --> 00:10:27,920 Let's now do this again, we get the same response, 178 00:10:27,920 --> 00:10:30,990 but now we should have something in the console. 179 00:10:30,990 --> 00:10:35,060 So this here is the request object, 180 00:10:35,060 --> 00:10:38,580 and as I mentioned, there is a ton of stuff in here. 181 00:10:38,580 --> 00:10:39,910 You see it? 182 00:10:39,910 --> 00:10:44,910 All of this, it doesn't even fit actually in the console. 183 00:10:47,366 --> 00:10:49,610 I think I cannot even show you 184 00:10:51,865 --> 00:10:53,633 all the cool data that is in there. 185 00:10:56,670 --> 00:10:59,590 Actually here we have some headers, 186 00:10:59,590 --> 00:11:04,590 so we have the host and here we have some... 187 00:11:04,680 --> 00:11:07,900 Again, so we have some http headers, 188 00:11:07,900 --> 00:11:09,870 which is something that we're going to talk about 189 00:11:09,870 --> 00:11:11,763 I think in the next video. 190 00:11:13,970 --> 00:11:17,430 Anyway, what matters here is that we really 191 00:11:17,430 --> 00:11:20,800 get access to all kinds of stuff 192 00:11:20,800 --> 00:11:25,033 when we handle the request and send out the response. 193 00:11:26,470 --> 00:11:29,193 Doesn't matter here, let's actually get rid of this, 194 00:11:30,670 --> 00:11:35,320 give it a save, and then quit this, and start it again. 195 00:11:35,320 --> 00:11:37,890 And now just to finish this video, 196 00:11:37,890 --> 00:11:40,470 I want to show you what we're actually gonna build 197 00:11:40,470 --> 00:11:42,280 in the next couple of lectures 198 00:11:43,150 --> 00:11:45,870 until the end of this section. 199 00:11:45,870 --> 00:11:50,870 So it's this small fun app called the node farm. 200 00:11:52,592 --> 00:11:56,240 We have a couple of products here, 201 00:11:56,240 --> 00:11:57,940 and we built all of this here 202 00:11:57,940 --> 00:12:00,747 using a very simple html template, 203 00:12:00,747 --> 00:12:03,310 and you can then click on the link 204 00:12:03,310 --> 00:12:06,670 and it will basically take you to the detail page 205 00:12:06,670 --> 00:12:10,500 for this product, in this case the avocados. 206 00:12:10,500 --> 00:12:13,030 It has a bunch of data here, 207 00:12:13,030 --> 00:12:15,860 a button which doesn't do anything, 208 00:12:15,860 --> 00:12:18,023 and then we can go back to the page. 209 00:12:18,870 --> 00:12:22,180 So, avocados, then we have the cheese for example, 210 00:12:22,180 --> 00:12:24,550 and it has then, of course, different data 211 00:12:24,550 --> 00:12:28,273 for each of these products. 212 00:12:28,273 --> 00:12:33,273 So it has this nice fresh, kind of crazy design to it 213 00:12:33,540 --> 00:12:36,900 to make it pop a little bit, and yeah, 214 00:12:36,900 --> 00:12:40,100 I think this is a fun little project. 215 00:12:40,100 --> 00:12:42,150 And we're gonna start building it actually, 216 00:12:42,150 --> 00:12:43,833 right in the next video.