vue使用mqtt，tcp协议头的坑

已于 2022-02-15 15:07:02 修改
阅读量5.8k 收藏 6
点赞数
文章标签： 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关键代码截图

最低0.47元/天 解锁文章
马哈小弟弟
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
vue-mqtt-websocket-example:vue实现的mqtt协议方案，实现物联网设备实时通信和获取信息
05-19
关于 在开始前如果你还不了解mqtt协议,需要先去阅读mqtt协议相关文档；最近公司在一个物联网项目中为了解决页面主动实时获取设备位置信息和一些状态信息，而尝试使用了mqtt协议的方案，实现类似html5 webSocket协议实时通讯的替代方案。 项目运行 npm install npm run dev 注意：页面运行成功后，如果要测试发送和接收消息，需要启动mqtt服务，如何启动服务具体查阅mqtt相关文档。
MQTTX-使用Vue.js，Typescript和Electron构建的跨平台MQTT 5.0桌面客户端。-Vue.js开发
05-27
MQTT X简体中文| 简体中文MQTT X是由EMQ开源的跨平台MQTT 5.0客户端工具，可以在macOS，Linux和Windows上运行，并支持MQTTX。...方便用户快速测试MQTT / TCP，MQTT / TLS，MQTT / WebSocket的发布/订阅功能的连接
ruoyi-vue 整合netty实现TCP/IP协议数据接收
qq_38382365的博客
11-30 920
支持持续接收数、可发送数据、可多端口连接。
vue连接mqtt实现收发消息组件超级详细
最新发布
博客简介
05-24 1116
vue实现连接mqtt收发消息的组件
基于EMQX在Vue和Nodejs中使用mqtt实现多端实时通信
m0_64642443的博客
06-04 4239
在vue项目中通过WebSocket客户端连接mqtt进行：连接，订阅，发布，接收等基础操作。
搭建springboot和Vue页面之间的MQTT通信
wgh0315的博客
04-28 1221
搭建springboot和Vue页面之间的MQTT（websocket）通信
Vue 连接使用WebSocket，WebSocket心跳检测
铭的博客
02-01 894
WebSocket 是独立的、创建在 TCP 上的协议。Websocket 通过HTTP/1.1 协议的101状态码进行握手。为了创建Websocket连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
帮我用websocket 并使用java和vue实现后台消息推送
weixin_42577243的博客
01-07 397
可以使用 websocket 在前后端进行实时通信。要在 Java 中实现 websocket，可以使用 Java API for WebSocket(JSR 356)。 要在 Vue 中使用 websocket，可以使用第三方库，例如 vue-socket.io。 示例代码： Java 服务端： import javax.websocket.OnClose; import javax.webso...
前端页面使用MQTT协议(1883端口)完成消息发布与订阅.docx
05-19
前端页面使用MQTT协议(1883端口)完成消息发布与订阅
mqtt接收数据并保存
01-04
在本文中，我们将深入探讨如何使用Java语言接收通过MQTT协议传输的数据并进行保存。MQTT（Message Queuing Telemetry Transport）是一种轻量级、发布/订阅模式的网络协议，常用于物联网(IoT)设备间的数据通信。下面...
MQTT通信之WebSocket实现网页远程控制开关和消息收发
05-26
网页设计时，可以使用前端框架如React或Vue.js提高开发效率，同时利用WebSocket库如mqtt.js或paho.mqtt.js简化与MQTT服务器的交互。这些库提供了友好的API，使开发者能够轻松地处理订阅、发布和连接状态。 总结来说...
uniapp_mqtt_demo.zip
12-19
MQTT协议采用TCP/IP协议栈，确保了数据的可靠传输，而且它的消息模型非常简洁，适合资源有限的设备。 **EMQ X** 是一个开源的、高性能的 MQTT 消息中间件，支持大规模并发连接和发布/订阅模式的消息传递。它为...
基于Java+springboot+vue+mqtt协议开发的智能家居系统
2301_76817904的博客
03-12 946
基于Java+springboot+vue+mqtt协议开发的智能家居系统，是一套开源的软硬件系统，可用于二次开发和学习，快速搭建自己的智能家居系统。硬件工程师可以把自己的设备集成到系统；软件工程师可以使用项目中的设备熟悉软硬件交互。服务端使用spring boot、数据库mysql和redis、前端vue、移动端android、硬件端ESP-IDF和Arduino等。软硬件交互基于Mqtt协议，使用EMQ代理服务器。
vue中使用mqtt实现实时通信
DTCloud
06-16 949
MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，是 TCP/IP 的再封装，由 IBM 在 1999 年发布。MQTT 最大优点在于，地开销，少流量实现网络通信。
Vue Cli使用MQTT遇到的问题
weixin_41105255的博客
02-13 547
vue Cli使用mqtt，遇到polyfill问题、Buffer is not defined问题
VUE集成MQTT
明耀的博客
02-17 302
VUE集成MQTT。
MQTT和WebSocket
weixin_30595035的博客
07-13 35
严格来说，MQTT跟WebSocket关系不大。他们不是在一个层级的。 MQTT和TCP、WebSocket的关系可以用下图一目了然： 参考资料： http://www.zhihu.com/question/21816631 WebSocket的优势 以前，很多网站使用轮询实现推送技术。轮询是在特定的的时间间隔（比如1秒），由浏览器对服务器发出HTTP r...
详细讲解如何在vue中使用mqtt.js以ws连接并使用VerneMq消息服务？
weixin_48000648的博客
03-10 3744
第一步，先把VerneMq服务跑起来 VerneMq是个开源的消息代理服务，目前不支持windows部署，所以我们准备了一个虚拟Ubutun，在上面部署该服务。刚开始使用的是docker方式部署，但是在容器中更改配置后无法重新加载应用（能力有限，实在搞不定），也就无法开启VerneMq中的ws连接，因此放弃这种部署方式，选择在ubutun上直接安装。具体安装步骤就不细说了，可参考官方安装文档。这里只对相应的配置文件说明一下，以及一些遇到的其他问题及解决办法。 首先找到VerneMq的配置文件：/etc/ve
VUE连接MQTT即时通讯
热门推荐
qq_32168087的博客
03-29 2万+
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 ...
vue 使用mqtt
10-12
要在 Vue 中使用 MQTT，可以使用 Paho JavaScript 客户端库。以下是使用 Paho JavaScript 客户端库在 Vue 中实现 MQTT 的基本步骤： 1. 安装 Paho JavaScript 客户端库：可以使用 npm 或者直接在 HTML 文件中引入。 2. 在 Vue 组件中引入 Paho JavaScript 客户端库： ``` import Paho from 'paho-mqtt'; ``` 3. 创建 MQTT 客户端实例： ``` const client = new Paho.Client('broker.mqttdashboard.com', 8000, 'clientId'); ``` 4. 连接到 MQTT 代理服务器： ``` client.connect({ onSuccess: () => { console.log('Connected to MQTT broker'); }, onFailure: (errorCode) => { console.error(`Failed to connect to MQTT broker: ${errorCode}`); } }); ``` 5. 订阅主题： ``` client.subscribe('topic', { onSuccess: () => { console.log('Subscribed to topic'); }, onFailure: (errorCode) => { console.error(`Failed to subscribe to topic: ${errorCode}`); } }); ``` 6. 发布消息： ``` const message = new Paho.Message('Hello, world!'); message.destinationName = 'topic'; client.send(message); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值