HTTP Crash Course & Exploration

[Music] this video is sponsored by dev mountain if you're interested in learning web development ios or ux design devmountain is a 12-week design and development bootcamp intended to get you a full-time position in the industry to learn more visit devmountain. com or click the link in the description below hey what's going on guys so in this video i want to talk about something that i think isn't talked about often enough and that's the http protocol that we as web developers work with every day and whether you're a backend full stack or even front-end developer it's important to understand http and the whole request response cycle so in this video we're going to touch on how all this works we'll look at the different types of responses methods status codes and you know what you get back from a server when you send a request and we're going to go through some slides and i'd like to test some of this stuff out with node. js and express along with postman which is an http client and i think express is a great framework to kind of give you some examples of how http works because we handle everything ourselves it's very minimalistic we handle the request the response directly rather than having it be abstracted like it is in many higher level frameworks so even if you're not familiar with express or node that's fine we're not focusing on the specific framework or language so let's first talk about what http is it stands for hypertext transfer protocol and it's basically responsible for communication between web servers and clients it's the protocol of the web so every time you open up your browser and you visit a web page or you submit a form or you click a button that sends some kind of ajax request or fetch request something like that you're you're using http and you're going through what's called the request and response cycle you make a request and you get a response back that has something called headers and something called the body and we're going to look more into that cycle in a bit all right so it's important to understand that http is stateless meaning that every request is completely independent okay when you make one request visiting a web page or you go to another page after that or reload the page it doesn't remember anything about the previous basically transaction you can kind of look at each request as a single transaction now there's other things we can utilize to for instance hold login data and make a more enhanced user experience things like programming local storage cookies sessions stuff like that but just know that http at its core is completely stateless so what is https and i'm sure that a lot of you guys know this stuff but just for people that don't https stands for hypertext transfer protocol secure and it's basically where all the data that's sent back and forth is encrypted by something called ssl which stands for secure sockets layer or by tls which is the transport security layer so anytime you have users that are sending sensitive information you should always it should always be over https especially if it's like credit card data social security numbers you want to have a high level of security for that stuff and even things like contact forms you should have https a lot of websites and applications now are just forcing https on every page which isn't a bad idea and you can do this by installing an ssl certificate on your web host and there's there's different levels of security different levels of certificates as well all right so when a request is made to a server it has some kind of method attached to it and there's there's more than this these are the main four that you're going to be working with um and these are the ones i'm going to go over but just know there are there are a couple more so a get request is used when you want to get or fetch data from its from the server this could be just loading a standard html page loading assets like css or images json data xml data and so on so every time you visit a web page you're making a get request to the server via http now a post request is usually used when you're posting data when you're adding something to the server adding a resource typically when you submit a form like let's say a contact form you'll be making a post request if you're submitting uh maybe a blog post you're creating a new blog post that's going to be a post request you're sending data to the server and typically that data will be stored in a database somewhere you can also have forms that make get requests but it's less secure because the stuff that you send in the form is actually going to be visible in the url so typically you don't want to use a get request with a form unless it's some kind of search form where all you're doing is filtering data that's coming back from the server you're not actually posting anything all right and then we have a put request which is used to update data that's already on the server so if you have a blog post you want to edit it maybe change the image or change some text typically you would do that with a put request and then a delete request of course just deletes data from the server all right so with each request and response using http you have something called a header you have something called the body so the body typically with a response is going to be the html page that you're you're trying to load the the json data whatever is being sent from the server and then when you make a request you can also send a request body for instance when you submit a form the form fields you're submitting are part of the request body all right now when it comes to the header you also have request headers and response headers in in something called a general header okay so it's basically divided into three parts and there's different fields on each part so typically a header will look something like this you'll make a method like a get request to a path or url with a protocol in this case http 1.

1 and then you'll have all these different header fields and a lot of these you're not really going to need to care about but it's good to know what some of the more common ones do and what they are especially with the general uh part of it so in general we have the request url which is pretty straightforward it's just the url you're requesting the request method so if it's a get request post request and so on the status code this is probably the most important and i'm going to go over status codes in the next slide the remote address which is the ip of the remote computer the refer policy so if you're if you go to a page from another page it might have some information on that uh and whatever the poll referrer policy is i'm not that familiar with it um the response header fields you have server so if it's apache or nginx or something like that and a lot of times this will be hidden just to prevent hackers from knowing what type of server the the website uses so set cookie is used for servers to send small pieces of data called cookies from the server to the client and then content type so every response has a content type for instance if it's an html page it'll have a content type of text html css files would be text css images you have image slash png image slash jpeg if it's json data it'll be application slash json this is something that i think is really important to know with the different content types and then you also have the content length which is just that it's the length it's in octets which are i believe 8-bit bytes and then also the date okay and there's other fields as well but i'm not going to list every single one or every possible one so some common request fields are cookies now if you have a cookie that was previously sent by the server and you need to send it back to the server you would do it in this field you also have a bunch of accept fields like accepting coding except character set except language these are just the different encodings and languages and stuff that um uh the client is able to understand okay content type again so if you're sending data like let's say you're sending json you'd want to set this to application slash json and then you also have content length as well so authorization um remember http is stateless so you might need to send some type of token within the header the authorization and the header so that you can for instance validate a user to access a protected route or a protected page unless you're using something like sessions on the server and then the user agent is typically a long string that has to do with the software that the user is is using so the operating system the browser things like that and then the refer has info regarding the referring site if you were to to click on a link or whatever so these are just some of the the more common header fields but there are more so if you want to check out the http spec you can look more into that all right so http status codes are really important to understand at least the the most common ones so basically you have ranges you have the 100 through 500 range so 100 is informational basically this is uh it means the request has been received and the process is continuing it's processing 200 means that it was successful so successfully received understood and accepted the 300 range usually has to do with redirection or further action must be taken 400 range is a client error meaning that the request doesn't have what it needs from the client so let's say the server needs a name field sent in the in the request body and you don't send that you're going to get a 400 error or somewhere in that range and then 500 is usually a server error okay so the server failed to fulfill an apparent valid request so everything seems okay as far as what you send to the server but you still get an error something's wrong on the server side all right now these are some important status codes i should say common status codes that you should remember so 200 is just okay it means everything is is fine you make the request you get the html page you get a 200 response 201 is okay but it means something was created so if you're creating a blog post and everything goes okay then you might get a 200 201 response 301 is usually moved to a new url so this has to do with redirection 304 is typically not modified meaning that if you visit a page and it and it gets cached and it hasn't changed at all then you'll have a 304 response or status 400 again bad requests so if you're not sending the correct data to the server 401 is typically or is unauthorized so if you are missing a token or something like that you're not authorized you might get a 401 404 we all know what that means it's not found if you're looking for some page on the server that doesn't exist or some resource that doesn't exist you're going to get a 404 and then 500 is just an internal server error this could mean pretty much anything on the server side all right so those are the status codes those are really important to really memorize and understand so the last thing i want to quickly mention is that there is http version two we've been dealing with 1. 1 for a long long time now all the changes to version 2 are pretty much under the hood meaning you don't have to go and change the way your applications work all the status codes everything like that is all the same it's just faster and more efficient okay so it does stuff like reduces latency by enabling full request and response multiplexing so it's faster it's more efficient it's more secure and this is just a simple image to kind of of show you um uh that it can you can use multiplexing so for instance we get our html page get a response get our style sheet get our response get our script get our response so this is 1. 1 with http 2 multiplexing we can get our html and then get all of our scripts and style sheets basically in one shot here and send the responses at the same time now i'm not extremely familiar with hdb2 i haven't read the spec i haven't worked with it that much but just know it is available it is out there so you might want to look more into it all right so now we're going to jump into express so i can give you some examples on dealing with a request body and headers and sending status codes and stuff like that all right guys so we're going to jump into our little express server in a second but i just want to first show you an example on an actual website i'm just going to use my twitter profile but you can go to any website you want and go to your dev tools in my case my chrome dev tools and then click on the network tab and if i go ahead and reload the page here it's going to make all the requests it needs it's going to get all the files from the server and it's going to show them down here so you can see the different types the status of 200 which means they everything's okay the size this is the document the main html document and then we have all of our javascript files our style sheets our images xhr which is any ajax requests that were made but let's take a look at the main document here and under response you're going to see the body which is of course the html file okay same thing with preview now headers is where you can actually see all the different header fields and remember in the slides i showed you that there's three different sections general response and request so if we look at general you can see our request url which is just the entire url the request method is get we made a get request status code is 200 so everything's okay we get a little green dot the remote address and refer policy now if we look in response we have things like cache control there's a bunch of stuff here that i'm not going to explain some of the stuff i don't even understand but we have like the content length their security policy and then down here we should have like the content type which is text html the character set is utf-8 the date um what else here we have set cookie so they set some cookies on the client status 200 down here we have like response time stuff like that and then in the request headers we have the authority which is the the root domain we have it's a get request the path is my profile https is the scheme and then down here at the very bottom we have the user agent which is this long string which describes my environment so it has it tells you i'm on a mac intel based os x um it's kind of confusing because it says mozilla it says safari and chrome i'm actually on chrome so it shows my the version of chrome that i'm on all right so that's the user agent so i just want you to take note of these values after what we went through in the slides and if you want to narrow it down by files we can see like all the css that was loaded so if i click on one of these i can see all the info for that file including the content type which is text css if i want to look at the ajax requests here so like this one right here this should be application slash jason and if we look at the response this is what it got us so the number of results some i guess some user information so these are all the different uh xhr or ajax requests that were made all right so when you use the fetch api or axios or old school ajax this is where it's going to show up so just get familiar with the network tab it's it's it can be a little daunting at first but it's it's really helpful it lets you know what's going on it shows you the load times and all that stuff all right so enough with that let's jump into i'm going to show you postman first and if you don't have this client which is just awesome especially if you're building apis you can get it at getpostman.

com and as you can see i can make any type of request so get post put patch delete all these other ones to any url in fact i'll go ahead and make a request to twitter. com traversingmedia slash okay and i'm going to make sure it's a get request just like the browser made and i'm going to get the same exact thing i'm going to get all the html it doesn't render it um well actually can we preview it i've never actually tried to preview html is disabled would you like to proceed legacy yeah so whatever you get the html and then headers will give you all the response headers so we can see the content type that we're getting set cookie status all that stuff if we want to look at the cookies we have that tab as well it shows us the status up here as well with the load time and the size okay so we can make any requests from here that we can make in the browser and more because we can actually do put and delete and all that stuff so this is a fantastic tool for testing apis that you're building so let's jump into express real quick i just have a basic express server running here on localhost 5000 and don't worry about it if you're not familiar with express basically all we're doing here is bringing it in initializing it setting it to listen on port 5000 and we have one endpoint meaning that if we make a get request so we said app. get to slash which is the index page it's going to run this function that has access to this request and response object and with our response object we can call dot send which will just send basically just whatever we put in here to the the client okay in this case just a string of hello from express so if i go to postman and i make a get request to http localhost port 5000 i get hello from express and i could do the same thing in the browser get hello from express all right if i open my network tab and reload oh i'm going to go to all here and you can see that i get a 304 which means not modified because it was cached and it didn't change so it gave me this 304.

if i were to change this like say hello from express1 and save and go and reload now i get a 200 if i reload again i get a 304 because it didn't change but over here i can see all my headers so same stuff that i saw with twitter there's just a lot less because there's a lot less going on alright so in postman same thing i can see all my headers now with postman i can send all kinds of stuff i can send a request body i can send headers so we have a lot more freedom to to to basically interact with the request and response cycle now in express actually one thing i want to show you is the content type which by default if you use res. send and you just send a string it's going to be html okay in fact i could put i don't want to make this too much about express but i could put html right in here and if i go to my browser you can see that that actually renders all right now if i were to put jason in here let's get rid of this and let's say msg we'll just say message hello and i save that and we go back to postman and send you can see the content type has changed so with express res. send will basically detect to the content type as best as it can okay but there is a res.

json which is what you should use if you're sending json so if i do that it'll give me the same thing all right it shows the json in the body now we can also get our header values or header fields if we want so i'm just going to do a res. send just to kind of show you the output of this but if i take my request object i can do dot header and then in parentheses any header value i want like let's say the host so i save that and i go back to postman and send i get a response with my host localhost 5000. okay if i wanted let's say the user agent we'll do user das dash agent and if we go back and send we get in this case postman runtime because i'm using postman as a client so this is going to be different than what we saw in chrome if i go back to chrome and reload we're going to see this okay which is different because we're using a different utility a different client all right so just wanted to show you we could do that we can also get just the raw headers so basically all of them if we do request dot raw headers and if we go back to postman and send you can see we basically get an array with all the headers the cache control postman token since we're using postman the user agent the accept value the host all that stuff okay and we can send headers as well which i'll show you in a little bit so we can get header values um what else do i want to show you so let's actually let's change this to a different row let's do like slash contact we'll say that this is a contact form and what i want to show you now is how we can send data to the server in the request body when we send a request we can attach data to that to the body and the way that we access that i'll just go ahead and send it so we can view it the way that we access that is with that request object has body so re request dot body now this won't work for for adjacent data unless you put this piece of middleware in and it won't work for form data unless you put this in that's just an express thing all right but let's go ahead and save that excuse me and let's make a request here to actually i want to i'm sorry i want to change it to a post request okay if you're sending data you want it to be a post so we simply change get to post here so i'm going to save that and go back and then make a post request to slash contact now if i just send it as is i get an empty object because request.

body is empty however if i want to send any data i can click on the body tab and typically you would do this in your front end like in your javascript whether it's react or angular or whatever but this is just for basically testing apis so from here i could send form data if i want now notice when i click this www form url encoded it automatically puts a content type in my header okay because you need to send this along too so we're actually sending a header value here and then in the body i could put a key like let's say name so this is just simulating a form on a website so we'll say value brad and let's do email and brad at gmail okay so if i go ahead and send that we're going to see that down here because we sent that we sent the request. body if i do just request. body.

name and i send that we just get brad all right and you see how i sent the content type in the header if i want to access that i can do request. header and i can grab the content dash type and let's go back and send and we get this url encoded that's the type all right we can also send raw json so if i go ahead and get rid of that header and put in a different content type we actually get a little drop down here so content type i'm going to set it to application slash json go to body and instead of this url encoded i'm going to choose raw okay because we can send raw jason so name and we'll say john doe and i'll go ahead and send and i get application json because that's the content type but again i could access the body if i want so if i want to get rid of that and just do request dot body and save and send that we get our json of john doe all right if we look at the headers content type okay so hopefully this is kind of making sense to you guys that that don't have a lot of experience with this type of thing now what about statuses in postman if i make a post request to contact one and i send that you can see that i get a status of 404. you guys all know what that means it's not found and it just gives me this cannot post contact one so we can send our own statuses i mean when we do a successful res.

send or res. json it's automatically 200 but we can have conditionals and create different statuses based on that so let's say that this route we actually need to have a name if there's no name we want to send back a 400 response which means it's a bad request so i'll simply do an if statement here and let's say if not request dot body dot name then let's go ahead and do a res i'm sorry we want to return a res dot status okay so this is how we can send a status code and i'm going to send a 400 and then after that we could do dot json or dot send i'm going to do dot send and i'm just going to say name is required all right now i'm going to go under the if statement if a name is included then and typically you would do like some database stuff here you would put the the contact into the database or whatever but i'm going to do a res and i'm going to do another status here of 201 which means that everything's okay and something was created okay it means created and i'll do a dot send and then let's just do i'll put a template string in here and say thank you and then we can actually put in the request dot body dot name all right so let's save that let's go back to postman and let's get rid of the name here let's not send it and we get name is required okay because it's looking for that in the body in the request body so if i send it actually i'll just undo that so if i say name john and i send now we get thank you john because it passes we're sending that that request. body.

name okay let's see so the next thing i want to look at is header values now a lot of times when you're dealing with full stack applications you use tokens or json web tokens for um for authentication and you send that and you can either send it in the authorization i like to send it in x off token in a value called x auth token so what i'll do here is create another route let's do app dot we'll do post to let's say slash login all right and then what i want to do here is check for a token in the header so i'm going to say if there's no and then the way that we access header values i already showed you this we can do request dot header and then i'm going to check for x dash off dash token okay so if that's not there then let's send let's send an error let's do return and one thing i want to mention is notice i did the return status here and not here it's because you don't need it if it's the only or the last one but if you have it before if you have another response here even if it's within an if statement that doesn't pass you're going to get an error that says headers already sent so make sure you use return up here okay so i'm just going to return res. status and let's say if no token is included in the header then we'll send to 400 and we'll just send an error that says no token okay now let's do a pretend validation for the token so i'll go ahead and just say if the request. header x dash auth dash token let's say if that is not equal to the string of 1 2 3 4 5 6 then it's going to be invalid so i'm going to return a response status of 401 which is unauthorized so i'll do send and we'll just say not authorized okay and then down here if everything passes we'll do a res.

send and we'll say logged in so we're just kind of simulating a login process obviously it would be much more in depth we'd need to use actual token json web tokens and validate them and so on but let's save that let's try this out so if we go back to postman make a post request to slash login and we don't need any body data because we're just dealing with headers and we can clear out content type let's just send that so we get no token now i'm going to add a header value of x dash auth dash token but i'm going to do 1 2 three four five which is wrong so we get not authorized if i do one through six we get logged in okay so just an example of of how you can authenticate through um tokens in the in the headers okay and by the way if you're interested in we do this in my mern stat course we do all this this type of stuff all right so let's do uh let's simulate a put request so i'm just going to get rid of this so for put requests we would do app. put and maybe it's like a blog post so we'd have like slash posts now usually you'd have to identify which post you're updating and you would do that within the url so it would be like colon id which is like a placeholder all right and i know that we're doing a lot of express stuff but my goal here is to just get you familiar with sending request body fields header fields dealing with that sending status codes back so here usually what would happen is we would do some database stuff so database stuff to update the the post and then send back a response let's do a res. json and we'll send the id now if you want to get the id that's passed in you can actually use request dot params and then whatever the param in this case id and then the title we're going to send in the body so i'll do request dot body dot title okay so request params is going to access the url values request body will access the form data or the json data that you send in the body so we'll save that and from postman we can make a put request to slash and we'll do post slash 99 okay so this will get accessed with request.

params and then in the body since we're going to be sending data we actually have to add a header value of content type and i'm just going to send raw json so we'll do application jason and then let's send the title so title my blog post and if we send we get a response back with the id of 99 because that's what we put in here and then the title that's what we put in the body and i could put anything at all in here okay so hopefully that just gives you a good an idea of how put requests work but typically you would do an update of the database using that id and then delete would would basically be the same thing so we just do app. delete and include the id delete it in the database and then return maybe most likely not going to return the post because it's deleted so you might do something like a message a message and say post actually what we could do is we could say post and then take the id and say deleted okay so now from postman we could make a delete request we don't need any of this we don't need this and the headers we could just send that we get post that deleted all right so yeah i mean hopefully this helps a little bit understand how this goes now with express we can set a static folder and this pertains to if you just have a static html website where you have a bunch of css files and you know javascript files and stuff like that so in express what we can do is we can actually set a specific folder to be our static folder and we do that with app dot use and in here i can just say express dot static and then here i can put the location of the folder which is going to just be public so now in my folder structure actually i already have a public folder i forgot i created that with an index html file that just says hello world so i should be able even though i don't have a route for my index page i have this static folder so that should load the html file if i go to my browser we can see it there and if i go to postman we can see oops we want to make get to the index and now we can see the hello world if i wanted to create like some css files in my public folder i could do css and create style. css and we'll just do like body we'll say background sky blue so i'll save that let's create a javascript in our public folder as well we'll say folder js and file main.

js and i'll just do uh console log of one two three i just wanna include these files in my my html so back in my html i'll do a link to css slash style and then i'll link my javascript down here oops script source and js slash main js all right so i just want to show you that if i go to chrome now and i reload in my network tab i'm going to see all those files okay they're all getting loaded we have our main document here which has the content type of text html we have our style sheet okay text style we have our javascript so we can see all that stuff we can also see the body of each one as well okay and it would be the same if you had like some kind of shared host and you just uploaded your html and css and all that you get the same type of thing here and of course we can narrow the files down css javascript and if i had some kind of fetch fetch request or ajax request that would show under xhr okay so hopefully this you know this gives you a good idea of how http works i know that we focused a lot on express but again i think it's a good example just because you have direct access to everything to all the headers and body on both sides so now keep in mind when you deploy a node.