Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Architecture

Inndy
May 11, 2016

Web Architecture

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

Inndy

May 11, 2016
Tweet

More Decks by Inndy

Other Decks in Technology

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