WEB 網路基礎概念

瀏覽器怎麼和伺服器互動？

瀏覽器 → 製造 request → 傳 request 到 Server
Server 接收到 request→ 處理資料 → 回傳 response

DNS

Domain Name Server，作用是把 url 網址域名轉換成 IP address

觀念

瀏覽器只是另一個程式，node 用 npm request 也可以發送 request。

HTTP Request & Response

request 和 response 都有 header 和 body，各自帶著不同的資訊

HTTP headers 長這樣，通常會含有的重要資訊像是 IP Address, 狀態碼, request 的請求方法，像是 GET, POST 等

HTTP body 是主要傳送資料的地方，也可以沒有，例如 GET 方法就沒有。

Http Request Method

GET & POST

GET 像是明信片，只能把傳遞的資訊寫在信封上 (http-header)
POST 像是裝進信封的信，不但信封上(http-header)可以寫東西，信封內(message-body)也可以置入想要寄送的資料或檔案
實際的封包長這樣：

• GET
  HTTP GET Method 中是不允許在 message-body 中傳遞資料的，因為是 GET 就是要取資料的意思。從瀏覽器的網址列就可以看見我們表單要傳送的資料，若是要傳送密碼就有大家常提到安全性問題。

  GET /?id=010101 HTTP/1.1
  Host: xxx.toright.com
  User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1 ( .NET CLR 3.5.30729)
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: zh-tw,en-us;q=0.7,en;q=0.3
  Accept-Encoding: gzip,deflate
  Accept-Charset: UTF-8,*
  Keep-Alive: 115
  Connection: keep-alive
  

• POST
  POST 是將表單資料放在 message-body 進行傳送，在不偷看封包的情況下似乎安全一些。

POST / HTTP/1.1
Host: xxx.toright.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1 ( .NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-tw,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: UTF-8,*
Keep-Alive: 115
Connection: keep-alive

Content-Type: application/x-www-form-urlencoded
</code><code>Content-Length: 9
id=010101

其他 HTTP Method

• PUT：取代掉原本的東西
• PATCH：指定資源的部份修改
• DELETE：刪除資源
• OPTION：該資源支援哪些方法

HTTP 狀態碼

• 2XX 成功
  • 200 OK
  • 204 No Content //譬如刪除的時候回傳
• 3XX 重新導向
  • 301 Moved Permanently //永久移到新的位置
  • 302 Found //暫時移到新的位置
• 4XX 用戶端錯誤
  • 404 Not Found
• 5XX 伺服器端錯誤
  • 500 Internal Server Error
  • 503 Service Unavaliable

用 node.js 架設超簡易 HTTP Server

var http = require('http');

var server = http.createServer(handleRequest);
function handleRequest(req, res) {
    if (req.url === '/') {
        res.write('welcome');
        res.end();
        return;        
    };
    if (req.url === '/hello') {
        res.write('hello');
        res.end();
        return
    };
    if (req.url === '/redirect') {
        res.writeHead(302, {
            'Location': 'https://google.com'
        });
        res.end()
        return
    };
    res.writeHead(404);
    res.end();
};
server.listen(5000); //port

TCP/IP

網路協議分層

IP 地址

固定 IP：PTT 鄉民常常可以用 IP Address 來辨別用戶的學校，就是因為公司、學校等機構通常都會使用固定 IP，確保使用者能連上其伺服器。
浮動 IP：在每次連上網的時候 IP 位置都會不一樣，避免被攻擊
虛擬 IP：又稱為內網的 IP 僅供內部識別使用，對外沒有識別性

Port 端口

不同的 Port 連接到不同的服務 12.20.77.60:80

• HTTP 80
• HTTPS 443
• FTP 21
• 測試：3000, 4000, 8080

TCP & UDP

TCP 可靠的連接（TCP 三次握手）
UDP 比較快速，例如適合用在視訊的時候

API

Application Programming Interface 應用程式介面，透過 API，可以讓雙方交換資料
WebAPI ⇒ HTTP API

SDK (Software development kit)

可以想成是一個 library，內含很多 API 方法

JSON

JSON(JavaScript Object Notation) 可以被任何語言讀取，所以可以透過 JSON 格式來進行資料的交換，是現行主流的 API 資料傳遞格式

把 request 的字串轉成 JSON

request(
    'https://reqres.in/api/users/2',
    function (error, response, body) {
        const json = JSON.parse(body)
        console.log(json.data.first_name)
    }
);

把 object 變成 JSON 格式的字串

const obj = {
    name: 'huli',
    job: 'none'
}
console.log(JSON.stringify(obj);

把 JSON 變成 object

var obj = JSON.parse('{"name":"John","age":"30"}')

SOAP

Simple Oject Access Protocol