全端勇士之路 Node.js 基礎學習-開啟 Web Server

前言

接下來我們就準備來學習開啟 Web Server，而 Node.js 本身就提供了 Web Server 的功能，所以就來看看怎麼建立一個 Web Server

認識 createServer

首先我們先準備一個 project 資料夾，底下建立一個 all.js

由於我們要使用 http 的模組，所以一定會 require('http')，而這是 Node.js 本身所提供的功能，另外這邊會使用 http 中的一個方法來開啟 Web Server，也就是 createServer

1
2
3
4
5

var http = require('http');

http.createServer(function(request, response) {
  
}).listen(3000);

這邊先來講解一下 request 與 response 是什麼東西

• request 請求
  • 使用者瀏覽器對我們伺服器 or 網站發送請求，它想要那些東西
• response 回應
  • response 意思就是說，我接收到你的請求了，那我要回傳你需要的檔案

然後我們伺服器就要向對方使用者瀏覽器發送一個通知說，你成功跟我請求囉，所以我回傳給你 200，並且網頁格式是 text/html，另外我們可以用 console.log(request.url) 查看瀏覽器請求了什麼內容與東西

※ 回傳給瀏覽器的時候，要注意回傳格式 Content-Type 如果你輸入 text/plain 那就不會輸出 HTML 格式，而是只會是單純的文字唷

所以範例統整下來是這樣

1
2
3
4
5
6
7
8

var http = require('http');

http.createServer(function(request, response) {
  console.log(request.url);
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write('<h1>HelloWorld</h1>');
  response.end();
}).listen(3000); // prot號

這樣就可以在瀏覽器上輸入 localhost:3000，然後就可以看到 HelloWorld 囉

這邊我將程式碼稍微優化一下，另外也輸入 console.log 提示伺服器已開啟

1
2
3
4
5
6
7
8
9
10

var http = require('http');
var port = 8080;

http.createServer(function(request, response) {
  console.log(request.url);
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write('<h1>HelloWorld</h1>');
  response.end();
}).listen(port); // prot號
console.log('伺服器已開啟' + port);

如果對於 port 不清楚可以看這一篇 Wiki