在电子中使用 MQTT.js（节点包）更新 dom

Question

我是电子新手，node.js 正在研究 mqtt 以更新 DOM。我的 main.js onmessage 函数在 mqtt 上收到消息，我的 main.js 是

const { app, BrowserWindow } = require('electron')

var mqtt = require('mqtt')
var client = mqtt.connect("mqtt://localhost")

client.on("connect", function(){
client.subscribe("testtopic")
})

client.on("message", function(topic, message, packet){
document.getElementById("someId").innerHTML = message
})

function createWindow () {
  const win = new BrowserWindow({webPreferences:{nodeIntegration: true}})
  win.loadFile('index.html')
  win.maximize()

}
app.whenReady().then(() => {
  createWindow()
})

而且我想从 onmessage 回调中更新 index.html 中可用的元素。我无法访问它显示错误文档未定义。如何实现这个或者我可以直接在我的 index.html 脚本中导入 mqtt？在那种情况下为什么要使用节点 mqtt 而不是我可以使用 paho mqtt。求指点。

Answer 1

该代码运行在“后端”而不是在浏览器中，因此无法访问 DOM。

如果您想更新 DOM 以响应 MQTT 消息，您有两种选择。

在 index.html 文件中通过 WebSockets 实施 MQTT，该文件将直接在页面中订阅代理并将直接访问 DOM。您可以在页面中使用 MQTT.js 或 Paho 客户端，但您需要一个专门配置为支持基于 WebSockets 的 MQTT 的代理。
查看在后端代码和加载页面之间建立一些直接连接，以下问题可能有助于提供一些指示：

在电子中使用 MQTT.js（节点包）更新 dom

using MQTT.js (node package) in electron to update dom

javascript

node.js

mqtt

electron