Web Architecture

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

Transcript

1. WEB ARCHITECTURE
   NTUST CODING CLUB
   

   View Slide

2. WEB ARCHITECTURE
   OUTLINE
   ▸ Server & Client
   ▸ HTTP?
   ▸ ೲӥ Enter ԏ盅咳ኞጱԪ
   ▸ 蝢懱㶧ਧ
   ▸ 礚፡ HTTP 獉਻
   

   View Slide

3. ֑๐瑊 / ਮ䜛ᒒ
   Ӟ獤傶ԫ
   

   View Slide

4. CLIENT
   SERVER
   ———— 翕᪠蝫娄 ————
   

   View Slide

5. WEB ARCHITECTURE
   ਮ䜛ᒒ
   ▸ ֦ጱ倵薩瑊
   ▸ 礓㮆 App ҁֺই物Facebook҂
   ▸ curl, netcatҁLinux 瞲犤҂
   ▸ request ҁNodeJS ጱ HTTP client library҂
   

   View Slide

6. WEB ARCHITECTURE
   ֑๐瑊
   ▸ Apache
   ▸ LAMP — Linux / Apache / MySQL / PHP
   ▸ nginx
   ▸ 斕ᰁ玕ᘒӬ穉斃盠ጱ֑๐瑊
   ▸ IIS
   ▸ 盏敟ڊߝ牧砇蟴 ASP.NET 螀֢ࣁ Windows Ӥ
   

   View Slide

7. HTTP?
   

   View Slide

8. HYPER TEXT TRANSFER PROTOCOL
   HTTP
   WEB ARCHITECTURE
   

   View Slide

9. ᮎ犚ࣁೲӥ ENTER
   ԏ盅咳ኞጱԪ眐
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. 奾๳牐
    

    View Slide

14. WEB ARCHITECTURE
    ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐
    ▸ DNS 礚扇
    ▸ ಩翕࣎旉矦౮ IP ֖࣎
    ▸ TCP 蝫娄
    ▸ ݻ֑๐瑊咳蚏 TCP 蝫娄ᥝ穩
    ▸ ୌ缏 HTTP 藶穩㪔Ӭ蝑ڊ
    ▸ 虏౯㮉㬵፡፡ HTTP ጱ獉਻牦
    蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
    

    View Slide

15. WEB ARCHITECTURE
    ▸ Routing
    ▸ 䲆礯䌘䛑 / 碝ᄤጱ敟誢᪠ኧ
    ▸ Controller / Script / CGI
    ▸ ݢ胼ฎӞ㮆 php 䲆礯牧犖ݢ胼ฎ NodeJS ጱ纷ୗ
    ▸ 蜴ࢧ HTTP ࢧ䛑妔ਮ䜛ᒒ
    ▸ 匍ࣁ֦ݢ犥፡ک Google Ḓ殷ԧ牦
    ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐
    蝡犚Ԫ眐᮷ฎኧ֑๐瑊ਠ౮ጱ
    

    View Slide

16. WEB ARCHITECTURE
    ▸ 倵薩瑊ӥ斉ٌ犢虻碘 (瑽粙, CSS, ...)
    ▸ 叨ኞๅग़ጱ HTTP 藶穩
    ▸ HTML ჉礕୚砻樄ত向ڊ翕殷
    ▸ JavaScript ୚砻樄ত᪒ JavaScript 纷ୗ
    ▸ 匍ࣁ֦ݢ犥ࣁ Facebook Ӥ咳䔂෈ԧ牦
    ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐
    蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
    

    View Slide

17. WEB ARCHITECTURE
    HTTP 藶穩
    GET / HTTP/1.1\r\n
    Host: localhost\r\n
    Accept: text/html\r\n
    \r\n
    

    View Slide

18. WEB ARCHITECTURE
    HTTP/1.1 200 OK\r\n
    Content-Length: 45\r\n
    Content-Type: text/html\r\n
    \r\n
    Hello, Web
    HTTP ࢧ䛑
    

    View Slide