webpack如何通过websocket实现热更新
websocket解决了什么问题
学习：https://www.cnblogs.com/unclekeith/p/8087182.html
服务器轮训的演变
-
ajax短轮询，客户端定时发送http请求去问询服务端，不管服务端有没有结果都会给客户端进行返回。通过http1.1长连接，进行一次tcp连接可以发送多个http请求，一个request对一个reponse
-
ajax长轮询，客户端向服务端发出HTTP请求后，服务端保持连接，服务端有更新后则将结果返回给客户端，当连接超时后，服务端会给客户端发送超时反馈，客户端会向服务端重新发送HTTP请求。一个request对一个reponse
t- HTTP流，HTTP协议+TCP连接后，服务端会保持连接持续向客户端发送更新的数据，一个request对应多个reponse。以ajax发起异步请求为例，通过监听onreadystatechange事件查看响应状态，当readyState为3时，是在响应中，当readyState为4时表示响应完毕，将reponseText返回。
- websocket应用层协议，是基于TCP协议的子集，需要借助HTTP1.1协议的101状态码进行协议的升级，升级到websocket协议后，可以进行ws全双工双向通信，客户端和服务端都可以主动进行双向的收发数据。连接的过程首先：
1、客户端发起升级协议的请求，需要设置请求头HTTP1.1；connction:Upgrade；upgrade: WebSocket；Sec-WebSocket-Key；验证是websocket请求而不是http请求。
2、服务端返回状态码101；Sec-WebSocket-Accept；验证是否为websocket请求。Sec-WebSocket-Location；对应请求头的host。
为什么需要数据掩码?
攻击：https://www.cnblogs.com/lxwphp/p/8241194.html
代理服务器攻击，攻击者通过一些实现不完善的http代理服务器，只能识别http请求，攻击者通过伪造的客户端和服务端，通过代理服务端的http协议升级websocket过程，再通过伪造的客户端，经过刚刚建立起的websocket通道，向伪造的服务端发起伪造的请求（伪造请求的url和host），伪造的服务端把恶意资源返回给代理服务器，那么普通用户去访问代理服务器的时候，代理服务器在不知情的情况下将恶意资源发送给用户。虽然加密的的算法是公开的但是，js代码不能获取掩码，所以这样就使得攻击者无法伪造websocket请求，大大增加了攻击的难度。
webpack热更新 --watch
开发过程中我们通过使用DevServer启动一个HTTP服务器，webpack会再构建出的js代码中注入一个客户端，服务端和客户端之间通过webSocket协议进行通信，webpack发现入口文件所依赖的文件发生变化时，会通知DevServer，服务端再通知客户端进行网页刷新、
// 配置
watch: true,
watchOptions: {
ignore: '/node_modules',
aggreateTime: 300ms, //300ms后触发更新
poll: 1000 //每秒询问1000次
}
// 模块热更新
devServer：{
hot: true
}
模块热替换 --hot
无需手动刷新 通过websocket推送实现自动刷新
