CODEWITHSUNDEEP
mqtt
ioana
ioana

Reputation: 95

Mqtt Brigde: Displaying MQTT messages in a browser

I am new to mqtt, so any answer is appreciated.

My objective is to display real time Mqtt messages on a html page. It seems easy but not for me.

I am not sure on how to create a bridge between my mosquitto broker(it is running on my Rasberry Pi) and HiveMQ(at the moment running on a laptop). And how do I link my html page to display the mqtt messages ?

I don't what to use java or other complicated plugins.

thanks.

Upvotes: 0

Views: 1599

Answers (2)

hardillb
hardillb

Reputation: 59608

I see jpmens has covered the Broker to HTML (Websockets) bit.

To bridge you should be able to do it from either the mosquitto side or the HiveMQ side.

For mosquitto you need to add a short section to your mosquitto.conf file

Assuming your HiveMQ broker is running on IP address 10.0.0.5 then something like the following is needed:

connection hiveMQ
address 10.0.0.5
topic # out

The first line just names the connection, the second gives the location of the remote broker. The third is a bit more complex, it controls what gets sent across the bride. This example sends everything (# wildcard topic match) from mosquitto to hivemq (out), but nothing will come back the other way.

Getting the topic line right can be complicated if you want to things to go in both directions. Full details can be found in the mosquitto.conf man page

Upvotes: 1

user2991764
user2991764

Reputation:

You are using HiveMQ, which has builtin support for Websockets. What you'll then want, is to use the Paho MQTT JavaScript in your Web page; that connects to the Websocket server (HiveMQ) on the TCP port you've configured there, and handles the communication between your Web app and the MQTT broker (HiveMQ).

There's a full-featured Websocket client which does that which you can use as a starting point for your own code.

Upvotes: 2

Related Questions