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推送实现自动刷新