核心模組 - 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
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
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
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
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
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News