# Communicate between UI and MQTT

**URL:** <https://discourse.nodered.org/t/communicate-between-ui-and-mqtt/62228>\
**Category:** General\
**Tags:** mqtt, uibuilder\
**Created:** [5 May 2022 10:32 UTC](https://discourse.nodered.org/t/communicate-between-ui-and-mqtt/62228 "2022-05-05T10:32:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![emnabk\_12](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emnabk_12/32/59752_2.png) [@emnabk\_12](https://discourse.nodered.org/u/emnabk_12)\
**Post date:** [5 May 2022 10:32 UTC](https://discourse.nodered.org/t/communicate-between-ui-and-mqtt/62228/1 "2022-05-05T10:32:45Z")

</div>

Hello all, I want to send a payload (for exemple : true) to a uibilder node and based on that payload, I want the javascript code inside the uibuilder to read it and use a condition on it.  
If I have to use socket, how does that work?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 May 2022 13:42 UTC](https://discourse.nodered.org/t/communicate-between-ui-and-mqtt/62228/2 "2022-05-05T13:42:14Z")

</div>

Hi Emna, uibuilder does all the hard work for you. You don't need to mess with sockets since the uibuilder node does the server part and the uibuildefe library does the client part.

As long as you've loaded the client library and run `uibuilder.start()`, comms should be working. You can confirm that by connecting a debug node to the lower output port on your uibuilder node. You will see the startup messages coming from the client when it connects. You will also see the connected client count change on the node itself.

Inside your front-end code, you need a listener function:

```auto
uibuilder.onChange('msg', (msg) => {
    console.log('New msg from Node-RED: ', msg)
})

```

Please do check out the beginners guide which is part of the Tech Docs that you can access from GitHub or from any of your deployed uibuilder nodes.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 July 2022 13:43 UTC](https://discourse.nodered.org/t/communicate-between-ui-and-mqtt/62228/3 "2022-07-04T13:43:02Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.