Bruce Crowthorne
Posts: 45
Joined: Wed Jan 11, 2012 7:19 pm

MQTT Javascipt client issue.

Tue Nov 14, 2017 7:46 pm

I want to transfer a temperature reading from a Pi0 which reads an 18B20 sensor to my Pi3 which is running my MQTT server and Apache.

I have got it transferring data from a button on a web page on the Pi3 to the Pi0 using JavaScript and MQ, but I am having problems getting the Pi3 web page to retrieve the data published by the Pi0.

I can monitor the queue form a console window using "mosquitto_sub -d -t highmount/garageb/temp1" and the Pi0 is outputting values OK. I can also publish data manually to the queue, but the JavaScript doesn't pick up any of the data.
The example is based on an example code on the HiveMQ site.

The JavaScript on the web page seems to connect to the MQTT server when I check the console window, but it doesn't seem to pick up any messages from the queue.
Can you have a look at my code (stripped as much as I can) to see if you can spot anything wrong?

Code: Select all

<!--
   File gartempsub10.html, based on weatherV1_3.html and mqpubbut12.html

   V10 actually connects !! So keep that!
   V11 Stipped out everything except MQTT, NB V12 tried port 80 - worse!
   V13 Moved function onConnect to end of script
   
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
  <head>
    <title>Temperature subscribe to MQ</title>                         <!-- this is the title header -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    
</head>
  <body>
   <p> This is a stripped version to isolate just the MQTT stuff</p>


<script type="text/javascript">

    var clientID = "ID-" + Math.round(Math.random() * 1000);
    var client = new Paho.MQTT.Client("192.168.1.203", 9001, clientID);  // updated to 203 and port 9001

    client.connect({onSuccess:onConnect});                      // Confirm connection on web page console right click and select "inspect element"

    client.subscribe("highmount/garageb/temp1");             // Subscribe to queue
    
    client.onMessageArrived = function (message) {
        console.log("Message arrived    "+ message.payloadString);
        console.log("Topic              "+ message.destinationName);
    }

    function onConnect() {
        console.log("connected");
                         }  
</script>

  </body>
</html>

Thanks
Bruce

User avatar
DougieLawson
Posts: 30171
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website

Re: MQTT Javascipt client issue.

Wed Nov 15, 2017 1:19 am

I see

Code: Select all

mqttws31.js:858 Uncaught Error: AMQJS0011E Invalid state not connected.
    at ClientImpl.Paho.MQTT.ClientImpl.subscribe (mqttws31.js:858)
    at Client.subscribe (mqttws31.js:1849)
    at ws.html:31
Paho.MQTT.ClientImpl.subscribe @ mqttws31.js:858
Client.subscribe @ mqttws31.js:1849
(anonymous) @ ws.html:31
VM172:164 WebSocket connection to 'ws://192.168.3.14:9001/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT
WrappedWebSocket @ VM172:164
WrappedWebSocket @ VM242:164
Paho.MQTT.ClientImpl._doConnect @ mqttws31.js:979
Paho.MQTT.ClientImpl.connect @ mqttws31.js:849
Client.connect @ mqttws31.js:1799
(anonymous) @ ws.html:29
VM172:164 WebSocket connection to 'ws://192.168.3.14:9001/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT
WrappedWebSocket @ VM172:164
WrappedWebSocket @ VM242:164
Paho.MQTT.ClientImpl._doConnect @ mqttws31.js:977
Paho.MQTT.ClientImpl._disconnected @ mqttws31.js:1459
Paho.MQTT.ClientImpl._on_socket_error @ mqttws31.js:1347
(anonymous) @ mqttws31.js:157
There's two reasons for that.

You're trying to subscribe before the connect is complete. You should set a JS variable in your onConnect() function that's tested before you try any other MQTT calls.

I'm not connected to my local LAN (15,000Km away from here) - hence the timeout.
Microprocessor, Raspberry Pi & Arduino Hacker
Mainframe database troubleshooter
MQTT Evangelist
Twitter: @DougieLawson

Since 2012: 1B*5, 2B*2, B+, A+, Zero*2, 3B*3

Please post ALL technical questions on the forum. Do not send private messages.

asandford
Posts: 1717
Joined: Mon Dec 31, 2012 12:54 pm
Location: Ealing

Re: MQTT Javascipt client issue.

Wed Nov 15, 2017 1:33 am

You don't need to build this stuff yourself, Node Red is installed on your Pi and can handle it for you.

User avatar
DougieLawson
Posts: 30171
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website

Re: MQTT Javascipt client issue.

Wed Nov 15, 2017 2:16 am

This stuff is more fun (plain javascript) and doesn't need a brain change to visual programming.
Microprocessor, Raspberry Pi & Arduino Hacker
Mainframe database troubleshooter
MQTT Evangelist
Twitter: @DougieLawson

Since 2012: 1B*5, 2B*2, B+, A+, Zero*2, 3B*3

Please post ALL technical questions on the forum. Do not send private messages.

Massi
Posts: 1631
Joined: Fri May 02, 2014 1:52 pm
Location: Italy

Re: MQTT Javascipt client issue.

Wed Nov 15, 2017 8:29 am

look at the basic example on the paho webpage
https://eclipse.org/paho/clients/js/

as you see, the subscribe part is under the "onConnect" function.

PS: there is an updated version of the library (1.0.3) that has automatic reconnect.

Bruce Crowthorne
Posts: 45
Joined: Wed Jan 11, 2012 7:19 pm

Re: MQTT Javascipt client issue.

Wed Nov 15, 2017 7:37 pm

Thanks everyone, moving the "client.subscribe("highmount/garageb/temp1");" to inside the "function onConnect() {" did the trick.
I guess that makes sure that the "subscribe" executes far enough after the "connect" command.

Only a little change to the code ....

Code: Select all

<html>
  <head>
    <title>Temperature subscribe to MQ</title>                         <!-- this is the title header -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    
</head>
  <body>
   <p> This is a stripped version to isolate just the MQTT stuff</p>


<script type="text/javascript">

    var clientID = "ID-" + Math.round(Math.random() * 1000);
    var client = new Paho.MQTT.Client("192.168.1.203", 9001, clientID);  // updated to 203 and port 9001

    client.connect({onSuccess:onConnect});                      // Confirm connection on web page console right click and select "inspect element"

    client.onMessageArrived = function (message) {
        console.log("Message arrived    "+ message.payloadString);
        console.log("Topic              "+ message.destinationName);
                                                 }

    function onConnect() {
        console.log("connected");
        client.subscribe("highmount/garageb/temp1");             // Subscribe to queue - moved to within function
                         }
</script>

  </body>
</html>
asandford - yes, true and NodeRed is great if you want to operate in that environment, but I want to embed "stuff" - like buttons and charts in my local web page so I can read and publish data and also do control over relays and the like. I seriously thought about using it and I do still have a little graph running, and some of the dojo stuff is really good (I wish I knew enough to make use of some of that stuff !!)

OK, on to the next bit of the challenge ....
bruce

asandford
Posts: 1717
Joined: Mon Dec 31, 2012 12:54 pm
Location: Ealing

Re: MQTT Javascipt client issue.

Sun Nov 19, 2017 12:43 am

DougieLawson wrote:
Wed Nov 15, 2017 2:16 am
This stuff is more fun (plain javascript) and doesn't need a brain change to visual programming.
Uninformed crud as usual. NR nodes are written in plain javascript, the visual editor just gets the program flow done.The flow editor is no harder to use than scratch.

All the 'fun' of plain javascript gets removed when it doen't work (hence why the OP posted), and as a solution I suggested NR which has ready built nodes for this.

User avatar
DougieLawson
Posts: 30171
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website

Re: MQTT Javascipt client issue.

Sun Nov 19, 2017 12:54 am

You may like Scratch, I don't. Programming should be done long hand or you learn nothing.

The NodeRed visual crap is what put me off that stuff, so I never looked at its inner workings and probably won't bother.
Microprocessor, Raspberry Pi & Arduino Hacker
Mainframe database troubleshooter
MQTT Evangelist
Twitter: @DougieLawson

Since 2012: 1B*5, 2B*2, B+, A+, Zero*2, 3B*3

Please post ALL technical questions on the forum. Do not send private messages.

asandford
Posts: 1717
Joined: Mon Dec 31, 2012 12:54 pm
Location: Ealing

Re: MQTT Javascipt client issue.

Sun Nov 19, 2017 11:11 pm

DougieLawson wrote:
Sun Nov 19, 2017 12:54 am
You may like Scratch, I don't. Programming should be done long hand or you learn nothing.

The NodeRed visual crap is what put me off that stuff, so I never looked at its inner workings and probably won't bother.
I've never used scratch, it's one of the first things I remove from a 'full fat' image (along with java, sonic pi, minecraft and wolfram). NR is a rapid development tool developed by an IBM team (decent guys that know their stuff, not like some bitter ex-IBMers). The NR 'visual crap' as you so nicely put it is the best part, and the fact you don't 'get it' doesn't surprise me at all.

I think it's one of the most underrated tools on the Pi, and should have its own sub-forum for those that appreciate it for the powerful environment that it is.

User avatar
DougieLawson
Posts: 30171
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website

Re: MQTT Javascipt client issue.

Mon Nov 20, 2017 3:17 pm

I may be an ex-IBM'er but I'm in no way bitter. Getting sacked "made redundant" by IBM was the best thing that's happened in 35 years. I've had more fun, more enjoyment, travelled further, been less stressed and earned more money (per year) in the last two years than I did between 1994 & 2014 with IBM.
Microprocessor, Raspberry Pi & Arduino Hacker
Mainframe database troubleshooter
MQTT Evangelist
Twitter: @DougieLawson

Since 2012: 1B*5, 2B*2, B+, A+, Zero*2, 3B*3

Please post ALL technical questions on the forum. Do not send private messages.

Return to “Troubleshooting”

Who is online

Users browsing this forum: DirkS, liamr5, TylerDurden and 58 guests