核心模組 - 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
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
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