vue 使用 mqtt 连接失败

已于 2024-12-14 14:31:43 修改
阅读量458 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： bug 记录 文章标签： vue
于 2024-12-14 14:30:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/coco_fan/article/details/144470243

问题

前端在浏览器端调用mq，后端提供了连接 mq 的 ip 与端口，前端正确设置但是连接失败

this.client = mqtt.connect(mqtt://ip:端口/mqtt）

原因

后端提供的 ip 与端口是 mqtt 协议的，前端使用 mqtt.js 库有协议转换，mqtt.js 库会自动将 mqtt 协议转换为 ws 协议来通过 WebSocket 连接 MQTT 服务器。这是客户端库为了兼容 Web 环境而做的处理，因为浏览器直接不支持 mqtt 协议，而是通过 WebSocket 来实现。

解决

跟后端协商，端口更改为了 8083，EMQX默认使用 8083 和 8084 分别作为非加密和加密的WebSocket端口

this.client = mqtt.connect(ws://ip:8083/mqtt）

Vue2 - 最新实现安装引入MQTT连接后端服务器详细教程，在vue2中使用mqtt服务端实现即时通讯及MQTTX可视化工具的使用，在线聊天和实时通信示例（连接、重连、发布订阅、消息监听、断线重连）
前端开发大师鸭
09-12 2672
vue2，nuxt2，mqtt，安装使用，vue连接mqtt教程，订阅发布，消息推送，保持长连接，Vue项目接入MQTT，如何使用mqttx客户端软件连接，连接失败没有提示，一直连接重试，在线聊天室，连接Mqtt连接服务器并监听消息，消息推送通知，使用MQTTX和前端vue进行通讯，vue2利用mqtt做即时通讯功能，怎么链接mqtt，收发消息，监听订阅，实时消息传递，跨域，出现报错，连接会断开怎么办，vue连接MQTT实现发布/订阅消息，订阅主题会话，mqttx连不上后端服务器怎么办，MQTT协议，监听订
VUE使用mqtt
m0_51431448的博客
12-10 5727
1.安装依赖 npm install mqtt --save 2.项目按需引入 import mqtt from 'mqtt' 3.使用 <template> <div> {{mqMsg}} </div> </template> <script> import mqtt from 'mqtt' // 配置mqtt var client = null const options = {
解决vue中连接mqtt服务器报错的问题
weixin_45036647的博客
10-15 1326
在前端项目中搭建好mqtt框架代码后，发现无法连接到我阿里云上搭建好并正在运行的mqtt服务器上，并报错如下图。
连接不上mqtt和发布不成功等问题
风雨飘摇不倒
01-09 1555
0 = 消息发送到当前订阅者后，服务器不保存消息。消息发送到当前订阅者后，服务器是否保存该消息。1 = 消息发送到当前订阅者后，服务器保存消息。客户端想要发布消息的 QoS 等级。0 = 最多发送一次。1 = 最少发送一次。
MQTTX连接ONENET失败踩坑
最新发布
m0_55541357的博客
05-12 456
在onenet的token生成工具中，要在每一个填空栏中双击一下，如果默认全选中就说明是正确的，如果只选中一部分，说明里面有格式错误，将选中终止的地方删除重新手输一遍。并且，所有填空栏不能有空格，在末尾也不行，只要有了空格，token就会发生变化。这个空格是双击检查不到的，需要手动全选观察末尾是否带空格。检查流程就是先看格式是否正确，是否有地方格式错误，在双击默认全选后手动全选查看是否带有空格，若有则删除即可。昨天连了半天onenet，一直连不上，已经感觉要4了，后面找了半天发现是这个问题。
MQTT连接失败的原因
weixin_42591413的博客
02-14 1万+
MQTT连接失败的原因可能有很多。下面列举一些可能的原因： 网络连接问题：如果您正在使用网络连接，可能是网络连接不稳定或中断导致的。 服务器问题：如果您正在连接的是远程服务器，可能是服务器出现故障或网络连接不稳定导致的。 认证问题：如果您输入了错误的用户名或密码，或者未正确配置认证信息，也可能导致连接失败。 防火墙问题：如果你的网络有防火墙，可能会拦截MQTT连接。 其他原因：还有一些其...
MQTT服务器连接不上的问题
hywing's blog
01-09 3908
解决客户端连不上MQTT服务器的问题
MQTT，物联网圈的 HTTP，万物互联第一步
优快云人工智能头条
11-22 713
物联网曾被认为是继计算机、互联网之后，信息技术行业的第三次浪潮。随着基础通讯设施的不断完善，尤其是 5G 的出现，进一步降低了万物互联的门槛和成本。物联网本身也是 AI ...
Mqtt连接失败的种种原因（连接阿里云平台）
热门推荐
bui ~
03-21 2万+
Mqtt连接失败的种种原因（连接阿里云平台） 如失败：unable to connect to server
Vue Cli使用MQTT遇到的问题
weixin_41105255的博客
02-13 757
vue Cli使用mqtt，遇到polyfill问题、Buffer is not defined问题
vue连接mqtt
qq_30849965的博客
10-16 4296
vue连接mqtt 项目中要用到mqtt，前端调用，使用github开源的paho-mqtt.js，api还是挺全面的，网上各种教程很全面，但是感觉代码过于杂乱，故而封装的一下。仿jquery ajax调用方法。 1.安装应用 npm install xhl-mqttx -s 2.项目引用 import mqttX from 'xhl-mqttx' 3.开始调用初始化方法 mqttX.init({ id:'10', ip:'****************', port:61623, su
vue 中如何使用rabbitMQ 监听消息队列
01-20
一、先安装依赖插件 // 先安装stompjs npm install stompjs 二、组件中的使用 import Stomp from “stompjs”; import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from “../config/mqtt”; config文件中的mqtt.js内容： export const MQTT_SERVICE = ‘ws://25.30.9.137:15674/ws’ // mqtt服务地址 export const MQTT_USERNAME = ‘guest’ // mqtt连接用户名 e
vue 使用mqtt即使通讯协议
yuzenan的博客
03-04 3607
MQTTBox测试工具 使用文档：https://www.hangge.com/blog/cache/detail_2350.html MQTT安装 npm install mqtt 项目使用 export const MQTT_MQTTIP = 'ws://127.0.0.1:8080' export const MQTT_USERNAME = 'admin' export ...
MQTT错误：TCP/TLS连接失败
CqpFsharp的博客
09-25 1792
然而，在使用MQTT时，有时候会遇到错误，其中之一是TCP/TLS连接失败。当出现MQTT错误：TCP/TLS连接失败时，需要检查网络连接、证书配置和连接参数。检查证书配置：如果使用了TLS连接，请确保证书的有效性和正确性。安全设置问题：如果使用了TLS（Transport Layer Security）加密连接，那么连接过程中可能存在证书验证问题。网络问题：TCP/TLS连接需要通过网络进行通信，如果网络不稳定或存在故障，就可能导致连接失败。配置问题：连接参数的错误配置也可能导致连接失败。
MQTT无权连接
weixin_44977732的博客
06-07 1661
报错：原因：MQTT账号连接的客户端的数据库被迁移了，无法连接数据库，查不到数据库中的用户信息，所以导致无权访问了。
MQTT连接秒断，MQTT连接测试程序可以连接代码无法连接，Best MQTT发送数据提示版本不一致
学不会shader
12-26 4692
MQTT连接秒断，MQTT连接测试程序可以连接代码无法连接，Best MQTT发送数据提示版本不一致
vue3+vite4使用mqtt协议遇到的问题
xiaoliyo_的博客
08-14 2805
vue3+vite4使用mqtt遇到的版本问题以及buffer和globel等等其他问题
vue中使用mqtt订阅（普通方法连不上的请看我）
qq_31404277的博客
12-10 1万+
vue中的mqtt订阅，普通的mqtt和stomp.js已经不行啦
Vue3 如何搭建mqtt及使用以及多个订阅获取数据
Yane410的博客
11-02 2343
使用前先下载相应的依赖包。1、在utils里面创建。2.在utils里面创建。
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(); ``` 请注意，这只是一个简单的示例，实际使用时可能需要处理更多的逻辑和错误处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值