将 mqtt 订阅绑定到节点 ejs 和高山状态

Question

老 Rails 和 php 刚接触 js 的程序员，正在尝试一些东西，感觉我缺少一些非常基本的东西。我有一个节点服务器运行一个小型 webapp、express、ejs、jquery 以及 alpinejs。（对 jquery 非常熟练，但正在学习 alpinejs）。我有一个 mqtt 服务器运行，可以通过我的 phone 操作几个主题，我什至可以在节点控制台中看到它们（下面的代码）

我不明白的是如何获取或“绑定”对我可以“传递”到 express 应用程序中的变量的订阅，这样我就可以在 html 中显示 mqtt 消息.我目前只是想设置 fridgeFan = true 之类的东西。我认为，我的想法是让 mqtt 更新 alpinejs 变量，从而更新页面，然后反之亦然...

有人可以指出我正在尝试的总体良好方向吗？

options={
  clientId:"node-admin",
  clean:true,
};

const express = require('express');
const app = express();
const mqtt = require('mqtt')
const client = mqtt.connect('mqtt://192.168.10.66', options)

client.on("connect",function(){
  console.log("connected");
});

client.on('message',function(topic, message, packet){
  console.log("message is "+ message);
  console.log("topic is "+ topic);
  // assume id like to bind topic and message to
  // some variable that I can pass or have access to
  // in the res.render calls below??

  // couple of things I was trying
  //document.getElementById('mqtt_div').innerHTML += topic;
  //document.querySelector('[x-data]').__x.getUnobservedData().fridgeFan = message;
});

client.subscribe("sensors/sensor1",{qos:1});


app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.render('index', {
    title: 'Homepage'
  });
});

通过上面的代码，我可以通过一个phone应用程序发布到“sensors/sensor1”，我可以在节点控制台看到它，当然不是浏览器控制台。

如何将“消息”绑定到 alpinejs 变量以便它更新？

或者我是否转向不同的方向并将 client.on 调用放在其他地方，比如 ejs 文件？在我的测试中，ejs 文件不知道 require mqtt

Answer 1

您不能将消息处理程序移动到 EJS 文件中，因为它们仅在您调用 render()

时“执行”

您可以在 ExpressJS 应用程序中声明一个全局变量，并从 on('message',...) 回调中更新其中的字段，然后将此变量传递给对 render() 的调用，但这意味着页面只会显示页面加载时的值。

如果您希望在发布消息时在页面中进行实时更新，那么您有一个真正的选择。那就是使用支持 MQTT over Websockets 的代理（几乎所有现代代理都支持这一点）。有了它，您可以将 MQTT 客户端（Paho JavaScript client or you can use the MQTT.js 客户端）加载到页面中，并直接从页面订阅您感兴趣的主题。通过这种方式，新消息将直接传送到页面，然后您可以使用您想要更新页面的任何 JavaScript 框架。

将 mqtt 订阅绑定到节点 ejs 和高山状态

binding mqtt subscribtions to node ejs, and alpine states

express

mqtt