Networking understanding for connecting mqtt broker to tulip

I have a trial account of tulip, and I have a Mqtt broker running on my local machine, when I am trying to use mqtt connector to connect to mqtt broker over secured websocket I am not able to connect it. I am trying to connect over port 8000.
Are there network settings needs to be done? like enable port or allow url in tulip. or open port on local machine to connect to tulip?
how does network setting works in this case?

Hi @p.bhagwan.gaikwad and welcome to Tulip Community! :tulip:

I want to check first, if you have seen this article and guidance here? How To Build Your First MQTT Connector

When you say you are not able to connect, are you seeing any error messages that you could share?

Hi Beth,
Yes, I have tried above link, in this case my setup is as follow:

  1. Hivemq-edge mqtt broker running on my local machine which secured websocket on port 8000.
  2. Tulip instance deployed on cloud - Tulip | Custom widgets
  3. I am trying to connect to connect to hivemq using following server configuration, server address mentioned is a public IP address of my laptop.
  4. The error I am getting is - Test failed: [500] Error: Timeout.

Apart from this, my other question was, we want to use custom widget which will connect to mqtt broker using javascript code. for this I want to understand what all network settings are required if tulip instance is on cloud and hivemq-edge is on virtual machine.

Gotcha!

As a first debugging step, can you verify if you can connect to this MQTT broker from a machine outside your network? (To validate that the IP address really is reachable and their ports are forwarded properly). You can use any MQTT cli to check this.

On the question of using a custom widget as a MQTT client, this should be possible and I will look into the specific requirements to do so.

@p.bhagwan.gaikwad - just following up here. We made a custom widget recently for a customer that does just that (connecting to mqtt broker and Tulip Player). You may already be in the loop on that, but I wanted to share here publicly for anyone else who may find this CW useful.

customWidget-MQTT.js Widget (1).json (13.4 KB)

Some more info:

This CW uses MQTT.js to connect directly to an MQTT broker from the browser/Player and fires events that can be used in App triggers when messages are published. It has some built-in reconnect logic, and hopefully covers most cases of updating the prop values (changing subscriptions, etc), but it’s probably not perfect!

Example architecture for this is below:

Some things to note:

  • Only connects to WSS (secure websocket) interfaces on the Broker
  • It can only connect to a Broker that is reachable from the Player device (doesn’t use Tulip cloud to connect)
  • If you want move to custom Edge Drivers for this use case in future, you’lll want to make sure that your Apps are using the Custom Widget like it’s currently set up: firing events when messages are received, instead of updating writeable props with values. Edge Drivers won’t have a mechanism for directly updating a variable like a Custom Widget can, so that’s this is designed using the “Events” part of Custom Widgets where possible.

Hi, apologies for late reply I was away for a week from the office. I will go through all of the information provided by you and get back to you.

Thank you

Hi I have tried the customWidget-MQTT.js code you have given to connect with MQTT broker and its working, thank you so much!!

1 Like

awesome! glad to hear it :slight_smile: