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

Node.js - Web 前端程式開發實務

Node.js - Web 前端程式開發實務

Joseph Chiang

May 02, 2013
Tweet

More Decks by Joseph Chiang

Other Decks in Programming

Transcript

  1. Copyright © 2012 FITPI. All rights reserved. "HFOEB ๏ /PEFKT൞൉喁

    ❖ ↌ᅟğ'BDFCPPL 1MVSL ❖ 1)1 "QBDIF ๏ 㬪൉喁≾喁ੀྛ ❖ &WFOUESJWFO ଆ⊾߄ +BWB4DSJQU  ࠧℭaྍaॹb 2
  2. Copyright © 2012 FITPI. All rights reserved. ൉喁൞/PEFKT ๏ ⃸+BWB4DSJQU҂ᆺ≓ྛᄝ⏟´ఖഈb

    ❖ ۵"41 1)1 +41 Ⴕཌྷ๝ֹ໊֥b ❖ ২ྛྟቔ∊a۽ऎ֥4IFMM4DSJQUb ๏ ॖỒሱӮ㬪၂෻8FC4FSWFSb ๏ &WFOUESJWFO൙ࡱ⃱ọb ๏ /POCMPDLJOH٤؁ೖb 3
  3. Copyright © 2012 FITPI. All rights reserved. )FMMP8IP 4 var

    argv = process.argv, who = (typeof argv[2] !== "undefined") ? argv[2] : "World"; console.log("Hello " + who + "!"); http://f2eclass.com/lab/nodejs/hello.js > node hello.js “Awoo” ⇔၂ἠࠎЧ֥4IFMM4DSJQU ໃῲ۽ቔஆӱ္ିႨ+BWB4DSJQUῲ⇔ਔĆ http://nodejs.org/docs/latest/api/index.html
  4. Copyright © 2012 FITPI. All rights reserved. )FMMP8IP  5

    var http = require("http"); http.createServer(function (req, res) { res.setHeader("Content-Type", "text/html"); res.write("Hello World!"); res.end(); }).listen(8000); console.log("Server running at http://localhost:8000"); http://f2eclass.com/lab/nodejs/http.js http://localhost:8000 http://nodejs.org/api/http.html#http_http ॹ෎ࡹ৫8FCයڛఖĆ
  5. Copyright © 2012 FITPI. All rights reserved. /PEFKTֹ໊֥ 6 ᄝ:BIPP֥ࠎẒ࠯ℿࡏἧ൞Ⴎ-".1ἧӮ֥

    LAMP Linux Apache MySQL PHP ቔ∊༢ⅼ ↌∉යڛఖ ⊷ਘῠ ᗥ؊ӱൔ∽࿽ /PEFKTϲဆਔ‥⊕࢘೤a౏ۿି۷ルնĆ
  6. Copyright © 2012 FITPI. All rights reserved. Ⴕ൉喁ݺẕĤ ๏ ⅼ၂8FCӱൔ∽࿽ğభᗥ؊׻⇔+4b

    ❖ ᾞభ؊۽ӱ℩ạ⏟´ఖࢳ٢đᗥ؊၂∄Ⴕି৯ῘứĆ ❖ ॖ০Ⴈ+BWB4DSJQU&WFOUESJWFO֥หྟb ❖ ⏟´ఖἬṅ+BWB4DSJQUಯಖॖၛ஝+BWB4DSJQU!! ๏ $PNNPO+4ἲữğб⏟´ఖ۷Ⴕ᾵ἧb ๏ /1.สࡱܵ৘ğ٤ӈಸၞν⊬ܵ৘สࡱb ๏ ࠃ≍֥ഠಕb ๏ Ῐứ۷㬪ࠧℭ֥↌ᅟ∣Ⴈӱൔb 7
  7. Copyright © 2012 FITPI. All rights reserved. $PNNPO+4 8 //

    ಁա require ሡ֎෦ JavaScript ࡌೖ var mod = require("./commonjs-module.js"); mod.bar(); http://f2eclass.com/lab/nodejs/commonjs.js > node commonjs.js SFRVJSF≘ೆຓ҆+BWB4DSJQU http://f2eclass.com/lab/nodejs/commonjs-module.js // ฒෆ။ੋશҬᏓᏐ var foo = function () { console.log("foo is invoked"); }; // ॴ༗ཁඃ֎෦ଘऔతํ๏҃ሱੑ౎धཁ༻ exports exports.bar = function () { console.log("bar is invoked"); }; commonjs.js commonjs-module.js ࢳ㢯ਔಆთṉ⅂∻ຓ҆⊷ჷܵ৘֥↜ⅳ
  8. Copyright © 2012 FITPI. All rights reserved. /1.สࡱܵ৘ ๏ /PEFKT1BDLBHF.BOBHFNFOU

    ๏ ௲ਲğw၂ἠࢳ㢯ٚσб⇧↜↜ⅳὕ؟֥ഠಕx ๏ Ⴈ/PEFKT⇔4IFMM4DSJQUa҆ઋ۬༢ⅼ㢻ݺẕĤ ❖ ॖႨ֥⊷ჷ෾؟ਔđᾞնն㦆ഒῘứℭᾇĆ 9
  9. Copyright © 2012 FITPI. All rights reserved. ൐Ⴈ-JWF3FMPBE ๏ ଢ仛ẵσ၂֌ṉọđ↌∉ࣼ὜ᇗྍᆜ৘

    ❖ ο$USM '൭ọᇗྍᆜ৘ޓ๥७ ๏ ν⊬/PEFKTϱ֥-JWF3FMPBEයڛఖ OQNJOTUBMMHTJNQMFMJWFSFMPBE ๏ ⬏ọ-JWF3FMPBEයڛఖ DE۽ቔଢ仛 TJNQMFMJWFSFMPBEQPSU ๏ ν⊬-JWF3FMPBE֥ग़㊒؊ (PPHMFෆ⇨o$ISPNF-JWF3FMPBEpࣼ὜ᅳ֞ 10 ۋ൳OQN֥ルն∻ٚьĆ
  10. Copyright © 2012 FITPI. All rights reserved. ൐Ⴈ-JWF3FMPBE 11 ẵσႵྩڿ

    ⏟´ఖ္὜۷ྍ $ISPNF֥-JWF3FMPBE℟ק යڛఖ ⏟´ఖ ࣋᠃࿈ઢ ؂ᡒ䈕ҊᏓಈฒճใ Ꮕ౸Ꮣಈबॏ৽ࡌೖ <port>
  11. Copyright © 2012 FITPI. All rights reserved. Ⴕ൉喁ὒẕĤ ๏ ෾ྍਔbὕ҂ⴺ↛קa"1*္ӈᄝ۷ྍb

    ๏ ↌∉Ⴕ಩ޅྩڿ׻֤ᇗྍ⊋ྛOPEFFYFb ๏ ὜ၹ㬪၂ἠ+BWB4DSJQU&SSPSࣼ⃸4FSWFS㍂וb ๏ 僯Ⅲẵσẕ৘҂ၞđ֤թ౼'JMF4ZTUFN"1*b ๏ Ⴕޓ؟٤๝֥҄ẕ৘č$BMMCBDL1BUUFSO b 12
  12. Copyright © 2012 FITPI. All rights reserved. ၂ἠấ↪ࣼ὜㍂ו 13 //

    ಁա require ሡ֎෦ JavaScript ࡌೖ var mod = require("./commonjs-module.js"); // foo(); // ະఆٛతവࣜʂ foo(); > node commonjs.js // ฒෆ။ੋશҬᏓᏐ var foo = function () { console.log("foo is invoked"); }; // ॴ༗ཁඃ֎෦ଘऔతํ๏҃ሱੑ౎धཁ༻ exports exports.bar = function () { console.log("bar is invoked"); }; commonjs.js commonjs-module.js ஷ֞ໃק∕֥GPPݦൔࣼ὜৫ख़㍂ו ః෰֥ӱൔ∽࿽ỉ؟ԛấa҂὜ಆ҆ඵו
  13. Copyright © 2012 FITPI. All rights reserved. ҂ℳކ僯Ⅲẵσ֥թ౼ 14 http://f2eclass.com/lab/nodejs/html.js

    http://f2eclass.com/lab/nodejs/html.html var http = require("http"), fs = require("fs"); // ඞਢ࠾༻ fs.readFile ሡ䈕Ҋᩇೖ fs.readFile("./html.html", function (err, html) { if (err) { throw err; } // ݐཱ Web ࢕෰ث http.createServer(function (request, response) { response.writeHeader(200, { "Content-Type": "text/html" }); response.write(html); response.end(); }).listen(8000); }); html.js > node html.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Node.js - ଌࢼ໢ท</title> <style type="text/css"> div { background: red; } </style> </head> <body> <div> Hello! ഝੋ Node.js తଌࢼ໢ทɻ </div> </body> </html> html.html ၂֊Ϝ8FC4FSWFS஝ఏῲđᄜᄸ喁ڿIUNMIUNM׻҂὜ളིb၂קေᇗ⬏Ҍྛb
  14. Copyright © 2012 FITPI. All rights reserved. ࢳ㢯ٚم 15 ๏

    ⦁ອਔ≾൞ἠޓࠃ≍֥ഠ⃯đ၂ἠ↜ⅳ ᇀഒႵ೘ἠၛഈ֥ࢳճ ❖ node-server https://github.com/cloudhead/node-static ❖ QBQFSCPZ https://github.com/felixge/node-paperboy ❖ IUUQTFSWFS https://github.com/nodeapps/http-server
  15. Copyright © 2012 FITPI. All rights reserved. 16 ≾൞၂ἠޓྍ֥wӱൔ∽࿽ යڛఖxđ↜ⅳ൞ޓ

    ؟֥đ֌൞Ⴎᧄࠃ≍֥ഠಕaࢳճ္ԛެམཞֹ ؟b ೏୆㍇ႨՎ࠯ℿቔ㬪Ῐứđ὜ु֞⇝؟ቋྍ֥ۀ ୑đ֌๝ℭ္с⇜҂ỗֹಀ૫Ớ↜ⅳaЯ௧ሱ࠭҂ ỗ4UVEZđ൞ޓႵ็≳ྟ֥b ၛ/PEFKT֥Чദ∽࿽หྟ∻༵฿∱ྮ֥ࡏἧđ෱ сק൞ໃῲέ୍⤨ቋᇗေ֥ӱൔ∽࿽ᆭ၂đ൞ޓᆴ ֤޽ℭᾇ๧⊷֥b OPEFࢺℚཬ᾵
  16. Copyright © 2012 FITPI. All rights reserved. 17 ၛ/PEFῘứℂⅴ /PEFKT҂ᆺିႨῲῘứ↌ᅟཌྷἬӱൔ

    ๝∄္ॖၛ⇔ԛޓ؟ݺႨ֥۽ऎℂⅴ ၹഠಕࠃ≍౏1BDLBHFӑ؟ Ⴈ+BWB4DSJQUῘứℂⅴၘῂໄ㬪၂⊕ἀӖਔ ଢభն؟ὕᄝ$PNNBOE-JOF-FWFM
  17. Copyright © 2012 FITPI. All rights reserved. ࡹ৫"1*໓ࡱ ๏ "1*໓ࡱğạჰ൓֥䩏ࢳčႵหקἲữĎ㸗ԛ໓

    ࡱđ❣҂൞൉喁ྍỌ༆ %PYZHFO 1)1%PD b ๏ ٚьః෰Ῐứᆀ൐Ⴈ୆֥ჭࡱaਔࢳۿିb ๏ :6*㸗ള໓ࡱࢥ൐Ⴈ၂ἠࢡ:6*%PD֥۽ऎb ❖ Ⴈ/PEFKT෮Ῐứ֥đν⊬⃪ႨOQNJOTUBMMHZVJEPDKT ๏ ༯≘၂ٺႵ䩏ࢳ֥ჰ൓ HJUDMPOFHJUHJUIVCDPNNJJJDBTBTDSPMMQBHJOBUJPOHJU ๏ 㸗ԛ"1*໓ࡱ DETDSPMMQBHJOBUJPO ZVJEPD 18
  18. Copyright © 2012 FITPI. All rights reserved. ൐Ⴈ-JWF3FMPBE 19 ẵσႵྩڿ

    ⏟´ఖ္὜۷ྍ $ISPNF֥-JWF3FMPBE℟ק යڛఖ ⏟´ఖ ࣋᠃࿈ઢ ؂ᡒ䈕ҊᏓಈฒճใ Ꮕ౸Ꮣಈबॏ৽ࡌೖ <port>
  19. Copyright © 2012 FITPI. All rights reserved. 20 8FCࠧℭ๙⇫ Ἶಀa⇀ᄝaໃῲ֥έ⊕ቔم

    ቋܞ঺a҂ⴺࠧℭaۄ⃺؇ޓ֥ۚ਍฿൩ ֞ቋ࣍ᖁশa‟ℼޓࠧℭ౏ੀṹ֥๙ᆩ ෰ⁿ۲ሱ൞Ⴈ൉喁ჰ৘ẦӮ֥଻Ĥ ≾ถ῜⃸୆ਔࢳჰ৘aႄႨ⇀Ӯ۽ऎ ໃῲࣼॖၛ⃦⅌Ῐứ8FC֥ࠧℭ⇫༏ਔĆ
  20. Copyright © 2012 FITPI. All rights reserved. 21 അ্݁ଋ http://www.slideshare.net/amix3k/comet-with-nodejs-and-v8

    ೺੥ٻอཹॅ ༗ࢿྉ࠶ճၚ Ꮧᎃ࠶ᚙ৽త ੥ٻӬԕอ࣋ લၷछ౎༗Մೳ࿙ਜଉ ⁛⇧1PMMJOH
  21. Copyright © 2012 FITPI. All rights reserved. ⁛⇧1PMMJOH 22 ҂ỗֹཟයڛఖứෂ⃪౰đ⇧↜൞ڎႵྍ⇫༏

    http://f2eclass.com/lab/node/polling.html යڛఖ֥Ἄẩğ⃪౰⅂ਈἾ؟
  22. Copyright © 2012 FITPI. All rights reserved. ṵℭᾇ֥1PMMJOH 23 ҂ỗֹཟයڛఖứෂ⃪౰đ⇧↜൞ڎႵྍ⇫༏

    යڛఖ֥Ἄẩğ⃪౰⅂ਈಯ؟aط౏’䍛ℭᾇṵ http://f2eclass.com/lab/node/long-polling.html
  23. Copyright © 2012 FITPI. All rights reserved. 26 ‥⊕1PMMJOH׻൞Ẫཟ֥ğ Ⴎ#SPXTFSཟ4FSWFS⇧↜൞ڎႵྍ⇫༏

    QVMM ط٤Ⴕྍ⇫༏ࣼႮ4FSWFS๷ཟ#SPXTFS QVTI -POHQPMMJOHᄝẖⅼཞ൞"QBDIF֥↌ᅟයڛఖ ൞٤ӈӹὸ∔ⅴ֥đቋݺὕ൞㍇ႨOHJOYࠇOPEF Ἤᧄ⁛⇧
  24. Copyright © 2012 FITPI. All rights reserved. 8FC4PDLFU 27 ࡹ৫⅄ཟ๙֡

    Ⴕ⊷ਘ֥ℭީҌ޺ཌྷẖẾđིିቋݺ֥ቔمĆ http://f2eclass.com/lab/node/websocket.html
  25. Copyright © 2012 FITPI. All rights reserved. ࠧℭ๙⇫ཬ᾵ 28 8FC4PDLFU൞)5.-෮ầῲ֥ྍ⇐קđ⏟´ఖ

    ℯቔ҂၂đ෮ၛ㢻ḰمṂఃۿᧄ၂ၢb໡ⁿಯ֤⊀ Ớᾱҵ֥⏟´ఖ㍇Ⴈ-POHQPMMJOHaമᇀ㍇ႨἾ؈ ℭ௹֥'MBTI8FC4PDLFUb ေु⏟´ఖᆦჱ؇∻൞ڎν⊬'MBTIaℯቔ-POH QPMMJOH 'MBTI8FC4PDLFU 8FC4PDLFUčభᗥ؊ ׻ေڿĎđ≾္෾ྌ७ਔϔĆ
  26. Copyright © 2012 FITPI. All rights reserved. ቋࡄࢳ㢯ٚσĆ 29 http://socket.io/

    4PDLFUJP္൞/PEFKT֥၂ἠสࡱ ॖၛሱྛ⊁Ṧ⏟´ఖὔ࣢a㢯קေ㍇Ⴈޅ⊕ٚσ ୆֥ӱൔᆺေ⇔၂ٺࣼॖၛঝ%
  27. Copyright © 2012 FITPI. All rights reserved. ℯቔᅶோ↌ᅟ֥๙ᆩ 31 ằႵದഈẖਔ၂≵ྍᅶோ

    ః෰ᆞᄝ䍛ഈ֥ದ׻ି൬֞๙ᆩ http://f2eclass.com/lab/node/notification.js
  28. Copyright © 2012 FITPI. All rights reserved. ཌྷἬ⊷ჷ 32 ๏

    ܥקऊ὜ğ/PEFKT5BJXBO1BSUZ IUUQOPEFKTUX ๏ /PEFKT෻↉ഠಕ⇐ቔểሰℼ IUUQCPPLOPEFKTUX ๏ $/PEF/PEFKTህြᇏ໓ഠ⃯ IUUQDOPEFKTPSH ๏ /PEF1BDLBHFE.PEVMFT IUUQTOQNKTPSH