在 electron 中使用 MQTT.js（节点包）更新 dom答案

【问题标题】：using MQTT.js (node package) in electron to update dom在 electron 中使用 MQTT.js（节点包）更新 dom
【发布时间】：2021-12-06 05:09:41
【问题描述】：

我是 electron 和 node.js 的新手，在 mqtt 上工作以更新 DOM。我在 mqtt 上收到消息到我的 main.js onmessage 函数，而我的 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。请对此提出建议。

【问题讨论】：

标签： javascript node.js electron mqtt

【解决方案1】：

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

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

在 index.html 文件中通过 WebSockets 实现 MQTT，该文件将直接在页面中订阅代理并可以直接访问 DOM。您可以在页面中使用 MQTT.js 或 Paho 客户端，但您需要专门配置为支持 MQTT over WebSockets 的代理。
看看在后端代码和加载的页面之间建立一些直接的连接，下面的问题可能对一些指针有帮助：How to access DOM elements in electron?

【讨论】：