zuppachu
commented
5 years ago 關於「協定」（protocol）
1. 什麼是「協定」（protocol）？
網路上一種可以共通交流的模式，雙方需要依照此規則進行溝通。
2. 為什麼我們需要「協定」（protocol）?
為了讓彼此能夠溝通順利，減少交流成本，所以需要將規矩標準化，例如阿拉伯數字的寫法。
Open zuppachu opened 5 years ago
zuppachu
commented
5 years ago 網路上一種可以共通交流的模式，雙方需要依照此規則進行溝通。
為了讓彼此能夠溝通順利，減少交流成本，所以需要將規矩標準化，例如阿拉伯數字的寫法。
zuppachu
commented
5 years ago 為全球通訊網的資訊通訊基石。就像是若要透過網路傳達訊息，必須符合網路的遊戲規則（＝一種協定）。而 HTTP 則像是一本網路的遊戲規則說明書～
比起標題，我覺得更適合叫做 HTTP request 極其無聊的一生，因為根本就是一個小跑腿的流程～（頌芝，奉茶！）
瀏覽器 -> 製造 request -> 傳給 server
server 收到後 -> 處理訊息（紙條）-> 傳 request 回來一個你說地標不用說地址就可以送到的概念。
比如：
：「司機大哥，麻煩送我到小巨蛋，謝謝」 ：「ＯＫ，沒問題！」
以上情境司機大哥不需你跟他報地址，他也知道怎麼去～
但萬一遇到比較普龍供的司機大哥，他還是需要 google map 一下（DNS Server），查詢正確定址，這時出現的「喔～原來是台灣台北市松山區南京東路四段2號呀～」即等於網路上的 IP 位置。
//iTrerm
打 nslookup github.com//出現 Server: 91.187.200.206 Address: 91.187.200.206#53
Non-authoritative answer: Name: github.com Address: 140.82.118.4 Name: github.com Address: 140.82.118.3
2. 127.0.0.1 永遠是自己 local 端的位置。
## header and body (非網頁的)
request and response 都有 header and body。
header 放些額外資訊，body 放些主要資訊。
## GET vs POST and 其他 HTTP method
覺得以前寫的筆記比較好懂
[Week4 簡答題](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/12#issuecomment-431933395)
[[ MTR02 ] - Week4-2 Javascript ( Callback function) ](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/16#issue-380616840)
[[ MTR01 ] - Lesson 4-2 之 HTTP 基礎與 Ajax 筆記](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/6)
## 實作簡易 HTTP Server and Client 端
> 注意：在 iTerm 上，按 control + c 可以終止跑碼
### HTTP Client 端
```javascript
var request = require('request');
request('放網址', function (error, response, body) {
// console.log('error:', error); // Print the error if one occurred
// console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
console.log('body:', body); // Print the HTML for the web page.
});// node.js 內建 libery : require
var http = require('http')
var server = http.createServer(handleRequest)
function handleRequest(req, res) {
console.log(req.url)
if (req.url === '/') { // 主目錄
res.write('welcome!')
res.end()
return
}
if (req.url === '/hello') { // 主目錄底下的 hello 檔案
res.write('hello!')
res.end()
return
}
if (req.url === '/redirect1' ) {
res.writeHead(200, {
'Ciao': 'Mi chiamo Joanne.' // 見下圖
})
res.end()
return
}
if (req.url === '/redirect2') {
res.writeHead(302, {
'Location': 'https://google.com'
}) // 轉址： location
res.end()
return
}
res.writeHead(404)
res.end()
}
server.listen(5000) // port
顯示在：Network -> filter -> 點 All -> 左欄的第一個文件點開，就可以看到啦！
藉由這個套件運行 request 與接收 response 的過程，我們可以了解到瀏覽器也只是一個程式。因為即使不使用瀏覽器，也可以發送 request 與接收 response
zuppachu
commented
5 years ago 有聽沒懂，僅把關鍵字寫下
等於 Internet Protocol （網路協議地址） 既然有地址，則表示它是為了讓網路可透過「IP 協定」來識別每一台電腦（類似家裏門牌號）。
目前有兩種版本：
其中主要差異：IP 地址不同
前提要緊： 理想狀況是希望每台電腦都有自己的 IP 可以連線（一個人一個位置）
斯斯有三種，IP 也是三種。哪三種？
上圖分為網內、網外。
網內的三台電腦有自己的「虛擬IP」位置（只有家裡內共用的人可以互相連接彼此的 IP 位置）（在不同的網路裡面 IP 可以重複，因為我們彼此網路不同），當對網外時通常有個固定或是浮動的 IP 可以對應。
怎麼知道自己的對外 IP？ 股溝 MyIP
其他實例 公司對外有個一個固定的 IP，但在內的每個人員工都是不一樣的 IP。網咖也是一樣的概念。
= 連接埠，對岸人士稱為端口。他的目的很簡單，就是為了區別同一台電腦上的各種不同服務。一個 port 對應到一個服務。
常用的 Port
1. HTTP 80
2. HTTPS 443
3. FTP 21(在傳輸層)
大部分網路都建立在 TCP，因為它比較可靠～
UDP 則是比較快，但不保證一定送到。
同小明小美三次對話 = 三方交握（Three-way handshake）
記住以下表格（由下而上）：
| 層級 | 層級名稱 | 名字 | 內容 |
|---|---|---|---|
| L5 | 應用層（Application Layer） | HTTP/FTP | 紙條上的內容：買便當 |
| L4 | 傳輸層 (Transport Layer) | TCP/ UDP | 傳紙條時的三次確認 不確定時：一直傳遞紙條問候 確認時：ok，繼續傳下去 |
| L3 | 網際網路層 (Network Layer) | IP | 寄紙條：寫收件人跟寄件人 |
| L1 | 實體層 (Physical Layer) | 最底層的實體層 | 郵差幫忙寄信 |
zuppachu
commented
5 years ago Application Programming Interface 應用程式介面
因為我們需要透過「作業系統」提供的 API 讓我們達成想要做的事情 ＝ 透過 API，讓彼此可以交換資料。
除了作業系統提供的 API，還有另外一種是 Web 提供的。那WebAPI 又是什麼意思呢？它等於 HTTP API，意即透過「HTTP 協定」的 API。
// API 串接示範，範例來源：https://reqres.in/
var request = require('request');
request(
'https://reqres.in/api/users/3', // 一個細項
function (error, response, body) {
console.log(body);
},
);
/*
{"data":{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}}
*/
// 如果想要快速的引進細項，可利用內建函式 process
// 如果想要利用打指令方式，可以用 process.argv[2]
const request = require('request');
const process = require('process');
request(
'https://reqres.in/api/users/' + process.argv[2],
function (error, response, body) {
console.log(body);
});
/*
{"page":1,"per_page":3,"total":12,"total_pages":4,"data":[{"id":1,"name":"cerulean","year":2000,"color":"#98B2D1","pantone_value":"15-4020"},{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"},{"id":3,"name":"true red","year":2002,"color":"#BF1932","pantone_value":"19-1664"}]}
*/// 新增資料
const request = require('request');
const process = require('process');
request.post(
// 第一個元素是一「物件」
{
url: 'https://reqres.in/api/users/',
form: {
name: 'Jo',
job: 'no'
}
},
function (error, response, body) {
console.log(body);
});
// 以這個範例會顯示出空字串，是因為測試用只是假資料而已。無論是發送或接收資料，都有固定的格式。
但，通常我們會使用熱門格式：XML and JSON！
Extensible Markup Language， 標記語言。利用標籤來表示屬性。
格式：
<?xml version="1.0" encoding="UTF-8"?>
<user>
<id>2</id>
<firstName>Joanne</firstName>
<lastName>Chu</lastName>
<avatar>https://...</avatar>
</user>不過記憶體容量大，因為超多標籤，所以近年來比較常用的資料格式是超級火紅的 JSON。
JaveScript Object Notation，也是一種資料格式。他基於JS 的物件產生的格式，故與 JS 的相容性超好。
格式： 請移駕去看寫得超棒的你不可不知的 JSON 基本介紹
任何一種資料格式，都可以在各種語言內使用。以目前來說 JSON 為最熱門的資料格式。
Simple Object Access Protocol 資料交換都透過 XML。
透過 HTTP 基本的 method 跟 JSON 的 response 在溝通。事實上，大多數的 API 都是長這樣子～
其實你可以自己制定交換資料的格式～
非一種協定，只是一種推薦使用的風格～
curl
nslookup
ping 測試是否有連接成功？
telnet 檢測 port 是否有開？ PTT 是基於 telnet 的協定。
網路主要的本質就是「溝通」！
那要能夠好好溝通的話，需要一個能夠將東西規模化，規模化之前需要先標準化，把溝通的標準制定好～
zuppachu
commented
5 years ago 原本寫在： https://hackmd.io/0B1eyH_MQI2TYQeG8RwwVA
localhost vs 127.0.01localhost 是一個域名，而 127.0.0.1 是一個 IPv4 的地址。
來源
get vs post method 差異可看之前的筆記。
開發中常用的 headers，見這邊: 分為請求和回應 headers 兩大種。
200 - ok
301 - Moved Permanently
400 - Bad Request
404 - not found
500 - Internal Server Errorhttp:// vs https://http:// 是網頁與我的電腦瀏覽器，已非加密模式下進行互動，所以有可能遭到竊聽的危機。而 https://，可以說是 http:// 的進階版，因為多了一個 S (secure) 加密之意，相對安全、相對高級了點。
另外，這篇筆記寫得很好懂，可以多看看。
理解網路以前，先來理解「溝通」是怎麼一回事？
傳紙條的故事一：明美篇
傳紙條的故事二：賣便當篇
傳紙條守則：如何更快賣便當賺大錢？
以上標準化的好處：轉學生一來，馬上可以進入狀況
傳紙條的故事三：野心變更大的千千