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.