Comments (6)
#45 networking for web develpers
from mrbone.github.io.
from mrbone.github.io.
from mrbone.github.io.
from mrbone.github.io.
环境准备
Python3
这里有几种安装方式
brew install python3
或者
brew install pyenv
pyenv install 3.6.3
#不过感觉这个python version manager 不是特表好用,配置了半天结果最后 install 还是抛 error,遂放弃
或者直接去官网下安装包。
nmap
nmap
是一个本地快速网络调试套件。
brew install nmap
我们主要使用 ncat
来快速建立一个本地的 TCP 通信服务器。
开启两个 terminal
ncat -l 9999
ncat localhost 9999
这时双方就能通信了,随意输入任意的信息可以在另一边看到消息,此消息传输是建立在 TCP 协议上。
启动第一个 Server
terminal 中进入任意有文件的目录,运行:
python3 -m http.server 8000
开启浏览器,能看到一个类似浏览 ftp 的 page 出现了,并且还能通过点击文件夹跳转。
URI
全程是 Uniform Resource Identifier,用户只会关心它是一串字符串。
我们也会经常听到 URL: Uniform Resource Locator 和 URI 的区别主要是 URL 是指在 network 中的资源,而 URI 范围会广些。
我们用一个简单的 URI 做示范
https://en.wikipedia.org/wiki/Fish
https
是 schemeen.wikipedia.org
是 hostnamewiki/Fish
是 path
Scheme
scheme还有一些其他的,常用的主要是3种
- http
- https
- file
mailto is used for links to email addresses.
data is used to put a piece of hardcoded data directly into a web page, for instance a small image.
magnet is used for links to some file-sharing services such as BitTorrent. However, there is no such thing as a postal URI; if you want to send postal mail from the Web you still need to print it out and put it in the mailbox yourself.
hostname
hostname 是紧跟在 scheme之后的部分,以 //
开始。 www.google.com
或者 localhost
都是 hostname
path
基本没啥好说的,都很熟悉了,需要注意的是借位的 /
可以省略。
DNS
全称 Domain Name Service, 在互联网中 client 和 server 通信时都是通过 ip, 但是 ip 对于人类来说没有太多的语义,所以我们通过域名访问 server, 这个域名到 ip 的转换就是通过 DNS 来的。互联网上的 DNS 是通过 ISPs (Internet Service Providers) 提供。
可以通过 nslookup
和 host
命令来差看一个 hostname 对应的 ip。
Ports
http 的默认端口是 80
, https 的默认端口是 443
Http request
关于http request 要点是各个 mehtod, 用的最多的就是
- POST
- GET
- PUT
- DELETE
分别对应 backend 的 CRUD (Create, Read, Update, Delete)。
一般情况下用的最多的又是 GET 和 POST。
Http response
服务器的返回叫做 response, 这时服务器向客户端通信的方式。我们用 ncat
尝试一下。
ncat www.360buy.com 80
然后发送一个 GET 请求
GET / HTTP/1.1
Host: www.360buy.com
中间换行通过 shift+enter
实现,然后敲两回车,我们可以看到如下返回:
HTTP/1.1 301 Moved Permanently
Server: JDWS/2.0
Date: Sat, 09 Dec 2017 15:30:27 GMT
Content-Type: text/html
Content-Length: 272
Connection: keep-alive
Location: http://www.jd.com/
Via: BJ-H-NX-112(), http/1.1 CD-CT-1-JCS-31 ( [cRs f ])
Age: 752
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<h1>301 Moved Permanently</h1>
<p>The requested resource has been assigned a new permanent URI.</p>
<hr/>Server: JDWS</body>
</html>
该返回由3部分组成: status line,headers,response body。
其中第一行是 status line, headers 是从第二行到第一个换行符,之后的内容就是 response body。下面分别分析各部分。
Status line
顾名思义,status line 就是告诉 client, server 端对这个 request 的理解。其中最主要的部分就是 status code.
HTTP/1.1 301 Moved Permanently
这个行代表 server 基于 HTTP/1.1 的协议通信,该请求的结果是 301 状态,表示资源永久移走了。一般的 status code 理解如下:
- 1xx - 信息: 请求进行中或者即将会有其他步骤发生。
- 2xx - 成功: 请求成功,服务器会返回 request 对应的数据。
- 3xx - 重定向: 请求的资源移动走了,此 response 的 headers 区域常常会跟着一个
Location
语句,表示之后需要访问的地址。对应上面示例中的Location: http://www.jd.com/
。不同的 code 代表临时还是永久重定向。 - 4xx - 客户端请求错误: 服务器不能理解或者没有请求所指定的数据。
- 5xx - 服务器错误: 服务器出现了未知错误。
关于 status code的详细解释,可以参考Status Code Definitions
headers
headers 是由多个 header 组成的数据。主要有以下特性:
- 每个 header 由一个 key 和一个 value组成。
- headers 是 response 的 metadata。
- browser 不会显示 headers 信息。headers 是 server 端用来告诉 client 端一系列该 response 的信息的数据。
- server 可以通过
Set-Cookie
header 让客户端保存一些服务端需要的信息。随后的 request 都会带上这些 cookie 信息
Content-type header
Content-type 指定当前 response 返回的种类。他包含两个主要信息:
- response 的类别
- response 的编码
Content-Length
response body
headers 接一行空行之后的所有数据都是 response body,是http request 对应请求数据的一份 copy。
from mrbone.github.io.
from mrbone.github.io.
Related Issues (20)
- css flexbox HOT 1
- CSS
- 重装 mac 的基本配置 HOT 1
- git submodules HOT 1
- git lab flow
- koa trial
- yield * 的作用
- diigo get start HOT 1
- ES6 module export directly
- ES6 module export directly
- ES6 module export directly
- Instapaper gettting start HOT 1
- LinkedIn update
- Finacial
- MLF HOT 1
- 逆回购
- 爱尔兰不动产
- proxyquire with es6 module
- release logs
- release logs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mrbone.github.io.