Web Architecture

那些在瀏覽器背後發生的大小事情

Transcript

1. WEB ARCHITECTURE NTUST CODING CLUB
2. WEB ARCHITECTURE OUTLINE ▸ Server & Client ▸ HTTP? ▸ ೲӥ Enter ԏ盅咳ኞጱԪ ▸ 蝢懱㶧ਧ ▸ 礚፡ HTTP 獉਻
3. ֑๐瑊 / ਮ䜛ᒒ Ӟ獤傶ԫ
4. CLIENT SERVER ———— 翕᪠蝫娄 ————
5. WEB ARCHITECTURE ਮ䜛ᒒ ▸ ֦ጱ倵薩瑊 ▸ 礓㮆 App ҁֺই物Facebook҂ ▸ curl, netcatҁLinux 瞲犤҂ ▸ request ҁNodeJS ጱ HTTP client library҂
6. WEB ARCHITECTURE ֑๐瑊 ▸ Apache ▸ LAMP — Linux / Apache / MySQL / PHP ▸ nginx ▸ 斕ᰁ玕ᘒӬ穉斃盠ጱ֑๐瑊 ▸ IIS ▸ 盏敟ڊߝ牧砇蟴 ASP.NET 螀֢ࣁ Windows Ӥ
7. HTTP?
8. HYPER TEXT TRANSFER PROTOCOL HTTP WEB ARCHITECTURE
9. ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐
13. 奾๳牐
14. WEB ARCHITECTURE ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 ▸ DNS 礚扇 ▸ ಩翕࣎旉矦౮ IP ֖࣎ ▸ TCP 蝫娄 ▸ ݻ֑๐瑊咳蚏 TCP 蝫娄ᥝ穩 ▸ ୌ缏 HTTP 藶穩㪔Ӭ蝑ڊ ▸ 虏౯㮉㬵፡፡ HTTP ጱ獉਻牦 蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
15. WEB ARCHITECTURE ▸ Routing ▸ 䲆礯䌘䛑 / 碝ᄤጱ敟誢᪠ኧ ▸ Controller / Script / CGI ▸ ݢ胼ฎӞ㮆 php 䲆礯牧犖ݢ胼ฎ NodeJS ጱ纷ୗ ▸ 蜴ࢧ HTTP ࢧ䛑妔ਮ䜛ᒒ ▸ 匍ࣁ֦ݢ犥፡ک Google Ḓ殷ԧ牦 ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 蝡犚Ԫ眐᮷ฎኧ֑๐瑊ਠ౮ጱ
16. WEB ARCHITECTURE ▸ 倵薩瑊ӥ斉ٌ犢虻碘 (瑽粙, CSS, ...) ▸ 叨ኞๅग़ጱ HTTP 藶穩 ▸ HTML ჉礕୚砻樄ত向ڊ翕殷 ▸ JavaScript ୚砻樄ত᪒ JavaScript 纷ୗ ▸ 匍ࣁ֦ݢ犥ࣁ Facebook Ӥ咳䔂෈ԧ牦 ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
17. WEB ARCHITECTURE HTTP 藶穩 GET / HTTP/1.1\r\n Host: localhost\r\n Accept: text/html\r\n \r\n
18. WEB ARCHITECTURE HTTP/1.1 200 OK\r\n Content-Length: 45\r\n Content-Type: text/html\r\n \r\n <html><body><h1>Hello, Web</h1></body></html> HTTP ࢧ䛑