无法通过 angular8 中的 ngx-mqtt 连接到 MQTT 代理 [英] Unable to connect to MQTT broker via ngx-mqtt in angular8
问题描述
无论我做什么，我都无法在我的 Angular 应用程序中通过 websocket 连接到 mqtt 代理(在 chrome 和 firefox 中尝试).为简单起见，我使用 HiveMQ 代理，我已经发布了关于该主题的/gat/38/openReservationRequests 一些数据
我已经关注了这个中篇文章关于如何使用 ngx-mqtt 以角度连接到 mqtt 但对我来说它不起作用.
在我的应用中:
我已经安装了模块
npm install ngx-mqtt --save我已经在我的 app.module.ts
forRoot<预><代码>...导出常量 MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {connectOnCreate: 真,主机名:'broker.hivemq.com'，端口:8000，路径:'/gat/38/openReservationRequests',协议:'ws'，};...进口:[...MqttModule.forRoot(MQTT_SERVICE_OPTIONS),...],...我在app.component.ts的ngOnInit中执行这个函数
但我总是收到此错误:
core.js:6014 错误类型错误:无法读取未定义的属性重新订阅"在 MqttClient.subscribe (mqtt.min.js:1)在 mqtt.service.js:211在 Observable._subscribe (使用.js:8)在 Observable._trySubscribe (Observable.js:42)在 Observable.subscribe (Observable.js:28)在 FilterOperator.call (filter.js:13)在 Observable.subscribe (Observable.js:23)在 Observable.connect (ConnectableObservable.js:30)在 RefCountOperator.call (refCount.js:17)在 Observable.subscribe (Observable.js:23)mqtt.min.js:1 WebSocket 连接到ws://broker.hivemq.com:8000/gat/38/openReservationRequests"失败:在收到握手响应之前连接已关闭如果我在 MQTT_SERVICE_OPTIONS 中指定了 clientId，我仍然会遇到同样的错误.
如果我将 protocol 更改为 wss 我会得到一个不同的错误:
core.js:6014 错误类型错误:无法读取未定义的属性重新订阅"在 MqttClient.subscribe (mqtt.min.js:1)在 mqtt.service.js:211在 Observable._subscribe (使用.js:8)在 Observable._trySubscribe (Observable.js:42)在 Observable.subscribe (Observable.js:28)在 FilterOperator.call (filter.js:13)在 Observable.subscribe (Observable.js:23)在 Observable.connect (ConnectableObservable.js:30)在 RefCountOperator.call (refCount.js:17)在 Observable.subscribe (Observable.js:23)mqtt.min.js:1 WebSocket 连接到wss://broker.hivemq.com:8000/gat/38/openReservationRequests"失败:连接建立错误:net::ERR_CONNECTION_CLOSED如果我在观察主题之前尝试在我的 app.component.ts ngOnInit 中手动连接:
this.mqttService.connect({主机名:'broker.hivemq.com'，端口:8000，路径:'/gat/38/openReservationRequests',clientId: '34er23qwrfq42w3'//那些只是随机数字});我仍然收到上述错误.对我来说，最好连接一些内部组件(在用户通过身份验证后可以访问)，因为我将拥有我的私人 mqtt 代理，并且主题将取决于登录的用户信息.
我尝试过使用/不使用 cliendId 等协议的任何组合，但此时我不知道出了什么问题.我已经多次完全重新编译我的应用程序，我尝试将它发布到我的测试服务器上，它有一个 ssl 证书，但没有任何改变.
感谢 @Anant Lalchandani 解决了我设置了正确的路径.>
另一个问题是 '/mytopic' 和 'mytopic' 确实是两个不同的主题，我也用错了.这是我的代码，更新:app.module.ts
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {连接创建:假，主机名:'broker.hivemq.com'，端口:8000，路径:'/mqtt'};appcomponent.ts(目前在 ngOnInit 中)
this.mqttService.connect({主机名:'broker.hivemq.com'，端口:8000，路径:'/mqtt'，客户 ID:'1234e3qer23rf'});this.mqttService.onConnect.订阅(康纳克=>{console.log('CONNECTED');控制台日志(康纳克)；});this.mqttService.observe('gat/38/openReservationRequests').subscribe((message: IMqttMessage) => {this.msg = 消息；console.log(new TextDecoder('utf-8').decode(message.payload));});我已经检查了您分享的有问题的代码片段.
在您的 app.module.ts 中，路径值应为/mqtt".您已将主题设置为此处的路径值.该主题只能订阅/发布.由于您在连接到 websocket 时使用主题作为路径值，因此您的应用程序将无法首先连接到 websocket.
我们需要使用/mqtt 作为路径的原因是它指定您通过 WebSocket 协议发送 MQTT 消息.
HiveMQ 本身的文档声明在其示例中使用路径作为/mqtt".您可以在此处查看文档.
No matter what i do i can't connect to a mqtt broker via websocket in my angular application (trying in chrome and firefox).
For simplicity i'm using HiveMQ broker, i've published on the topic /gat/38/openReservationRequests some data
I've followed this medium article on how to connect to mqtt in angular using ngx-mqtt but for me it is not working.
In my app:
I've installed the module
npm install ngx-mqtt --save
i've added the configuration and set the module forRoot in my app.module.ts
...
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
connectOnCreate: true,
hostname: 'broker.hivemq.com',
port: 8000,
path: '/gat/38/openReservationRequests',
protocol: 'ws',
};
...
imports: [
...
MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
...
],
...
i'm executing this function inside the ngOnInit of app.component.ts
...
import { IMqttMessage, MqttConnectionState, MqttService } from 'ngx-mqtt';
...
constructor(private mqttService: MqttService) {
this.mqttService.state.subscribe((s: MqttConnectionState) => {
const status = s === MqttConnectionState.CONNECTED ? 'CONNECTED' : 'DISCONNECTED';
this.status.push(`Mqtt client connection status: ${status}`);
});
}
ngOnInit() {
this.subscription = this.mqttService
.observe('/gat/38/openReservationRequests')
.subscribe((message: IMqttMessage) => {
this.msg = message;
console.log('msg: ', message);
console.log('Message: ' + message.payload.toString() + 'for topic: ' + message.topic);
console.log('subscribed to topic: ' + /gat/38/openReservationRequests);
});
}
but i am always getting this error:
core.js:6014 ERROR TypeError: Cannot read property 'resubscribe' of undefined
at MqttClient.subscribe (mqtt.min.js:1)
at mqtt.service.js:211
at Observable._subscribe (using.js:8)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at FilterOperator.call (filter.js:13)
at Observable.subscribe (Observable.js:23)
at Observable.connect (ConnectableObservable.js:30)
at RefCountOperator.call (refCount.js:17)
at Observable.subscribe (Observable.js:23)
mqtt.min.js:1 WebSocket connection to 'ws://broker.hivemq.com:8000/gat/38/openReservationRequests' failed: Connection closed before receiving a handshake response
if i specify the clientId inside the MQTT_SERVICE_OPTIONS i still get the same error.
if i change the protocol to wss i get a different error:
core.js:6014 ERROR TypeError: Cannot read property 'resubscribe' of undefined
at MqttClient.subscribe (mqtt.min.js:1)
at mqtt.service.js:211
at Observable._subscribe (using.js:8)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at FilterOperator.call (filter.js:13)
at Observable.subscribe (Observable.js:23)
at Observable.connect (ConnectableObservable.js:30)
at RefCountOperator.call (refCount.js:17)
at Observable.subscribe (Observable.js:23)
mqtt.min.js:1 WebSocket connection to 'wss://broker.hivemq.com:8000/gat/38/openReservationRequests' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
If i try to connect manually inside my app.component.ts ngOnInit before observing the topic:
this.mqttService.connect({
hostname: 'broker.hivemq.com',
port: 8000,
path: '/gat/38/openReservationRequests',
clientId: '34er23qwrfq42w3' //those are just random digits
});
i still get the error above. For me it would be ideal to connect in some inner component (accessible after the user is authenticated) because i will have my private mqtt broker and the topic will depend on the logged user information.
I've tried any combination of protocol with/without cliendId etc but at this point i don't know what is wrong. I've already fully recompiled my app lots of times, i've tried publishing it on my test-server which has a ssl certificate but nothing changed.
Resolved thanks to @Anant Lalchandani i set the correct path.
The other problem was that '/mytopic' and 'mytopic' are indeed two different topic and i was using it wrong too. This is my code, updated: app.module.ts
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
connectOnCreate: false,
hostname: 'broker.hivemq.com',
port: 8000,
path: '/mqtt'
};
appcomponent.ts (inside ngOnInit for now)
this.mqttService.connect({
hostname: 'broker.hivemq.com',
port: 8000,
path: '/mqtt',
clientId: '1234e3qer23rf'
});
this.mqttService.onConnect
.subscribe(
connack=> {
console.log('CONNECTED');
console.log(connack);
}
);
this.mqttService.observe('gat/38/openReservationRequests')
.subscribe((message: IMqttMessage) => {
this.msg = message;
console.log(new TextDecoder('utf-8').decode(message.payload));
});
I have checked the code snippets you shared in question.
In your app.module.ts, the path value should be '/mqtt'. You have set the topic as the value of path here. The topic can only be subscribed/published. As you are using a topic as a path value at the time of connecting to a websocket, your application will not be able to connect to websocket at the first place.
The reason why we need to use /mqtt as a path is it specifies you are sending MQTT messages over the WebSocket protocol.
The documentation of HiveMQ itself stated to use the path as '/mqtt' in its example. You can check the documentation here.
这篇关于无法通过 angular8 中的 ngx-mqtt 连接到 MQTT 代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
