Javascript 从传入的mqtt push更新alpinejs变量

我正在尝试从拉ajax请求方法转移到使用alpinejs和蚊子从物联网项目的mqtt推送。。在前面的帮助之后，我开始更多地了解alpinejs和mqtt客户机，但仍然不能完全完成我想要的

我想用传入的push消息更新alpinejs数据变量

我目前正在尝试简单地调用该函数，尽管它似乎在dom中工作，但它没有反映在html中，我假设html根本没有正确地触发事件

例如，我试图调用tester（）并让它设置值；我试过几件事，我知道我只是不明白

如何从传入消息更新alpinejs x-data的值/状态

<%- include('head'); %>
  <section class="text-gray-600 body-font flex" x-data="queryAjax()" x-init="fetchPinValue(); timer();"  >
    <div class="p-4 w-1/2 flex">
      <div class="w-1/4">
        <img src="images/fridge.svg">
      </div>
      <div class=" w-3/4">
        <div class="text-white px-5 py-4 border-0 rounded relative mb-4 bg-blue-400">
          <span class="text-xl inline-block mr-5 align-middle">
            <img src="images/air-compressor.svg" width="25px">
          </span>
          <span class="inline-block align-middle mr-8">
            Compressor Temp
            <h3 x-text="fridgeCompressorTemp"></h3>
            <button
              x-bind:class="{ 'animate-spin': fridgeFan == '0' }"
              @click="togglePin(fridgeFan)"
              type="button"
              class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none border-white hover:bg-white hover:text-white rounded active:bg-blue-600 "
              >
              <img src="images/fan.svg" width="25px">
            </button>
          </span>
        </div>
        <div class="text-white px-5 py-4 border-0 rounded relative mb-4 bg-blue-400" >
          <span class="text-xl inline-block mr-5 align-middle">
            <img src="images/temp_cold.svg" width="25px">
          </span>
          <span class="inline-block align-middle mr-8">
            Fridge Ambient Temp
            <h3 x-text="ambientTemp"></h3>
          </span>
        </div>
      </div>
    </div>
    <div class="p-4 text-center w-1/2" id="mqtt_div">

    </div>
  </section>


  <script>
            function queryAjax(v) {
              return {
                isLoading: false,
                fridgeCompressorTemp: null,
                ambientTemp: null,
                fridgeFan: true,
                time: new Date(),
                timer() {
                  setInterval(() => {
                    this.time = new Date();
                    this.fetchPinValue();
                  }, 5000);
                },

                tester(dest, msg){
                  console.log(dest + " : " + msg);
                  //console.log(this.testtext);
                  //this.testtext = "msg";
                  // console.log(this.testtext);
                  //this.updateText();
                  //this.fridgeFan = 0;
                  //this.isLoading = true;

                },
                fetchPinValue() {
                  this.isLoading = true;

                  fetch(`${bserver}/${token_1}/get/V5`)
                    .then(res => res.json())
                    .then(data => {
                      this.isLoading = false;
                      this.fridgeCompressorTemp = data;
                      console.log("fridgeCompressorTemp = " + data)
                    });
                    fetch(`${bserver}/${token_1}/get/V7`)
                    .then(res => res.json())
                    .then(data => {
                      this.isLoading = false;
                      this.ambientTemp = data;
                      console.log("ambientTemp = " + data)
                    });
                  fetch(`${bserver}/${token_1}/get/D13`)
                    .then(res => res.json())
                    .then(data => {
                      this.isLoading = false;
                      console.log("fridgeFan = " + data)
                      this.fridgeFan = data;
                    });
                },
                togglePin(){
                  /////////////some pins and names hardcoded here.only works for fridgefan
                  var i = (this.fridgeFan == '0') ? 1 : 0;
                  fetch(`${bserver}/${token_1}/update/D13?value=${i}`)
                    .then(data => {
                      this.fridgeFan = i
                    })
                }
              }
            }

      client = new Paho.MQTT.Client("192.168.10.66", Number(1884), "node-admin-2");
      // set callback handlers
      client.onConnectionLost = onConnectionLost;
      client.onMessageArrived = onMessageArrived;
      // connect the client
      client.connect({onSuccess:onConnect});

      // called when the client connects
      function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("onConnect");
        client.subscribe("sensors/sensor1");
      }

      // called when the client loses its connection
      function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
          console.log("onConnectionLost:"+responseObject.errorMessage);
          alert("Connection to MQTT Lost");
        }
      }

      function onMessageArrived(message) {

        // Trying to call the function from outside. it gets there and seems to update the values BUT doesnt seem to "fire" alpinejs events to update page or anything
        queryAjax().tester(message.destinationName, message.payloadString);


        //queryAjax().togglePin();                                                  // works one direction err or maybe the the first time.
        $("#mqtt_div").html(message.destinationName + " " + message.payloadString)  // works as expected

      }
  $(() => {
    console.log( "---");
  })
</script>
<%- include('foot'); %>

压缩机温度
冰箱环境温度
函数queryAjax（v）{
返回{
孤岛加载：false，
fridgeCompressorTemp:null，
ambientTemp:null，
fridgeFan：没错，
时间：新日期（），
计时器（）{
设置间隔（（）=>{
this.time=新日期（）；
此参数为.fetchPinValue（）；
}, 5000);
},
测试仪（目的地、味精）{
console.log（dest+“：”+msg）；
//log（this.testtext）；
//this.testtext=“msg”；
//log（this.testtext）；
//this.updateText（）；
//this.fridgeFan=0；
//this.isLoading=true；
},
fetchPinValue（）{
this.isLoading=true；
获取（`${bserver}/${token\u 1}/get/V5`）
.then（res=>res.json（））
。然后（数据=>{
this.isLoading=false；
this.fridgeCompressorTemp=数据；
console.log（“fridgeCompressorTemp=“+数据”）
});
获取（`${bserver}/${token\u 1}/get/V7`）
.then（res=>res.json（））
。然后（数据=>{
this.isLoading=false；
this.ambientTemp=数据；
console.log（“ambientTemp=“+数据”）
});
获取（`${bserver}/${token\u 1}/get/D13`）
.then（res=>res.json（））
。然后（数据=>{
this.isLoading=false；
console.log（“fridgeFan=“+数据”）
this.fridgeFan=数据；
});
},
togglePin（）{
/////////////此处硬编码了一些PIN和名称。仅适用于冰箱风扇
变量i=（this.fridgeFan='0'）？1:0；
fetch（`${bserver}/${token_1}/update/D13？value=${i}`）
。然后（数据=>{
this.fridgeFan=i
})
}
}
}
client=new Paho.MQTT.client（“192.168.10.66”，编号（1884），“node-admin-2”）；
//设置回调处理程序
client.onConnectionLost=onConnectionLost；
client.onMessageArrived=onMessageArrived；
//连接客户端
connect（{onSuccess:onConnect}）；
//当客户端连接时调用
函数onConnect（）{
//建立连接后，进行订阅并发送消息。
控制台日志（“onConnect”）；
客户。订阅（“传感器/传感器1”）；
}
//当客户端失去连接时调用
函数onConnectionLost（响应对象）{
if（responseObject.errorCode！==0）{
日志（“onConnectionLost:+responseObject.errorMessage”）；
警报（“与MQTT的连接丢失”）；
}
}
函数onMessageArrived（消息）{
//尝试从外部调用函数。它到达那里，似乎更新了值，但似乎没有“触发”alpinejs事件以更新页面或任何内容
queryAjax（）.tester（message.destinationName，message.payloadString）；
//queryAjax（）.togglePin（）；//在一个方向上出错，或者可能是第一次。
$（“#mqtt_div”）.html（message.destinationName+”“+message.payloadString）//按预期工作
}
$(() => {
console.log（“--”）；
})