WebDev Starter Pack - What is HTTP/Web Servers?

WebDev Starter Pack - What is HTTP/Web Servers?

By andrercules | devnewbies | 5 Jun 2020


Hello guys! Lets talk about how a website works, we already know about what web developers do in this article before...

Now we will focus in the website and in the back-end development, so let's talk here about HTTP protocol, this protocol is the main reason that you are seeing this article and all the websites you access all the World wide web, and its really important if you want to be a developer understand it.

Summary

  • What is HTTP Protocol
  • HTTP server
  • Talking with the HTTP - JSON
  • HTTPS
  • Another protocols

 


 

What is HTTP Protocol

 HTTP is an acronym to: Hypertext Transfer Protocol.

And so... What protocol is? Protocol in the computer science, in short, it's just "rules" to the computers understand each other, they have to follow this rules because they are different computers.

So HTTP protocol is the main reason that we are reaching all the websites in our network. Normally there is a lot about network issues until we could talk about the HTTP.

In short, the client requests for the website and then the web server response with all documents that needs to mount the website! And that's how a HTTP server works.

 


 

HTTP Server

When a user requests for a website he wants normally this: HTML, CSS and JS, why? this is the way that browser can constructs a website to you!

So as I explained in the last article, a Back-End developer will work creating a web server... How? Using the backend languages(Java, PHP, Ruby, Python...), they have frameworks to work with HTTP Server!

just remember: HTTP Server is equals to Web Server(normally, there is another protocols that we can send to client as websocket).

Simply talking, your client will request your website using the browser and your web server will answer you with its documents, then user browser will understand and show the website.

2f20c70abbb548b1bfa613a013c8dba4bc3aa4e24da94b0fab95b158194bf071.jpeg

But... where the http works for each website can I see this?

The answer is: Yes all the browsers has an network tab, just to watch all the requests that cames in the HTTP from the webserver. Each website you access is normally a different HTTP Server in the world wide web!

I'm in the category page at Publish0x:

Open right click in the mouse

Clicks in inspect above, then you click in the network tab bellow:

will open this strange window in your browser

then you'll need to refresh the web page again because all the HTML was already load!

The html from category page of publishox

Look that's the html from publish0x and where it cames, request url: The url that i called from the web server, did a GET to the HTML and returned the Status Code: 200 (that means ok!), and that's how your browser watches the HTTP requests.

Amazing isn't it? You can see the method that your browser is requesting, normally is GET verb! This HTTP Methods is the way we are getting our website, there is a lot of verbs to read about, but the mainly is GET and POST.

 


 

Talking to HTTP - JSON

HTTP Server works with the server side from our websites and its answer is all the website we have there, but not only this...

The web server send data but can receive data in some curious cases...

Data is the one of the most important things to traffic in the HTTP Server, is the way that we talk to him some things we need in database!

Real example:

You register in a form to create a new blog in publish0x, it sends a POST method to the http server then the data is sent about your blog so it will needs be shown to you and all the users after! To this you will need to transform and send your data as a JSON for the server to store it, and persist it there in a database!

JSON means Javascript Object Notation, is a lightweight way that the server can receive your data from the front end to back end, that's the easier way to send data to our back end!

This is a JSON:

kind of JSON

about HTTP methods...

Web server has their methods, GET, POST, PATCH, PUT, DELETE, you won't need to save all of this in your mind, the mainly POST and GET is the primordial to understand:

GET - Request to web server some data and response is just feedback the data(HTML, CSS, JS data to your browser).

POST - Send data from front end to web server and web server response is the feedback from your post data on that server!(fill an form so you'll send this data to server)

all the rest there is different responsabilities and you can read here.

about Status Code...

In the web server we need to know if everything is going well, so in the server the back-ender needs to talk "ok now i will answer you" or "no i havent found your answer" to your web browser... So the response send the status code!

The most common uses is the codes:

200 - Ok we find in the web server and that's the answer!

404 - Oops i haven't found what you want from our answer! (most-known Error 404 xD)

500 - Oops there is a problem in our database!

There is a list about the status code that can answer to your web browser here.

 


HTTPS

HTTP and the HTTPS has their differences but the main difference its the secure way, is almost the same but with a stronger security protocol!

 


Another protocols

HTTP is not the only protocol in the network world, there is a lot of acronymous there! But the main protocols that we need to know is:

  • SMTP - Email protocol
  • FTP - File transfer protocol
  • WebSockets - HTTP with real time interaction
  • IP - Internet Protocol

So that's some of web protocol examples that you can search more after this article!

 

Thanks everyone, I tried to minify all this concepts again and tip if you liked and enjoy it, thank you all!


andrercules
andrercules

front end developer, and follow me on twt: https://twitter.com/andrecrjr


devnewbies
devnewbies

Web development, Front-end, Telegram Bot, Javascript in a newbie way, follow me to good development things!

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.