核心模組 - http.createServer() | Node.js

阿榮-avatar-img
發佈於前端
更新 發佈閱讀 4 分鐘

目標:透過 node 的 http 模組來建立一個 web 伺服器 (web server)

web 伺服器 (web server)

web 伺服器又稱為網路伺服器或網頁伺服器。web 伺服器是一台託管一個或多個網站的電腦/電腦軟體。託管通常指的是將網站的文件和數據存在伺服器上,以便通過網路提供用戶訪問。當用戶跟 web 伺服器發送請求時,web 伺服器會傳送託管的網站給用戶。

簡略版:你想看的東西放在 web 伺服器那裡,跟它說一聲我要看,它把東西傳給你。

http 模組

node 本身就內建很多模組http 是其中一種,載入內建模組不用特別從資料夾中選擇,還是可以成功載入。

接下來,用 http.createServer() 開啟 web 伺服器。

createServer() 裡面放匿名函式,函式的參數通常命名為 request 和 response (也可以自訂),在函式內處理伺服器接收到的請求(request)和發送給客戶端的回應(response),例如範例中設置回應的標頭以及寫入內容並結束。

執行 app.js 檔,打開 http://localhost:8080/ (localhost 指本地主機) 來查看,就會看到頁面成功顯示 hello!!

var http = require('http'); // 載入 node 內建的 http 模組

http.createServer(function(request, response) {
console.log(request.url); // 取得請求的 url

response.writeHead(200, {"Content-Type": "text/plain"});
response.write('hello!!');
response.end();
}).listen(8080);

request 和 response

request 代表客戶端(通常是瀏覽器)向伺服器發送的 HTTP 請求。它包含了客戶端的一些資訊,例如請求的方法(GET、POST 等)、URL、標頭、以及任何在請求主體中包含的資料(比如表單數據)。
➡️客戶端向伺服器發送的請求,其中包含一些相關的資訊。

response: 代表伺服器給客戶端的回應。這個回應包含了伺服器要傳遞給客戶端的資源或者資訊,例如頁面的內容、圖片、文件等。回應也包含了 HTTP 狀態碼(例如200表示成功、404 表示找不到資源等)、回應標頭(例如 Content-Type 指定響應的內容類型)以及可能的回應主體(即頁面的內容或資源)。

➡️伺服器給客戶端的回應,其中包含一些相關的資訊。


可以透過瀏覽器的 DevTools 的 Network 查看 response 和 request 的相關資訊 (headers 等)。


Content-Type 很重要

瀏覽器會根據 server 給的 Content-Type 解析檔案,會影響呈現的結果。

舉例:寫入<h1>hello!!</h1>,把 Content-Type 分別寫 text/plaintext/html,最終分別得到 <h1>hello!!</h1>hello!!。(前後程式碼省略,實際寫記得打)

...
response.writeHead(200, {"Content-Type": "text/plain"});
response.write('<h1>hello!!</h1>');
...
...
response.writeHead(200, {"Content-Type": "text/html"});
response.write('<h1>hello!!</h1>');
...


8080 port 通訊埠

伺服器裡面的其中一個軟體,它會佔據電腦中其中一個 port,透過這個 port 來開啟應用程式的內容。

AI 解釋:電腦就像一棟大樓,8080 就像是這棟大樓的其中一個房間號碼。當你想要訪問不同的網路服務時,就需要知道我們要存取哪一個「房間號碼」。通常網頁瀏覽服務會使用 80 號房間,這是一個默認和眾所周知的房間號。但有時候 80 號房間已經被其他服務佔用了,這時我們就需要使用備用的房間號碼,比如 8080 號房間。

有些埠號已經被其他協定和服務佔據了,可以查看通訊埠列表


學習資源


留言
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
Thumbnail
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
Thumbnail
  在開始操作Web Service之前,要先做一些前置作業IIS的安裝,再開始建置Web Service相關內容,最後就是連線測試。   IIS(Internet Information Services)是網際網路資訊服務,可以讓網站使用HTTP/HTTPS、FTP/FTPS、SMTP 等等的
Thumbnail
  在開始操作Web Service之前,要先做一些前置作業IIS的安裝,再開始建置Web Service相關內容,最後就是連線測試。   IIS(Internet Information Services)是網際網路資訊服務,可以讓網站使用HTTP/HTTPS、FTP/FTPS、SMTP 等等的
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News