workshopper-browser-guide

Version:

Create an html browser version of the exercise descriptions

github.com/finnp/workshopper-browser-guide

finnp/workshopper-browser-guide

101 lines (95 loc) • 5.76 kB

HTML

View Raw

100

101

<!doctype html> <html class="no-js" lang="zh-tw"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>learnyounode Guide</title> <meta name="description" content="learn git and github"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/code.css"> <link href='assets/fonts/fonts.css' rel='stylesheet' type='text/css'> </head> <body>  <header class="site-header"> <div class="nav u-posFixed"> <ul class="nav-lang"> <li><a href="http_file_server.html" >English</a></li> <li><a href="http_file_server.es.html" >Español</a></li> <li><a href="http_file_server.ja.html" >日本語</a></li> <li><a href="http_file_server.pt-br.html" >Português (Brasil)</a></li> <li><a href="http_file_server.ru.html" >Русский</a></li> <li><a href="http_file_server.zh-cn.html" >中文 (中国)</a></li> <li><a href="http_file_server.zh-tw.html" >中文 (臺灣)</a></li> </ul> <div class="wrap-width u-textCenter"> <a href="time_server.zh-tw.html" <span class="u-floatLeft hand">☜</span> </a> <a class="filledblock" href="index.zh-tw.html">learnyounode</a> <a href="http_uppercaserer.zh-tw.html" <span class="u-floatRight hand">☞</span> </a> </div> </div> <div class="wrapper"> <div class="u-floatLeft"> <span class="all-caps">CHALLENGE</span> <h2 class="challenge-name">HTTP FILE SERVER</h2> </div> <div class="u-floatRight u-textRight"> <span class="all-caps">NUMBER</span> <h2 class="challenge-name">11 / 13</h2> </div> </div> </header> <div class="wrapper"> <p>撰寫一個 HTTP <strong>伺服器</strong> ，可以提供它收到的 text 檔案給所有收到的請求。</p> <p>第一個參數是 port ，您的伺服器應該監聽在第一個參數所給予的 port 上。</p> <p>第二個參數是提供的檔案。您 <strong>必須</strong> 使用 `fs.createReadStream() 方法將檔案內容傳遞到回應上。</p> <hr> <h2 id="-">提示</h2> <p>在這個習題中，您必須建立一個HTTP伺服器以取代原先的TCP伺服器，因此應該使用 Node 核心模組之一的 <code>http</code> 模組。就像 <code>net</code> 模組一樣， <code>http</code> 模組也有一個名為 <code>http.createServer()</code> 的方法，不過這個方法會建立一個可以用 HTTP 進行溝通的伺服器。</p> <p><code>http.createServer()</code> 會接受一個 callback 函式作為參數，每次收到連線的時候都會呼叫一次 callback 函式。這個 callback 函式有以下的語法特徵：</p> <pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">callback</span> <span class="hljs-params">(request, response)</span> </span>{ <span class="hljs-comment">/* ... */</span> } </code></pre> <p>這兩個參數是代表 HTTP 請求和針對請求回應的物件。 <code>request</code> 是用來取得各種屬性，像是請求的 header 和查詢字串，而 <code>response</code> 是用來送出資料給客戶端，包含 header 和 body 。</p> <p><code>request</code> 和 <code>response</code> 當然也都是 Node 串流！這代表如果他們適合您的使用情境，您可以使用串流的抽象方法收發資料。</p> <p><code>http.createServer()</code> 也會回傳一個 <code>server</code> 的實例（instance）。要開始讓 server 監聽在特定的 port，您必須呼叫 <code>server.listen(portNumber)</code> 。</p> <p>一個標準的 Node HTTP 伺服器看起來像這樣：</p> <pre><code class="lang-js"><span class="hljs-keyword">var</span> http = <span class="hljs-built_in">require</span>(<span class="hljs-string">'http'</span>) <span class="hljs-keyword">var</span> server = http.createServer(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(req, res)</span> </span>{ <span class="hljs-comment">// request handling logic...</span> }) server.listen(<span class="hljs-number">8000</span>) </code></pre> <p>要閱讀 <code>http</code> 模組的文件，可以在瀏覽器中打開這個頁面： <a href="../node_apidoc/http.html">/node_apidoc/http.html</a></p> <p><code>fs</code> 核心模組也有一些針對檔案的串流 API 可以用。您將會需要用 <code>fs.createReadStream()</code> 把第一個參數給予的檔案建立成串流。這個方法會返回一個可以使用 <code>src.pipe(dst)</code> 方法在 <code>src</code> 和 <code>dst</code> 串流之間傳遞資料的串流物件。用這個方法就可以把檔案系統串流和 HTTP 回應串流連在一起。</p> <hr> <div class="prenext"> <div class="u-floatLeft"> <a href="time_server.zh-tw.html" class="u-inline-block all-caps">TIME SERVER <div>⤶ </div> </a> </div> <div class="u-textRight u-floatRight"> <a href="http_uppercaserer.zh-tw.html" class="u-inlineBlock all-caps">HTTP UPPERCASERER <div>⤷</div> </a> </div> </div> <footer>  </footer> </div> </body> </html>