More Related Content
Similar to How our computers connect to facebook
Similar to How our computers connect to facebook (20)
Recently uploaded
Recently uploaded (20)
How our computers connect to facebook
- 1. How our computers connect to Facebook(or any other website) Yi Kuo
- 2. Internet?
- 3. How we access Facebook? What happened in the second?
- 4. Websites?
- 5. Language: HTTP HyperText Transfer Protocol
- 6. Language: HTTP HyperText Transfer Protocol GET / HTTP/1.1 Host: www.facebook.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/7 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Language: zh-TW,zh;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate, br Connection: keep-alive Cookie: fr=1KvAgepb7obISMaDy..Bfrpvm.Ej.AAA.0.0.Bfrpvu.AWVbDWhysOw; sb=5puuX_hOTwOlynW1kzQxecHh; datr=5puuX83dw4nqdIGZy_rBc_8P; wd=1280x198; dpr=1.5 Upgrade-Insecure-Requests: 1
- 7. GET / HTTP/1.1 Host: www.facebook.com User-Agent: Mozilla/5.0 (W Accept: text/html,applicat Accept-Language: zh-TW,zh; Accept-Encoding: gzip, def
- 8. GET / HTTP/1.1 Host: www.facebook.com User-Agent: Mozilla/5.0 (W Accept: text/html,applicat Accept-Language: zh-TW,zh; Accept-Encoding: gzip, def Request Method Location https://www.facebook.com/ HTTP Version Headers POST
- 9. GET /kuokuoyiyi HTTP/1.1 Host: www.facebook.com User-Agent: Mozilla/5.0 (W Accept: text/html,applicat Accept-Language: zh-TW,zh; Accept-Encoding: gzip, def Request Method Location https://www.facebook.com/kuokuoyiyi HTTP Version Headers
- 10. Language: HTTP HyperText Transfer Protocol HTTP/2 200 OK X-Frame-Options: DENY X-Xss-Protection: 0 ⋮ X-Firefox-Spdy: h2 <!DOCTYPE html> <html lang="zh-Hant" id="facebook" class="no_js"> <head><meta charset="utf-8" /><meta name="referrer" content="origin-when- crossorigin" id="meta_referrer" /><script nonce="oX7Z8G3a">window._cstart=+new Date();</script><script nonce="oX7Z8G3a">function envFlush(a){function b(b){for(var c in a
- 11. HTTP/2 200 OK X-Frame-Options: DENY X-Xss-Protection: 0 ⋮ X-Firefox-Spdy: h2 <!DOCTYPE html>
- 12. HTTP/2 200 OK X-Frame-Options: DENY X-Xss-Protection: 0 ⋮ X-Firefox-Spdy: h2 <!DOCTYPE html> Status Code Response Data
- 13. HTTP/2 404 Not Found X-Frame-Options: DENY X-Xss-Protection: 0 ⋮ X-Firefox-Spdy: h2 <!DOCTYPE html> Status Code Response Data
- 14. HTTP/2 403 Forbidden X-Frame-Options: DENY X-Xss-Protection: 0 ⋮ X-Firefox-Spdy: h2 <!DOCTYPE html> Status Code Response Data
- 15. Connection: TCP Transmission Control Protocol A A + B B
- 16. But where is www.facebook.com? ?
- 17. IP Address Internet Protocol Address 140.114.197.101 31.13.87.36 2a03:2880:f12d:83:face:b00c:0:25de (IPv6)
- 18. DNS Domain Name System www.facebook.com 31.13.87.36 www.google.com 216.58.200.36 yikuo.dev 172.67.169.118
- 19. Routing – Sending out to the internet 140.114.197.101 My Computer @ Dorm Hsin 140.114.197.254 Dorm Hsin Floor 3 / 4 Gateway 140.114.1.85 NTHU Networking Center 140.114.1.70 NTHU TANet Gateway 192.192.61.110 TANet Taiwan Academic Network To 31.13.87.36
- 20. Routing – BGP 140.114.197.101 My Computer @ Dorm Hsin 140.114.197.254 Dorm Hsin Floor 3 / 4 Gateway 140.114.1.85 NTHU Networking Center 140.114.1.70 NTHU TANet Gateway 192.192.61.110 TANet Taiwan Academic Network TANet ISP A Border Gateway Portocal ISP B ISP C The Facebook Network 31.13.*.* Who can get to 31.13.87.36? I can in 1 step I can in 2 steps Who can get to 31.13.87.36? I can in 1 step To 31.13.87.36 Reply from 31.13.87.36
- 21. Routing – Sending back to sender 140.114.197.101 My Computer @ Dorm Hsin 140.114.197.254 Dorm Hsin Floor 3 / 4 Gateway 140.114.1.85 NTHU Networking Center 140.114.1.70 NTHU TANet Gateway 192.192.61.110 TANet Taiwan Academic Network Reply from 31.13.87.36
- 22. Internet Protocol Suite of HTTP Physical Connection Routing TCP HTTP
- 23. Q&A
- 24. Thanks for your listening!
Editor's Notes
- Hi everyone, my name is Yi. I am from Computer Science department. Today I’m going to share about how our computers connect to Facebook, or any other website
- We browse the Internet everyday. But have you wonder how does our computers connect to the Internet? How could images from the other side of the world transits to your computer? I will have a simple introduction of how Internet and website works.
- First, lets take Facebook as an example. When we want to watch feeds on Facebook, we simply type www.facebook.com into our browser’s address bar. And within a few seconds, Facebook’s homepage showed up! What happened between those few seconds?
- A website is actually servers that send information to our computer, and our browser renders the data and show it. Servers are no different from our computer. To connect to a website, our computer has to communicate with their servers to exchange data
- Just like humans, computers also need to have a language to communicate. For websites, this language is HTTP. You can see that websites have the http:// prefix in the address. Actually, you may see https:// more often. They are using the same language but the data is encrypted in HTTPS, thus is safer to use HTTPS.
- Lets see how HTTP looks like. This is what our computer says to the server when we connect to Facebook’s home page
- This is the HTTP Request header. It has several parts:
- First, Request Method. We are only fetching the webpage, so we use the GET method. If we want to send additional data to the server, we use the POST method. Next, there is the Location, which page we are going to request. We are going to request the root page, so it looks like this.
- If we want to see my Facebook profile, then it looks like this. And next is the HTTP version and some additional Headers. These Headers provide the server with some additional settings. For example, the User-Agent header tells the server what browser we are using.
- This is what Facebook’s server response to us
- This is the HTTP Response Header. It is similar to the Request, but there are some additional parts
- There is the 200 OK Response Code. There are different codes too, such as the famous 404 code.
- The 404 Not Found means the user requested a non existent page, and
- The 403 Forbidden means the user does not have permission to view the page Bottom here is the response data, the website’s content and is usually in the HTML format
- So now we have the language, but what is the medium for them to talk to each other? So here comes TCP. TCP is like a tunnel that can let computers talk to each other. To establish a connection, computers have to do a handshake Lets see how the handshake works… First, our computer sends a number A, then the server generates a number B and sends back A+B, finally, we send B to the server. This can ensure that both computers can receive from each other correctly
- But how does our computer knows where is Facebook? Here comes the Routing.
- IP Address are like address in our real life, every computer on the network has an IP Address
- And there is the domain name system. The domain name system is like a phone book, that gives the corresponding IP address of the Domain Name Actually you can buy your own domain name too! This is my domain name. It will link to my blog
- Now we have Facebook’s IP address, we generates a package. And then we send our package out to the Internet Service Provider In NTHU, our service provider is Taiwan Academic Network
- Now it comes to border routing, every circle here is an autonomous system. Every autonomous system controls a part of the IP in the Internet, and we have to send our package to the correct autonomous system. So this is how BGP works: First, our ISP asks who can get to Facebook’s IP address? Since ISP B is not directly connected to Facebook, so it also asks. ISP C replies to B that it can get to Facebook in one step, and B replies to us that it can in 2 steps. And ISP A replies to us that it can in one step. Now we have two choices. We will choose the shortest path: going through ISP A We finally got to Facebook, and Facebook generates the response and throw it back to us.
- It will follow the opposite way of how we come from, and finally it gets to our computer!
- So what I introduced stacks on each other. First there is Physical Connection, such as copper wire, radio waves or optical fiber Next, packets route to the server with the physical connection. And next, TCP makes a tunnel to let us talk to the server. Last, we use HTTP, which is the language our computer talks.