那些在瀏覽器背後發生的大小事情
WEB ARCHITECTURENTUST CODING CLUB
View Slide
WEB ARCHITECTUREOUTLINE▸ Server & Client▸ HTTP?▸ ೲӥ Enter ԏ盅咳ኞጱԪ▸ 蝢懱㶧ਧ▸ 礚፡ HTTP 獉
֑๐瑊 / ਮ䜛ᒒӞ獤傶ԫ
CLIENTSERVER———— 翕᪠蝫娄 ————
WEB ARCHITECTUREਮ䜛ᒒ▸ ֦ጱ倵薩瑊▸ 礓㮆 App ҁֺই物Facebook҂▸ curl, netcatҁLinux 瞲犤҂▸ request ҁNodeJS ጱ HTTP client library҂
WEB ARCHITECTURE֑๐瑊▸ Apache▸ LAMP — Linux / Apache / MySQL / PHP▸ nginx▸ 斕ᰁ玕ᘒӬ穉斃盠ጱ֑๐瑊▸ IIS▸ 盏敟ڊߝ牧砇蟴 ASP.NET 螀֢ࣁ Windows Ӥ
HTTP?
HYPER TEXT TRANSFER PROTOCOLHTTPWEB ARCHITECTURE
ᮎ犚ࣁೲӥ ENTERԏ盅咳ኞጱԪ眐
奾牐
WEB ARCHITECTUREᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐▸ DNS 礚扇▸ 翕࣎旉矦౮ IP ֖࣎▸ TCP 蝫娄▸ ݻ֑๐瑊咳蚏 TCP 蝫娄ᥝ穩▸ ୌ缏 HTTP 藶穩㪔Ӭ蝑ڊ▸ 虏౯㮉㬵፡፡ HTTP ጱ獉牦蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
WEB ARCHITECTURE▸ Routing▸ 䲆礯䌘䛑 / 碝ᄤጱ敟誢᪠ኧ▸ Controller / Script / CGI▸ ݢ胼ฎӞ㮆 php 䲆礯牧犖ݢ胼ฎ NodeJS ጱ纷ୗ▸ 蜴ࢧ HTTP ࢧ䛑妔ਮ䜛ᒒ▸ 匍ࣁ֦ݢ犥፡ک Google Ḓ殷ԧ牦ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐蝡犚Ԫ眐᮷ฎኧ֑๐瑊ਠ౮ጱ
WEB ARCHITECTURE▸ 倵薩瑊ӥ斉ٌ犢虻碘 (瑽粙, CSS, ...)▸ 叨ኞๅग़ጱ HTTP 藶穩▸ HTML 礕砻樄ত向ڊ翕殷▸ JavaScript 砻樄ত᪒ JavaScript 纷ୗ▸ 匍ࣁ֦ݢ犥ࣁ Facebook Ӥ咳䔂ԧ牦ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
WEB ARCHITECTUREHTTP 藶穩GET / HTTP/1.1\r\nHost: localhost\r\nAccept: text/html\r\n\r\n
WEB ARCHITECTUREHTTP/1.1 200 OK\r\nContent-Length: 45\r\nContent-Type: text/html\r\n\r\nHello, WebHTTP ࢧ䛑