美文网首页
webpack如何通过websocket实现热更新

webpack如何通过websocket实现热更新

作者: 看到这朵小fa了么 | 来源:发表于2021-12-08 22:30 被阅读0次

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

相关文章

  • webpack如何通过websocket实现热更新

    websocket解决了什么问题 学习:https://www.cnblogs.com/unclekeith/p/...

  • Webpack 如何实现热更新?

    模块热更新(热替换),其目的是为了加快用户的开发速度,提高编程体验。它并不适用于生产环境,这意味着它应当只在开发环...

  • 足球即时比分 实时赔率

    bet365网站的数据是通过websocket协议实现数据的实时更新,所以需要通过websocket协议来建立客户...

  • 新的生活新的开始NO.1

    1.WebSocket、WebWorker、Webpack之间的关系:三者没有关系!WebSocket:实现全双工...

  • webpack4 vue项目搭建

    mini的demo 实现的功能:1、webpack-dev-server实现自动部署、热更新2、HtmlWebpa...

  • webpack和vite对比

    热更新时webpack做了什么 总的来说,webpack的热更新就是,当我们对代码做修改并保存后,webpack会...

  • 通过 Dexposed 实现热更新

    随着项目的不断迭代开发,有时候app发布出去,出现一些相对致命的问题,频繁的提示更新固然不好,这种时候我们可以选择...

  • webpack实现代码热更新

    前端开发日异月新,怎么可以使我们更好或者更舒服的去做开发呢?我想作为前端开发者来说,肯定都会思考这个问题。在没有接...

  • Webpack 热更新实现原理分析

    概述 在使用 Webpack 构建开发期时,Webpack 提供热更新功能为开发带来良好的体验和开发效率,那热更新...

  • webpack热更新

    我们在用webpack打包文件,如果打包出来的资源是带有哈希值,每打一次包,就会出现一个不同哈希值的文件。为了避免...

网友评论

      本文标题:webpack如何通过websocket实现热更新

      本文链接:https://www.haomeiwen.com/subject/imdxfrtx.html