---
# System prepended metadata

title: Node.js(三) 客戶端與伺服器端
tags: [Node.js]

---

# Node.js(三) 客戶端與伺服器端

###### tags: `Node.js`

伺服器端的代碼由 Node.js 驅動，並監聽來自瀏覽器發送的請求，這個過程簡單來說我們在瀏覽器的網址欄輸入網站地址，接著按下 Enter，即會發送請求到託管該網站的伺服器，然後伺服器查看該請求，並決定發送什麼內容回去。

而現在大多數的情況，伺服器將會以 HTML 頁面作為響應的內容，但也可以是圖片、JSON ... 等。
<br />

## IP 位址 & 域名
現今可能有數百萬台的伺服器在管理著數以百萬計的網站，而瀏覽器又是通過何種方式能夠正確的連接、並回應我們需要的東西?這裡簡單的了解 IP 位址和網域為其提供了什麼幫助。

### IP 位址 (Internet Protocol Address 網際網路協定位址)
就像每個人住的家都有一個且唯一的地址，連接到網路的所有電腦也都具有唯一的 IP 位址，現在某些特殊的電腦稱之為主機，表示它們在網路上託管著網站，如果我們想連接到該主機上的伺服器，則需要知道該主機的 IP 位址，將該 IP 輸入瀏覽器便可連接。

### 域名 (Domain Name 或簡稱 Domain 網域)
但 IP 位址只是一串的數字，對於我們人來說要記住其實很麻煩，所以改用域名來代替 IP 位址，域名可以是我們喜歡或者能夠表達網站的字串，當我們在瀏覽器中輸入域名代替 IP，它將會搜尋與域名關聯的 IP 位址，然後再透過該 IP 位址找到託管網站的主機並與其連接，這樣瀏覽器就可以發送請求並從中獲得回應。

<br />

而客戶端與伺服器端之間的溝通是基於 HTTP （HyperText Transfer Protocol 超文本傳輸協定) 為基礎運作， HTTP 是一個客戶端和伺服器端之間請求和回應的標準，若是不存在，那麼它們就無法溝通了，關於 HTTP 更詳細的內容筆者在這裡不多介紹。
<br />

## 建立伺服器
現在說明使用 Node.js 建立伺服器的步驟。
<br />
首先建立一個 server.js 檔，並輸入以下為一個簡單建立伺服器的代碼
```javascript=
const http = require('http'); // 導入 http 模組

const server = http.createServer(( req, res) => { // 兩個參數 req 為請求物件，res 為響應回覆物件
    console.log('request made');
});

server.listen(3000, 'localhost', () => { // 3000 為 port number 端口號；'localhost' 為預設值可以不填該參數，表示本地主機
    console.log('listening for requests on port 3000')
}); 
```

**說明**
建立伺服器使用 http 模組。

`http.createServer()` 建立伺服器，其 callback 包含兩個物件參數，`req`、`res`，這兩個物件待下篇筆記介紹，每當有人嘗試訪問該伺服器位址時，便會執行該函式。
<br />

`server.listen()` 用於監聽伺服器的**端口**
這裡要說明代入的參數 `3000` 及 `'localhost'`
```javascript=7
server.listen(3000, 'localhost', () => { // 3000 為 port number 端口號；'localhost' 為預設值可以不填該參數，表示本地主機
    console.log('listening for requests on port 3000')
});
```

### Localhost 本地主機
localhost 就像是網路上使用的 **domain** 域名，例如 google.com
但 localhost 會將我們帶到特定的 IP 位址，即 `127.0.0.1`，也表示指向自己的電腦。
這表示我們連接到自己電腦的網域，並監聽自己電腦的請求，在開發網頁時以自己的電腦當作伺服器的主機。

### Port Numbers 
Port Numbers (端口號) 代表電腦上的特定通道或端口，可以將端口號視作進入電腦的門，通過它們可以進行互聯網通信不同的程序，而現在我們的伺服器要以自己的端口號進行通信，而端口號有許多不同的值，只要使用的端口號不與其它程序的端口號衝突就能夠正常使用。

因此網址為 `localhost:3000`，瀏覽器就知道要透過 3000 該特定的端口號連接到自己的電腦。

接著運行以上 code
![](https://i.imgur.com/8dyPdxn.png)

接著到瀏覽器輸入伺服器位址
![](https://i.imgur.com/CttnbD8.png)
或是
![](https://i.imgur.com/TLT6apN.png)

回到終端機看到印出 "request made" 字串，每當連接伺服器位址時都會列印一次，這是因為每連一次便向伺服器請求一次。
![](https://i.imgur.com/ZSRQiHp.png)

注意! 這裡是列印在後端而不是前端的網頁上，是因為該 code 是運行在伺服器上而不是在瀏覽器。
<br />

但瀏覽器最後結果是無法連上該網站，是因為我們還沒有做響應的動作，這部分留待下一筆記介紹。
![](https://i.imgur.com/DMH2M6j.png)
<br><br>

---
**參考資料**
[The Net Ninja | Node.js Crash Course Tutorial #3 - Clients & Servers](https://www.youtube.com/watch?v=-HPZ1leCV8k)