vue使用mqtt，tcp协议头的坑

已于 2022-02-15 15:07:02 修改 5260 收藏 4
文章标签： vue.js tcp/ip 前端
于 2022-02-15 15:00:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49446194/article/details/122944151
版权

受到大佬的启发 物联网之MQTT 保姆来了 MQTT原理 以及如何进行调试_哔哩哔哩_bilibili

从头说吧，刚开始我做了个android项目用到了mqtt，然后在那儿我用的mqtt地址为tcp://xxxxxx:1883 ,成功跑通了；后来我又做vue项目也需要用到mqtt，发现按着原先android项目的地址填tcp://xxxxxx:1883一直报错，控制台打印的地址总把tcp替换成ws，后来折腾了老久才发现，将原地址换成wss://xxxxx:8084/mqtt就行了，下面贴代码和截图

android项目里的（正确代码）：

原android项目访问的格式

 android关键代码截图

 

vue项目里的（正确代码）· 

vue操作mqtt的格式                                                                                                                                      

vue关键代码截图（mqtt官网的例子） 

 刚开始vue控制台报错代码

1.

pages-Me-Me_01.js:10304 WebSocket connection to 'ws://XXXXX:1883/' failed: Error during WebSocket handshake: Unexpected response code: 403

2.

Mixed Content: The page at '<URL>' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws:<URL>/'. This endpoint should be available via WSS. Insecure access is deprecated.
13Connecting to a non-secure WebSocket server from a secure origin is deprecated.

控制台都给提示wss了，我还鼓捣老久.....哭

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
马哈小弟弟
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
vue-mqtt-websocket-example:vue实现的mqtt协议方案，实现物联网设备实时通信和获取信息
05-19
最近公司在一个物联网项目中为了解决页面主动实时获取设备位置信息和一些状态信息，而尝试使用了mqtt协议的方案，实现类似html5 webSocket协议实时通讯的替代方案。项目运行npm installnpm run dev注意：页面运行...
vue中利用TCP实现文件的传输
weixin_58346200的博客
03-07 1088
【代码】vue中利用TCP实现文件的传输。
vue滑动窗口_[转]TCP滑动窗口详解
weixin_39945810的博客
01-30 105
TCP滑动窗口详解http://lyjdamzwf.blog.163.com/blog/static/75206837201193373226/TCP滑动窗口(Sliding Window)滑动窗口协议可以用图四来形象表示。图中我们已经将字节进行了1到11的编号。由接收者通告的窗口称为提议窗口(offered window)，它覆盖了第4到第9个字节，意味着接收方已经确认了第3字节之前(包括第3字...
vue项目中使用mqtt
YL
02-08 1585
从去年十一到现在一直在忙项目，赶进度，导致自己也没写笔记。正好今天项目已经进入收尾阶段，腾出时间慢慢的梳理了下在项目开发中遇到的难点及技术点，目的是总结下，一边加深巩固。作为新年开始的第一篇笔记，自己给自己定了一个目标，不管项目如何紧，自己至少都要保证每个月写一篇笔记。
vue使用mqtt
qq_38847914的博客
04-22 2161
目前3.0的版本比较稳定 npm install mqtt@3.0.0 yarn add mqtt@3.0.0 <script> import mqtt from 'mqtt' export default { data() { return { connection: { host: '192.168.113.88', port: 8083, endpoint: '/mqtt', clean: tru
Vue中利用websocket实现实时通讯
weixin_51600020的博客
04-11 1741
vue利用WebSocket进行实时通讯
vue使用stompjs实现mqtt消息推送通知
10-19
主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中使用WebSocket与java SpringBoot进行交互实现聊天室
web小袋鼠
07-24 7714
一、简单介绍下HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API ...
Vue-Mqtt-Example:Vue-Mqtt的示例
05-02
Vue-Mqtt-示例 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev
webSocket管道通信完成群聊室(vue和java)
qq_43461350的博客
04-18 1932
注意事项 1.vue中要下载nojs.websocket 2.maven项目要配置依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId&g...
Vue.js+Node.js全栈开发教程：构建TCP服务器
tysonchiu的博客
06-18 1576
OSI参考模型将网络通信功能划分为7层，即物理层、数据链路 层、网络层、传输层、会话层、表示层和应用层。TCP协议就是位于传 输层的协议。Node.js在创建一个TCP服务器的时候使用的是net（网 络）模块。使用Node.js创建TCP服务器 为了使用Node.js创建TCP服务器，首先要调用require('net')来 加载net模块，然后调用net模块的createServer方法就可以轻松地创 建一个TCP服务器。 net.createServer([options][,connectionLis
详解vue组件通信的三种方式
12-09
1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线。 本质是通过派发事件然后监听事件从而更改值，(父子组件通信也可用这个方式，但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转，这种方式我这里就不做演示的了，因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bus 组件add <!--html结构--> <template> <div> <
vue-websocket-emqtt vue通过websocket连接emqtt实现消息订阅和推送
s297485987的专栏
04-16 2477
简介 近年来随着 Web 前端的快速发展，浏览器新特性层出不穷，越来越多的应用可以在浏览器端或通过浏览器渲染引擎实现，Web 应用的即时通信方式 WebSocket 得到了广泛的应用。 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 通信协议于2011年被 IETF 定为标准 RFC 6455，并由 RFC 7936 补充规范。WebSocket API ...
Vue 如何使用WebSocket与服务器建立链接 持续保持通信
SixFeet Under的博客
12-08 2553
WebSocket 浏览器通过JavaScript向服务器发出建立WebSocket链接的请求，链接建立后，客户端和服务器端就可以通过TCP链接直接交互数据。WebSocket链接后可以通过send()方法来向服务器发送数据，并通过onnessage事件来接受服务器返回的数据。 创建WebSocket对象 let ws = new WebSocket(server); WebSocket属性 属性 描述 ws.readyState WebSocket.CONNECTING: 0正在链接 W
VUE连接MQTT即时通讯
热门推荐
qq_32168087的博客
03-29 1万+
MQTT安装 MQTT安装EMQ安装请参考上一篇：CentOS7.0安装EMQ代理服务 npm安装 npm install mqtt 前端代码实现 mqtt服务器连接参数配置： export const MQTT_SERVICE = 'ws://172.80.5.222:8083/mqtt' export const MQTT_USERNAME = 'admin' export ...
基于Java+springboot+vue+mqtt协议开发的智能家居系统
2301_76817904的博客
03-12 446
基于Java+springboot+vue+mqtt协议开发的智能家居系统，是一套开源的软硬件系统，可用于二次开发和学习，快速搭建自己的智能家居系统。硬件工程师可以把自己的设备集成到系统；软件工程师可以使用项目中的设备熟悉软硬件交互。服务端使用spring boot、数据库mysql和redis、前端vue、移动端android、硬件端ESP-IDF和Arduino等。软硬件交互基于Mqtt协议，使用EMQ代理服务器。
VUE 使用中踩过的坑
08-28
本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结，感兴趣的朋友跟随脚本之家小编一起学习吧
帮我用websocket 并使用java和vue实现后台消息推送
weixin_42577243的博客
01-07 240
可以使用 websocket 在前后端进行实时通信。要在 Java 中实现 websocket，可以使用 Java API for WebSocket(JSR 356)。 要在 Vue 中使用 websocket，可以使用第三方库，例如 vue-socket.io。 示例代码： Java 服务端： import javax.websocket.OnClose; import javax.webso...
vue中使用mqtt
最新发布
07-27
在Vue中使用MQTT，你可以使用MQTT.js库来实现。以下是一些基本步骤： 1. 安装MQTT.js库：在你的Vue项目中，使用npm或yarn安装mqtt库： ``` npm install mqtt ``` 或 ``` yarn add mqtt ``` 2. 导入MQTT库：在你的Vue组件中，导入mqtt库： ```javascript import mqtt from 'mqtt'; ``` 3. 创建MQTT客户端：在Vue组件中，创建一个MQTT客户端实例，并连接到MQTT代理： ```javascript const client = mqtt.connect('mqtt://mqtt.example.com'); // 替换为你的MQTT代理地址 ``` 4. 监听MQTT连接状态：可以监听MQTT客户端的连接状态，以便在连接成功或失败时进行处理： ```javascript client.on('connect', function () { console.log('Connected to MQTT broker'); }); client.on('error', function (error) { console.error('MQTT connection error:', error); }); ``` 5. 订阅和接收消息：可以订阅一个或多个主题，并在接收到消息时进行处理： ```javascript client.subscribe('topic1'); client.on('message', function (topic, message) { console.log('Received message:', message.toString()); }); ``` 6. 发布消息：可以使用`client.publish()`方法发布消息到指定的主题： ```javascript client.publish('topic1', 'Hello MQTT'); ``` 这些是基本的使用步骤，你可以根据需要进行扩展和自定义。记得在不需要时断开MQTT连接： ```javascript client.end(); ``` 请注意，这只是一个简单的示例，实际使用时可能需要处理更多的逻辑和错误处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

马哈小弟弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值