Porting MQTT MessageReceived function from Processing to p5

p5.js Libraries
2

Are you running your broker locally?
My suggestion is first to become familiar with p5js. Usually you will have your core html file where it loads css and js. CSS and JS code can be local files or some online url.

  1. Ensure you have the p5js libraries? Are you working with he DOM? Load p5.dom as well and make sure it is load after p5js
  2. To talk to your broker, you will need some javascript library. Is one provided for you? You will load this library in the same way as a p5js library. Better to load this library at the end of your html
  3. Javascript uses the callbacks. You use these callbacks to access some information that is made available to you. If you run your sketch, my first step would be to print the content of msg to see its full structure. Something like:
function messageReceived(msg) {
    print(msg)
    
// Do something with the payload...
}

You can access this print line output in the browser where you are loading your html. You need to access the developer tools (in Chrome, click the 3 dots > more tools > developer tools) and then activate the Console tab where you can see the log messages.

Other than this, I encourage you to explore some recent youtube videos that shows how to start with javascript development. Daniel Shifman has also some good videos exploring javascript using p5js. I suggest maybe this one just to give you a feeling about js and external online APIs but the concept sort of apply to your API provided to you by the broker software.

This message is a bit basic however I hope it gets you started.

Kf

1 Like