Open gdegas opened 6 years ago
@gdegas Did you resolver this problem? thanks, I have the same problem
@lenLch No I defaulted to using mqtt.js
mqtt-react
is a container for mqttjs/MQTT.js, it is possible to include the options based on the docs:
import { Connector } from 'mqtt-react';
import App from './components/App';
export default () => (
<Connector mqttProps="ws://username:password@test.mosca.io">
<App />
</Connector>
);
URL.parse()
function from here
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ href │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │ │ auth │ host │ path │ hash │
│ │ │ ├──────────────┬──────┼──────────┬────────────────┤ │
│ │ │ │ hostname │ port │ pathname │ search │ │
│ │ │ │ │ │ ├─┬──────────────┤ │
│ │ │ │ │ │ │ │ query │ │
" https: // user : pass @ sub.host.com : 8080 /p/a/t/h ? query=string #hash "
│ │ │ │ │ hostname │ port │ │ │ │
│ │ │ │ ├──────────────┴──────┤ │ │ │
│ protocol │ │ username │ password │ host │ │ │ │
├──────────┴──┼──────────┴──────────┼─────────────────────┤ │ │ │
│ origin │ │ origin │ pathname │ search │ hash │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│ href │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
(all spaces in the "" line should be ignored — they are purely for formatting)
A simpler way:
<Connector mqttProps={
{
host: 'test.mosca.io',
port:3000,
username: 'username',
password: 'password'
}
}>
By default, mqtt.js
would simply used ws
protocol
Tested using mosca
mqtt broker with authentication
enabled
for other options (non url related) like clientId ... 'options' props should have been defined.. (just pass this prop as a second argument for MQTT.connect() ) any ways since Connector also support directly specifying mqtt object through 'mqtt' prop .. we cal also do it this way.
`import MQTT from "mqtt"; const mqtt = MQTT.connect('url', options);
I have not tested this library yet. But since
mqtt-react
is a container for mqttjs/MQTT.js, it should be possible to include the options based on the docs:import { Connector } from 'mqtt-react'; import App from './components/App'; export default () => ( <Connector mqttProps="ws://username:password@test.mosca.io"> <App /> </Connector> );
URL.parse()
function from here┌─────────────────────────────────────────────────────────────────────────────────────────────┐ │ href │ ├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤ │ protocol │ │ auth │ host │ path │ hash │ │ │ │ ├──────────────┬──────┼──────────┬────────────────┤ │ │ │ │ │ hostname │ port │ pathname │ search │ │ │ │ │ │ │ │ ├─┬──────────────┤ │ │ │ │ │ │ │ │ │ query │ │ " https: // user : pass @ sub.host.com : 8080 /p/a/t/h ? query=string #hash " │ │ │ │ │ hostname │ port │ │ │ │ │ │ │ │ ├──────────────┴──────┤ │ │ │ │ protocol │ │ username │ password │ host │ │ │ │ ├──────────┴──┼──────────┴──────────┼─────────────────────┤ │ │ │ │ origin │ │ origin │ pathname │ search │ hash │ ├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤ │ href │ └─────────────────────────────────────────────────────────────────────────────────────────────┘ (all spaces in the "" line should be ignored — they are purely for formatting)
Simpler way:
<Connector mqttProps={ host: 'ws://test.mosca.io', username: 'username', password: 'password' } >
am pretty sure you meant this to be like this <Connector mqttProps={ { host: 'ws://test.mosca.io', username: 'username', password: 'password' } }>
i tried this but didn't work
I have not tested this library yet. But since
mqtt-react
is a container for mqttjs/MQTT.js, it should be possible to include the options based on the docs:import { Connector } from 'mqtt-react'; import App from './components/App'; export default () => ( <Connector mqttProps="ws://username:password@test.mosca.io"> <App /> </Connector> );
URL.parse()
function from here┌─────────────────────────────────────────────────────────────────────────────────────────────┐ │ href │ ├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤ │ protocol │ │ auth │ host │ path │ hash │ │ │ │ ├──────────────┬──────┼──────────┬────────────────┤ │ │ │ │ │ hostname │ port │ pathname │ search │ │ │ │ │ │ │ │ ├─┬──────────────┤ │ │ │ │ │ │ │ │ │ query │ │ " https: // user : pass @ sub.host.com : 8080 /p/a/t/h ? query=string #hash " │ │ │ │ │ hostname │ port │ │ │ │ │ │ │ │ ├──────────────┴──────┤ │ │ │ │ protocol │ │ username │ password │ host │ │ │ │ ├──────────┴──┼──────────┴──────────┼─────────────────────┤ │ │ │ │ origin │ │ origin │ pathname │ search │ hash │ ├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤ │ href │ └─────────────────────────────────────────────────────────────────────────────────────────────┘ (all spaces in the "" line should be ignored — they are purely for formatting)
Simpler way:
<Connector mqttProps={ host: 'ws://test.mosca.io', username: 'username', password: 'password' } >
am pretty sure you meant this to be like this <Connector mqttProps={ { host: 'ws://test.mosca.io', username: 'username', password: 'password' } }>
i tried this but didn't work
<Connector mqttProps={
{
host: 'test.mosca.io',
port:3000,
username: 'username',
password: 'password'
}
}>
Remove the protocol on host
leaving only the base URL, then specify the port separately. Tested on mosca
mqtt broker with authentication enabled.
Hello @gdegas, I am getting failed: Error during WebSocket handshake: net:: ERR_CONNECTION_RESET this error when I fixed mqttprops.
I tried using these props
mqttProps: {
host: "157.245.85.49:8084/mqtt",
username: "tolomoto",
password: "S36EeqD956UwGCYC",
},
or
mqttProps: {
protocol: "wss",
host: "wss://157.245.85.49:8084/mqtt",
port: "8084",
username: "tolomoto",
password: "S36EeqD956UwGCYC",
},
or
mqttProps: "ws://157.245.85.49:8084/mqtt"
or
mqttProps: "ws://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt
Please tell me how to solve it.
Hello @gdegas, I am getting failed: Error during WebSocket handshake: net:: ERR_CONNECTION_RESET this error when I fixed mqttprops.
I tried using these props
mqttProps: { host: "157.245.85.49:8084/mqtt", username: "tolomoto", password: "S36EeqD956UwGCYC", },
or
mqttProps: { protocol: "wss", host: "wss://157.245.85.49:8084/mqtt", port: "8084", username: "tolomoto", password: "S36EeqD956UwGCYC", },
or
mqttProps: "ws://157.245.85.49:8084/mqtt"
or
mqttProps: "ws://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt
Please tell me how to solve it.
mqttProps: {{
host: "157.245.85.49:8084/mqtt",
username: "tolomoto",
password: "S36EeqD956UwGCYC",
}}
mqttProps: {"ws://157.245.85.49:8084/mqtt"}
mqttProps: {"ws://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt}
Make sure you have the curly braces...
mqttProps: {{
protocol: "wss",
host: "wss://157.245.85.49:8084/mqtt",
port: "8084",
username: "tolomoto",
password: "S36EeqD956UwGCYC",
}}
This would never work. The component do not looks for protocol
. Specifying the protocol like this host:"wss://"
is not working either. By the default protocol ws
is used. If your are going to use wss
, use URL based:
mqttProps: {"wss://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt}
works.
Hello @gdegas, I am getting failed: Error during WebSocket handshake: net:: ERR_CONNECTION_RESET this error when I fixed mqttprops. I tried using these props
mqttProps: { host: "157.245.85.49:8084/mqtt", username: "tolomoto", password: "S36EeqD956UwGCYC", },
or
mqttProps: { protocol: "wss", host: "wss://157.245.85.49:8084/mqtt", port: "8084", username: "tolomoto", password: "S36EeqD956UwGCYC", },
or
mqttProps: "ws://157.245.85.49:8084/mqtt"
ormqttProps: "ws://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt
Please tell me how to solve it.mqttProps: {{ host: "157.245.85.49:8084/mqtt", username: "tolomoto", password: "S36EeqD956UwGCYC", }}
mqttProps: {"ws://157.245.85.49:8084/mqtt"}
mqttProps: {"ws://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt}
Make sure you have the curly braces...
mqttProps: {{ protocol: "wss", host: "wss://157.245.85.49:8084/mqtt", port: "8084", username: "tolomoto", password: "S36EeqD956UwGCYC", }}
This would never work. The component do not looks for
protocol
. Specifying the protocol like thishost:"wss://"
is not working either. By the default protocolws
is used. If your are going to usewss
, use URL based:
mqttProps: {"wss://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt}
works.Hello @gdegas, @hadifikri,
mqttProps: "wss://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt"
-> This is also not working
Hello @gdegas, @hadifikri,
mqttProps: "wss://tolomoto:S36EeqD956UwGCYC@157.245.85.49:8084/mqtt"
-> This is also not working
const mqtt_username = 'uname';
const mqtt_password = 'pass';
const mqtt_broker_ws = `ws://${mqtt_username}:${mqtt_password}@157.245.85.49:8084/mqtt`;
const mqtt_broker_wss = `wss://${mqtt_username}:${mqtt_password}@1157.245.85.49:8084/mqtt`;
<Connector mqttProps={mqtt_broker_ws}>
</Connector>
or
<Connector mqttProps={mqtt_broker_wss}>
</Connector>
If it's not working still, please check on how you serve the service at 157.245.85.49:8084/mqtt
. What kind of webserver do you use? The problem might be on the broker side. I notice you tried both ws
and wss
on the same port
number. Do take note that a single port can only handle one protocol, not both.
How can I do this, all it's letting me to do is pass a string with the url of the broker to connect to but not configuration options