VUE项目中一直自动发送websocket请求

1. 背景

去年开始学习vue,用vue写了远程视频+聊天的程序,其中聊天用的是websocket。但是最近我发现vue项目即使不引入websocket包,在依赖中也会自动下载,并且每次在浏览器控制台会多一个websocket的请求,因为之前是用的socket聊天,所以我以为这个websocket是我引入的,知道最近我才发现不是这样的。
下图是一个直接用webpack初始化的一个项目,没有手动添加任何包,可以看到webpack自动下载了websocket包,并且在项目启动后,在控制台可以看到自动发送了websocket请求。
在这里插入图片描述

在这里插入图片描述

2、原因说明

这是因为webpack的热加载功能引起的,为什么我们改动代码后,浏览器能自动的做出响应呢?这里就是websocket的全双工通信的作用,不仅浏览器可以给服务端发送请求,而且服务器也可以反向的给浏览器发送请求。当我们在bian编辑器(在开发环境就相当于是服务器端)改好代码后,编辑器会发送websocket请求到浏览器(就是我们控制台看到的那个websocket),浏览器收到请求后就知道服务端的代码更新了,就会重新发送请求读取更新后的内容。
webpack启动项目日志如下,可以看到有个hot的包,我猜测这个包应该是热加载用的,因不是专业前端,这里就不深究了。
在这里插入图片描述
验证
先打开浏览器控制台,当我们修改vue项目代码,在编辑器保存可以看到浏览器中自动发送了一个hot-update的请求,这就是典型的websocket服务端给客户端发送请求,通知客户端(浏览器)进行刷新动作
在这里插入图片描述

3、补充说明

在以webpack为基础的项目中还能看到一个http://localhost:8080/sockjs-node/info?t=1617248436524类似这样的请求。该请求的目的是为了保持浏览器和服务器之间的通信,类似心跳检测,如果服务端挂了,就会一直请求失败
在这里插入图片描述
手动关闭服务后可以看到请求失败了。有时切换网络,比如有线无线切换、使用代理等会出现这种情况
在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue是一种流行的JavaScript前端框架,它可以用于构建用户界面。Vue使用了组件化的思想,可以将一个页面拆分为多个组件,每个组件负责自己的功能,并可以相互嵌套和通信。Vue可以实现响应式的数据绑定,即当数据发生变化时,页面会自动更新相应的部分,提升了开发效率。 MQTT是一种轻量级的消息通信协议,它适用于物联网设备的通信。MQTT使用发布订阅模式,基于客户端和服务器之间的消息传递。设备可以订阅特定的主题来接收消息,并可以发布消息到特定的主题。MQTT具有低带宽和低功耗的特点,适用于网络连接较弱的设备。 WebSocket是一种在Web浏览器和服务器之间进行双向通信的技术。传统的HTTP协议是一种单向的通信方式,即客户端发送请求,服务器响应返回。而WebSocket可以实现全双工通信,即客户端和服务器可以同时发送和接收消息,而不需要客户端主动发起请求WebSocket通常用于实时的数据通信,如聊天应用、实时数据展示等。 在使用Vue开发前端应用时,可以结合MQTT和WebSocket来实现实时的数据通信。前端可以使用MQTT和服务器进行消息的发布和订阅,实现数据的交换。同时,前端可以使用WebSocket与服务器建立双向通信的连接,实现实时的数据更新。 综上所述,Vue是前端框架,可以用于构建用户界面;MQTT是轻量级的消息通信协议,适用于物联网设备的通信;WebSocket是一种实现双向通信的技术。在Vue开发,可以结合使用MQTT和WebSocket来实现实时数据通信。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值