RockShang

# 网络编程

网络分层 网络层

安装telnet /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install telnet

测试 telnet toutiao.com 80

tcp ip 编程 套接字编程

通过Telent链接服务器，建立tcp链接

  • 实现一个即时通讯
 打开  node telnet.js
 分屏  telnet localhost 9000

HTTP协议

开始建立非常朴素 无连接 无状态 简单灵活

上行 发 resquest - > 请求行 （Method url 版本）、消息报头（各种定义 contentType定义了请求正文的内容） 、 请求报文 下行 收 response - > 状态行 （状态码）、 消息报头（响应报头、实体报头）、 响应正文

总结：get 、 post 的区别 1、get回退无害、post会再次提交 2、get需要url编码，有长度限制、能对url地址收藏，能被浏览器缓存 3、post更安全，长度无限制

GET 用于获取信息，是无副作用的，是幂等的，且可缓存 POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存

 // 观察HTTP协议
 curl -v http://www.baidu.com

应答码，状态码 1XX 已经接收，继续处理 2XX: 成功 3XX 重定向，要完成请求必须进行进一步操作 4XX：客户端错误 5XX 服务器错误

200 客户请求成功 400 客户请求语法错误，不能被服务器理解 401 请求未经授权 404 请求资源不存在 500 服务器发生了不可逾期的错误

同域环境调http请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
   (async ()=>{
     const res = await axios.get('/users')
     console.log('data',res.data)
   })()
</script>

解决跨域 npm i live-server -g axios.defaults.baseURL = "http://localhost:3004 制造跨域环境

跨域 -协议名、端口号、域名（子域名不同）

Access to XMLHttpRequest at 'http://localhost:3003/users' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

常用解决跨域的方案 1、JSONP(JSON with Padding),前端加后端方案，绕过跨域 前端构造script标签请求URL（由script标签发出的GET请求不受同源策略限制），服务器返回一个函数执行语句，该函数通常由查询参callback的值决定，函数的参数为服务器返回的json数据，该函数在前端执行后即可获取数据

  • 很不常用了，只能发get请求，

2、代理服务器 请求同源服务器，通过该服务器转发请求至目标服务器，得到结果后在转发到前端 前端开发中测试服务器的代理功能就是采用的该解决方案，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域。

3、CORS（Cross Orign Resource Share）跨域资源共享，后端方案，解决跨域 原理：cors时w3c规范，真正意义上解决跨域问题，它需要服务器对请求进行检查并对响应头做响应处理，从而允许跨域请求

具体实现：

  • 响应简单请求动词为get/post/head，没有自定义请求头。Content-Type是applicatin/x-www-form-urlencodd，multipart/form-data或text/plain之一，通过该添加一下响应头解决：
 res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8080')
  • 加上header后复杂的请求，不能跨域（原因 简单的请求之外的预检请求） PUT DELETE OPTIONS 人为的设置header等 需要预检 加上预检请求头
    'Access-Control-Allow-Headers':"X-token,Content-Type"

反向代理和代理区别 正向代理靠近浏览器端 ngixn 代理静态资源 把这些转发和正向相反 跟靠近服务器方向

如果携带cookie 同源可以 不同源时

  1. 页面中加axios.default.withCredentials = true
  2. 服务器设置header res.setHeader('Access-Control-Allow-Credentials','true') 在浏览器看不到但是可以获取到cookie了 console.log('cookie',res.headers.cookie)

实战一个爬虫 ->splider.js ->splider-mongo.js 原理：服务端模拟客户端发送请求到目标服务器获取页面内容并解析，获取其中关注部分的数据 -->splider.js github地址 http://github.com/su37josephxia/spider

实现一个即时通讯工具 im服务器 --> im/ 原理：Net模块提供一个异步API能狗创建基于流的TCP服务器，客户端与服务器建立连接后，服务器可以或得一个全双工Socket对象，服务器可以保存Scket对象列表，在接收某客户端消息时，推送给其他客户端

服务器没有办法给直接给浏览器推消息，只能轮询

Socket.Io

  • 支持优雅降级 不支持Io的话有折中方式来支持
  • WebSocket
  • 源于HTML5标准

Http2

  • 多路复用 -雪碧图、多域名CDN、接口合并

  • 官方演示：https://http2.akamai.com/demo

  • 多路服用允许同时通过单一的HTTP/2链接发起多重响应，而HTTP/1.1协议中，浏览器客户端在同一时间，针对同一域名吓得请求有一定数量限制，超过限制数目的请求会被阻赛。

  • 首部压缩

    • 在http/1X的header中由于cookie和user agent 很容易膨胀，每次都需要重复发送，http2使用了encoder来减少需要传输的header大小

    • 服务端推送

    • 在http2中，服务器可以对库户的一个请求发送多个响应

    • 前端基础知识汇总

    https://github.com/su37josephxia/frontend-basic

    • processon 脑图

    https://www.processon.com/mindmap/5ddfe913e4b074c442ec8b8a

← 可持久化Mysql →