How to display the data collected by iBeacon sniffer on a web page

I have several iBeacon sniffers and beacons. From my understanding, the iBeacon sniffers gather and send iBeacon data via MQTT to the Mosquitto app on my server. Currently, the mosquitto on my server can successfully subscribe and display all iBeacon data on the terminal. But how can i display these data on a web page instead of a terminal?

Here are some of my researchs on google, which are basically to build a MQTT web client:

  1. Recompile mosquitto with websocket protocol enabled
  2. Use paho javascript library to build an MQTT client and communicate with the mosquitto on my server.

However, the steps above didn’t work because the mosquitto cannot make connection with my iBeacon sniffer once the websocket protocol is enabled. (Without websocket protocol, this connection can be made successfully).

In short, are there any ways to display thses iBeacon data on a web page?

Thanks in advance.

I think you can try emqttd. It can support websocket protocol in same time. Our testing server is powered by emqttd too.

Thank you very much for recommending emqttd. This is a really nice and powerful software, I will take a look at their features soon. Thank you very much again.

Hmm, I went through the emqttd docs for the whole day and played around with it. Their features are good except for one problem: the emqttd dashboard doesn’t actually reload from the server after I modify the server code and refresh my browser. I suspect it is because of the web page cache but i don’t know how to solve it. I have tried adding the following code in the index.html but doesn’t work:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

In short, how can I refresh the dashboard based on the latest code on the server instead of seeing the cached pages?

emqttd is just a MQTT broker. You should write a mqtt subscriber to get the newest data and display on web page. Please check example code here.

Dear Ntuer,
We have created one demo page, you can see here :
Page is refresh every 2 minutes.
You must have a server, with MQTT forwarding datas to a MySQL database, and one short webserver (under Python-Flask in our case).

Hi France,

Your demo page looks great! Your example fetched all data at server side. But it’s possible to get data through websocket by javascript.

Next weeks, we will add some API REST for providing datas…

Thank you very much for providing me these examples. Today I managed to get the data on my browser using Paho javascript library and emqttd as the mqtt broker via websocket. Somehow a few days ago this approach didn’t work with mosquitto with websocket enabled.