1 00:00:01,380 --> 00:00:03,410 ‫So our goal is to develop 2 00:00:03,410 --> 00:00:05,650 ‫back-end applications with Node 3 00:00:05,650 --> 00:00:08,160 ‫and therefore it's probably a good idea 4 00:00:08,160 --> 00:00:11,890 ‫to get a basic understanding of how the web actually works 5 00:00:11,890 --> 00:00:14,350 ‫behind the scenes, right? 6 00:00:14,350 --> 00:00:17,880 ‫And this is gonna be a really full pack lecture. 7 00:00:17,880 --> 00:00:19,743 ‫And so let's dive right in. 8 00:00:21,300 --> 00:00:24,040 ‫Now, in order to get a better understanding 9 00:00:24,040 --> 00:00:26,010 ‫of how the web actually works, 10 00:00:26,010 --> 00:00:28,230 ‫let's start by asking the question: 11 00:00:28,230 --> 00:00:30,670 ‫What does actually happen each time 12 00:00:30,670 --> 00:00:32,567 ‫that we type a URL into our browser 13 00:00:32,567 --> 00:00:36,270 ‫in order to open up a new webpage? 14 00:00:36,270 --> 00:00:40,000 ‫Or each time that we request data from some API? 15 00:00:40,000 --> 00:00:41,990 ‫Which is actually quite the same 16 00:00:41,990 --> 00:00:45,453 ‫and so let's just focus on a simple website example here. 17 00:00:47,409 --> 00:00:50,760 ‫Well, the most simple answer is that our browser 18 00:00:50,760 --> 00:00:54,360 ‫which is also called a client sends a request 19 00:00:54,360 --> 00:00:57,150 ‫to the server where the webpage is hosted. 20 00:00:57,150 --> 00:01:00,330 ‫And the server will then send back a response, 21 00:01:00,330 --> 00:01:04,410 ‫which is gonna contain the webpage that we just requested. 22 00:01:04,410 --> 00:01:08,000 ‫And this process is called the request-response model 23 00:01:08,000 --> 00:01:10,940 ‫or also the client-server architecture. 24 00:01:10,940 --> 00:01:13,100 ‫And everything that we're gonna talk about 25 00:01:13,100 --> 00:01:17,770 ‫in this section revolves around this fundamental concept. 26 00:01:17,770 --> 00:01:20,990 ‫Okay, but let's now take this one step further 27 00:01:20,990 --> 00:01:23,730 ‫because this is probably not really new for you 28 00:01:23,730 --> 00:01:25,313 ‫at this point, right? 29 00:01:26,380 --> 00:01:29,600 ‫So let's say that we wanna access Google Maps 30 00:01:29,600 --> 00:01:34,600 ‫by writing google.com/maps into our browser as the URL. 31 00:01:35,180 --> 00:01:38,783 ‫And every URL gets an HTTP or HTTPS, 32 00:01:39,930 --> 00:01:42,520 ‫which is for the protocol that will be used 33 00:01:42,520 --> 00:01:43,920 ‫on the connection. 34 00:01:43,920 --> 00:01:47,440 ‫And we're gonna talk about this a bit later in this video. 35 00:01:47,440 --> 00:01:49,580 ‫Then we have the domain name here, 36 00:01:49,580 --> 00:01:51,930 ‫which is google.com in this case, 37 00:01:51,930 --> 00:01:55,500 ‫and also after a slash, the so-called resource 38 00:01:55,500 --> 00:01:56,950 ‫that we're going to access, 39 00:01:56,950 --> 00:01:59,560 ‫and in this case, /maps. 40 00:01:59,560 --> 00:02:02,710 ‫Now what you need to know here is that the domain name 41 00:02:02,710 --> 00:02:06,137 ‫like google.com is not actually the real address 42 00:02:06,137 --> 00:02:09,230 ‫of the server that we are trying to access 43 00:02:09,230 --> 00:02:13,350 ‫but just a nice name that is easy for us to memorize. 44 00:02:13,350 --> 00:02:17,050 ‫So we need a way of kind of converting the domain name 45 00:02:17,050 --> 00:02:19,220 ‫to the real address of the server 46 00:02:19,220 --> 00:02:22,100 ‫and that happens through a DNS. 47 00:02:22,100 --> 00:02:25,230 ‫So DNS stands for Domain Name Server, 48 00:02:25,230 --> 00:02:27,940 ‫which are special servers that are basically 49 00:02:27,940 --> 00:02:30,610 ‫like the phone-books of the internet. 50 00:02:30,610 --> 00:02:34,330 ‫So the first step that happens when we open up a website 51 00:02:34,330 --> 00:02:38,180 ‫is the the browser makes a request to a DNS 52 00:02:38,180 --> 00:02:40,990 ‫and this special server will then simply match 53 00:02:40,990 --> 00:02:43,760 ‫the web address that we typed into the browser 54 00:02:43,760 --> 00:02:46,430 ‫to the server's real IP address. 55 00:02:46,430 --> 00:02:47,610 ‫All right. 56 00:02:47,610 --> 00:02:49,300 ‫And actually this happens 57 00:02:49,300 --> 00:02:53,030 ‫through your internet service provider or ISP 58 00:02:53,030 --> 00:02:55,933 ‫but the complete details don't really matter for us. 59 00:02:57,363 --> 00:02:59,050 ‫What you need to retain from this part 60 00:02:59,050 --> 00:03:01,950 ‫is that the domain is not the real address 61 00:03:01,950 --> 00:03:06,250 ‫and that a DNS will convert it to that real IP address, 62 00:03:06,250 --> 00:03:09,550 ‫which a browser can then call after it being sent back 63 00:03:09,550 --> 00:03:10,713 ‫to our browser. 64 00:03:12,030 --> 00:03:14,620 ‫So this is how the real address looks like, 65 00:03:14,620 --> 00:03:18,810 ‫so it still has the protocol, but then comes the IP address. 66 00:03:18,810 --> 00:03:22,080 ‫And also the port that we accessed on the server. 67 00:03:22,080 --> 00:03:24,890 ‫And the port number is really just to identify 68 00:03:24,890 --> 00:03:28,070 ‫a specific service running on a server 69 00:03:28,070 --> 00:03:30,903 ‫and so you can think of it like a sub-address. 70 00:03:32,590 --> 00:03:35,350 ‫Remember how we listened to port 8000 71 00:03:35,350 --> 00:03:39,140 ‫on our web server when we set it up in the intersection 72 00:03:39,140 --> 00:03:41,263 ‫that is exactly what this port is. 73 00:03:42,780 --> 00:03:45,590 ‫Also please note that the port number 74 00:03:45,590 --> 00:03:48,460 ‫has nothing to do with the Google Maps resource 75 00:03:48,460 --> 00:03:50,000 ‫that we want to access. 76 00:03:50,000 --> 00:03:52,720 ‫That resource will actually be sent over 77 00:03:52,720 --> 00:03:56,850 ‫in the HTTP request as we will see in a moment. 78 00:03:56,850 --> 00:03:59,673 ‫Okay, and this wraps up the first step. 79 00:04:00,610 --> 00:04:03,310 ‫So once we have the real web address, 80 00:04:03,310 --> 00:04:06,390 ‫a TCP socket connection is established 81 00:04:06,390 --> 00:04:08,740 ‫between the browser and the server, 82 00:04:08,740 --> 00:04:11,270 ‫which are now finally connected. 83 00:04:11,270 --> 00:04:14,190 ‫And this connection is typically kept alive 84 00:04:14,190 --> 00:04:16,810 ‫for the entire time it takes to transfer 85 00:04:16,810 --> 00:04:19,420 ‫all the files of the website. 86 00:04:19,420 --> 00:04:22,910 ‫Now, what are our TCP and IP? 87 00:04:22,910 --> 00:04:27,080 ‫Well, TCP is the Transmission Control Protocol 88 00:04:27,080 --> 00:04:29,730 ‫and IP is the Internet Protocol, 89 00:04:29,730 --> 00:04:32,930 ‫and together they are communication protocols 90 00:04:32,930 --> 00:04:36,870 ‫that define exactly how data travels across the web. 91 00:04:36,870 --> 00:04:37,860 ‫So they're basically 92 00:04:37,860 --> 00:04:40,580 ‫the internet's fundamental control system, 93 00:04:40,580 --> 00:04:44,170 ‫because, again, they are the ones who set the rules 94 00:04:44,170 --> 00:04:47,230 ‫about how data moves on the internet. 95 00:04:47,230 --> 00:04:51,040 ‫And don't worry, we'll learn a bit more about TCP/IP 96 00:04:51,040 --> 00:04:52,673 ‫a bit later in this video. 97 00:04:54,150 --> 00:04:58,570 ‫Anyway, now it's time to finally make our request. 98 00:04:58,570 --> 00:05:02,400 ‫And the request that we make is an HTTP request 99 00:05:02,400 --> 00:05:07,400 ‫where HTTP stands for HyperText Transfer Protocol. 100 00:05:07,430 --> 00:05:12,430 ‫So after TCP/IP, HTTP is yet another communication protocol. 101 00:05:13,520 --> 00:05:16,480 ‫And by the way, a communication protocol 102 00:05:16,480 --> 00:05:18,670 ‫is simply a system of rules 103 00:05:18,670 --> 00:05:22,140 ‫that allows two or more parties to communicate. 104 00:05:22,140 --> 00:05:25,820 ‫And in the case of HTTP, it's just a protocol 105 00:05:25,820 --> 00:05:29,130 ‫that allows clients and web servers to communicate 106 00:05:29,130 --> 00:05:31,800 ‫by sending requests and response messages 107 00:05:31,800 --> 00:05:34,353 ‫from client to server and back. 108 00:05:36,040 --> 00:05:40,150 ‫Now, a request message will look something like this. 109 00:05:40,150 --> 00:05:43,460 ‫So the beginning of the message is the most important part 110 00:05:43,460 --> 00:05:47,700 ‫called the start line, which contains the HTTP method 111 00:05:47,700 --> 00:05:49,690 ‫that's used in the request, 112 00:05:49,690 --> 00:05:53,750 ‫then the request target and the HTTP version. 113 00:05:53,750 --> 00:05:57,890 ‫So about HTTP methods, there are many available 114 00:05:57,890 --> 00:06:00,280 ‫but the most important ones are get 115 00:06:00,280 --> 00:06:04,400 ‫for simply requesting data, post for sending data 116 00:06:04,400 --> 00:06:08,140 ‫and put and patch to basically modify data. 117 00:06:08,140 --> 00:06:11,970 ‫So you see an HTTP request to the server 118 00:06:11,970 --> 00:06:16,010 ‫is not only for getting data but we can also send data. 119 00:06:16,010 --> 00:06:17,410 ‫All right? 120 00:06:17,410 --> 00:06:20,810 ‫Now please don't worry if all these sounds a bit too much 121 00:06:20,810 --> 00:06:22,720 ‫for you at this point. 122 00:06:22,720 --> 00:06:24,640 ‫We will, of course, use these stuff 123 00:06:24,640 --> 00:06:26,690 ‫throughout the rest of the course, 124 00:06:26,690 --> 00:06:29,913 ‫which is actually the whole reason why I'm telling you this. 125 00:06:31,530 --> 00:06:34,080 ‫Anyway, about the request target, 126 00:06:34,080 --> 00:06:37,170 ‫this is where the server is thought that we want to access 127 00:06:37,170 --> 00:06:40,100 ‫the maps resource in this example. 128 00:06:40,100 --> 00:06:41,660 ‫Remember that? 129 00:06:41,660 --> 00:06:45,890 ‫So we had /maps in our URL and now it's sent 130 00:06:45,890 --> 00:06:48,700 ‫as the target in the HTTP request 131 00:06:48,700 --> 00:06:52,490 ‫so that the server can then figure out what to do with it. 132 00:06:52,490 --> 00:06:56,860 ‫And if this is empty, so if it was just a slash, basically, 133 00:06:56,860 --> 00:06:59,660 ‫then we would be accessing the website's root 134 00:06:59,660 --> 00:07:03,680 ‫which would be just google.com in this example. 135 00:07:03,680 --> 00:07:07,720 ‫Then the next part of the request are the request headers 136 00:07:07,720 --> 00:07:10,340 ‫which is just some information that we send 137 00:07:10,340 --> 00:07:12,150 ‫about the request itself, 138 00:07:12,150 --> 00:07:15,110 ‫and there are tons of different headers available 139 00:07:15,110 --> 00:07:17,840 ‫like what browser is used to make the request, 140 00:07:17,840 --> 00:07:22,750 ‫at what time, the user's language and many, many others. 141 00:07:22,750 --> 00:07:26,200 ‫Finally, in the case we're sending data to the server, 142 00:07:26,200 --> 00:07:29,060 ‫there will also be a request body 143 00:07:29,060 --> 00:07:33,593 ‫containing that data, for example, coming from an HTML form. 144 00:07:35,050 --> 00:07:37,740 ‫So that is the HTTP request. 145 00:07:37,740 --> 00:07:40,070 ‫Now, of course, it's not us developers 146 00:07:40,070 --> 00:07:42,670 ‫who manually write these requests 147 00:07:42,670 --> 00:07:45,750 ‫but it's still extremely important that you understand 148 00:07:45,750 --> 00:07:50,170 ‫what an HTTP request and also a response look like 149 00:07:50,170 --> 00:07:53,863 ‫because you will be working with them a ton, okay? 150 00:07:54,710 --> 00:07:58,560 ‫Also, I want to mention that there's also HTTPS 151 00:07:58,560 --> 00:08:00,060 ‫as you probably know. 152 00:08:00,060 --> 00:08:04,330 ‫And the main difference between HTTP and HTTPS 153 00:08:04,330 --> 00:08:09,330 ‫is that HTTPS is encrypted using TLS or SSL, 154 00:08:10,110 --> 00:08:12,520 ‫which are yet some more protocols 155 00:08:12,520 --> 00:08:15,080 ‫but I'm not gonna bore you with these. 156 00:08:15,080 --> 00:08:17,510 ‫But besides these additional encryption, 157 00:08:17,510 --> 00:08:20,930 ‫the logic between HTTP requests and responses 158 00:08:20,930 --> 00:08:23,273 ‫still applies to HTTPS. 159 00:08:24,240 --> 00:08:27,860 ‫All right, so our request now hits the server, 160 00:08:27,860 --> 00:08:31,210 ‫which will be working on it until it has our website 161 00:08:31,210 --> 00:08:32,690 ‫ready to send back. 162 00:08:32,690 --> 00:08:36,180 ‫And it will send it back using, as you can guess, 163 00:08:36,180 --> 00:08:38,530 ‫an HTTP response. 164 00:08:38,530 --> 00:08:41,580 ‫And the HTTP response message actually looks 165 00:08:41,580 --> 00:08:44,050 ‫quite similar to the request. 166 00:08:44,050 --> 00:08:48,350 ‫So also with a start line, headers and a body. 167 00:08:48,350 --> 00:08:52,120 ‫The start line has, besides the HTTP version, 168 00:08:52,120 --> 00:08:54,530 ‫a status code and a message. 169 00:08:54,530 --> 00:08:56,860 ‫So, basically, to let the client know 170 00:08:56,860 --> 00:09:00,460 ‫whether the request has been successful or not. 171 00:09:00,460 --> 00:09:03,630 ‫This 200, for example, means okay, 172 00:09:03,630 --> 00:09:07,430 ‫and the one that everyone knows is status code 404 173 00:09:07,430 --> 00:09:09,250 ‫which means not found. 174 00:09:09,250 --> 00:09:11,880 ‫And so this is where this 404 code 175 00:09:11,880 --> 00:09:13,543 ‫that you already knew comes from. 176 00:09:15,160 --> 00:09:18,120 ‫Then the response headers or information 177 00:09:18,120 --> 00:09:19,810 ‫about the response itself. 178 00:09:19,810 --> 00:09:23,430 ‫So just like before, and there are a ton available 179 00:09:23,430 --> 00:09:26,900 ‫and we can also actually make up our own headers. 180 00:09:26,900 --> 00:09:29,610 ‫Now, what's different about response headers 181 00:09:29,610 --> 00:09:32,350 ‫is that it's actually the back-end developer like you 182 00:09:32,350 --> 00:09:36,320 ‫who specifies them and sends them back in the response. 183 00:09:36,320 --> 00:09:37,670 ‫All right. 184 00:09:37,670 --> 00:09:40,030 ‫Finally, the last part of the response 185 00:09:40,030 --> 00:09:43,440 ‫is, again, the body, which is actually present 186 00:09:43,440 --> 00:09:45,000 ‫in most responses. 187 00:09:45,000 --> 00:09:48,320 ‫And it's also the developer who specifically sends back 188 00:09:48,320 --> 00:09:50,530 ‫the body in the response. 189 00:09:50,530 --> 00:09:54,180 ‫And we actually already did this back in the intersection 190 00:09:54,180 --> 00:09:57,430 ‫using response.end, remember? 191 00:09:57,430 --> 00:10:01,120 ‫And the body should usually contain the HTML of the website 192 00:10:01,120 --> 00:10:04,740 ‫we requested or, for example, JSON data coming back 193 00:10:04,740 --> 00:10:08,070 ‫from an API or something like that. 194 00:10:08,070 --> 00:10:10,290 ‫So we talked in great detail 195 00:10:10,290 --> 00:10:12,300 ‫about the most important parts here, 196 00:10:12,300 --> 00:10:15,910 ‫which are the HTTP request and the response. 197 00:10:15,910 --> 00:10:19,930 ‫But in our imaginary example, we only just did one request 198 00:10:19,930 --> 00:10:22,773 ‫to google.com and got one response. 199 00:10:24,040 --> 00:10:27,330 ‫However, if it's a website that we're trying to access, 200 00:10:27,330 --> 00:10:31,060 ‫there will be many, many more requests and responses. 201 00:10:31,060 --> 00:10:34,270 ‫And that is because when we do the first request, 202 00:10:34,270 --> 00:10:38,270 ‫all we get back is just the initial HTML file, 203 00:10:38,270 --> 00:10:41,540 ‫that file will then gets scanned for all the assets 204 00:10:41,540 --> 00:10:44,270 ‫that it needs to build the entire website 205 00:10:44,270 --> 00:10:49,270 ‫like JavaScripts, CSS files, image files or other assets. 206 00:10:49,390 --> 00:10:51,560 ‫And for each of these different files, 207 00:10:51,560 --> 00:10:55,990 ‫the browser will then make a new HTTP request to the server. 208 00:10:55,990 --> 00:10:58,500 ‫So, basically, this entire back and forth 209 00:10:58,500 --> 00:11:01,500 ‫between client and server that it just explained 210 00:11:01,500 --> 00:11:03,380 ‫happens for every single file 211 00:11:03,380 --> 00:11:06,270 ‫that is included in the website. 212 00:11:06,270 --> 00:11:10,170 ‫There can, however, be multiple requests and responses 213 00:11:10,170 --> 00:11:11,800 ‫happening at the same time. 214 00:11:11,800 --> 00:11:13,870 ‫But the amount is actually limited 215 00:11:13,870 --> 00:11:17,023 ‫because, otherwise, the connection would start to slow down. 216 00:11:17,880 --> 00:11:22,860 ‫Okay, and then finally, when all the files have arrived, 217 00:11:22,860 --> 00:11:24,960 ‫the website is rendered in the browser 218 00:11:24,960 --> 00:11:29,520 ‫according to the HTML, CSS and JavaScript specifications 219 00:11:29,520 --> 00:11:31,710 ‫that you might already know. 220 00:11:31,710 --> 00:11:34,550 ‫And now, as the final piece of this puzzle, 221 00:11:34,550 --> 00:11:37,490 ‫let's again talk about TCP/IP 222 00:11:37,490 --> 00:11:41,000 ‫and figure out how does request and response data 223 00:11:41,000 --> 00:11:43,053 ‫is actually sent across the web. 224 00:11:44,390 --> 00:11:47,900 ‫So we said before that TCP and IP 225 00:11:47,900 --> 00:11:50,710 ‫are the communication protocols that define 226 00:11:50,710 --> 00:11:53,610 ‫how data travels across the web. 227 00:11:53,610 --> 00:11:56,640 ‫Now, I'm not gonna go into a lot of detail here 228 00:11:56,640 --> 00:11:58,810 ‫but here is what you need to know. 229 00:11:58,810 --> 00:12:02,670 ‫First, the job of TCP is to break out the requests 230 00:12:02,670 --> 00:12:07,130 ‫and responses into thousands of small chunks called packets 231 00:12:07,130 --> 00:12:09,010 ‫before they are set. 232 00:12:09,010 --> 00:12:11,940 ‫Then once they get to their destination, 233 00:12:11,940 --> 00:12:14,320 ‫it will reassemble all the packets 234 00:12:14,320 --> 00:12:17,060 ‫into the original request or response 235 00:12:17,060 --> 00:12:19,660 ‫so that the message arrives at the destination 236 00:12:19,660 --> 00:12:23,080 ‫as quick as possible, which would not be possible 237 00:12:23,080 --> 00:12:26,850 ‫if we sent the website as one big chunk. 238 00:12:26,850 --> 00:12:28,840 ‫So that would be like trying to go 239 00:12:28,840 --> 00:12:31,780 ‫through dance traffic with like the biggest bus 240 00:12:31,780 --> 00:12:33,120 ‫that you can imagine. 241 00:12:33,120 --> 00:12:34,573 ‫So, not a good idea. 242 00:12:35,540 --> 00:12:39,550 ‫Now, at the second part, the job of the IP protocol 243 00:12:39,550 --> 00:12:43,280 ‫is to actually send and route all of these packets 244 00:12:43,280 --> 00:12:44,900 ‫through the internet. 245 00:12:44,900 --> 00:12:48,630 ‫So it ensures that all of them arrive at the destination 246 00:12:48,630 --> 00:12:53,090 ‫that they should go using IP addresses on each packet. 247 00:12:53,090 --> 00:12:56,570 ‫And again, this is just a very broad overview 248 00:12:56,570 --> 00:12:59,950 ‫of what really happens behind the scenes of the web, 249 00:12:59,950 --> 00:13:02,920 ‫because that is actually way too much information 250 00:13:02,920 --> 00:13:05,040 ‫than you actually need in order to become 251 00:13:05,040 --> 00:13:07,230 ‫a great back-end developer. 252 00:13:07,230 --> 00:13:10,410 ‫But I hope that you still found this information useful 253 00:13:10,410 --> 00:13:14,270 ‫and interesting, and also not all too confusing. 254 00:13:14,270 --> 00:13:17,100 ‫Now, in the next video, we will then actually do 255 00:13:17,100 --> 00:13:21,270 ‫some HTTP requests so that you become a bit more familiar 256 00:13:21,270 --> 00:13:22,463 ‫with the protocol.