React Native: Client doesn't connect and no error is emitted

[emin93]

Hi,

After crawling through various issues, i made it to build a commonjs2 browser variant, which I've used in my React Native application:
webpack mqtt.js --output-library mqtt --output-library-target commonjs2 --output-filename mqtt-browser.js

I use it like this:

import mqtt from 'mqtt/dist/mqtt-browser';

const client = mqtt.connect('wss://iot.eclipse.org');

client.on('connect', () => console.log('connected')); // No console.log
client.on('error', error => console.log(error)); // No console.log

Does anybody know what the issue could be? As soon as I can get this fixed, I'll add a guide on how to use this library with React Native! 😃

AB#8916595

[RangerMauve]

Could you provide more details like the version of MQTT.js you're using?
Are you seeing anything in your console?
Is this using remote debugging or are you running it from within the app?
Have you followed the thread in #573?

[emin93]

MQTT.js version: 2.15.3
React Native version: 0.53.3

JS console: No logs at all
iOS console:

2018-03-01 15:15:08.553 [info][tid:com.facebook.react.WebSocketModuleQueue][RCTSRWebSocket.m:520] SocketRocket: In debug mode.  Allowing connection to any root cert
2018-03-01 15:15:08.553896+0100 KitchenSink[37021:313335] SocketRocket: In debug mode.  Allowing connection to any root cert
2018-03-01 15:15:10.962 [info][tid:com.facebook.react.WebSocketModuleQueue][RCTSRWebSocket.m:520] SocketRocket: In debug mode.  Allowing connection to any root cert
2018-03-01 15:15:10.962015+0100 KitchenSink[37021:313335] SocketRocket: In debug mode.  Allowing connection to any root cert
2018-03-01 15:15:12.938 [info][tid:com.facebook.react.WebSocketModuleQueue][RCTSRWebSocket.m:520] SocketRocket: In debug mode.  Allowing connection to any root cert
2018-03-01 15:15:12.937764+0100 KitchenSink[37021:313333] SocketRocket: In debug mode.  Allowing connection to any root cert

I am running it from within the app.

I also saw the thread #573 and tried a lot of it, but always when i thought i got one step closer, another error happened.

Steps to reproduce:

1. Create a new empty React Native app (react-native init MyTestApp)
2. Install mqtt as a dependency (npm i mqtt --save-exact)
3. Run this inside your terminal: (cd node_modules/mqtt && npm i && webpack mqtt.js --output-library mqtt --output-library-target commonjs2 --output-filename mqtt-browser.js)
4. Make sure your App.js looks something like this:

import React, { Component } from 'react';
import { Text } from 'react-native';
import mqtt from 'mqtt/dist/mqtt-browser';

export default class App extends Component {
    componentDidMount = () => {
        const client = mqtt.connect('wss://iot.eclipse.org');

        client.on('connect', () => console.log('connected')); // No console.log
        client.on('error', error => console.log(error)); // No console.log
    };

    render = () => (
        <Text>
            My MQTT Demo app!
        </Text>
    );
}

[RangerMauve]

Try using version 1.14.1 like I said in my post. That's why I have running in prod right now. Haven't had time to investigate why the newer versions weren't working.

[RangerMauve]

Also, I'd suggest trying a local mosquitto broker or something that you can access server logs for more easily.

[emin93]

Thanks for your comment, it seems like i missed the 1.14.1 part. Now I'm getting a new error Could not determine host. Specify host manually.. I looked up in the MQTT.js code why this error gets thrown and it seems like that's the case when document is not part of the globals. Just like in the other thread.

I then tried to connect like this, but i still got the same error:

import mqtt from 'mqtt/dist/mqtt-browser';

const client = mqtt.connect({
    servers: [{ host: 'iot.eclipse.org', port: 443 }] // I also tried wss://iot.eclipse.org as host
});

As @rclai did, I then also added the polyfill and this seemed to fix the issue.

But now I'm stuck at the same issue as before. No console logs. I will try to investigate the issue a little bit further and post updates.

[RangerMauve]

Cool, glad to see you're making progress!

[FrozenPyrozen]

@emin93 how it's going for now? Do you have some progress with it?

[emin93]

Closing this issue as this has been a long time ago and I think I ended up using another library for it.

[FrozenPyrozen]

@emin93 what was this library? Because I've tried many of them and no one working with ssl/tls connection with react-native(