如何在HTML页面中访问jsmodbus函数获取的变量？

问题背景 #

使用jsmodbus模块连接设备获取实时数据，已在scripts.js中声明全局变量global_values_list，JS内部控制台能正常打印single_value，但HTML页面访问该变量时显示undefined，已尝试用setTimeout延迟访问。相关代码片段：

socket.on('connect', function () {
  // make some calls
  client.readInputRegisters(509, 6).then(function (resp) {
    console.log(resp);
    values_list = resp.response.body._values;
    global_values_list.single_value = values_list[0];
  }, console.error);
});
  
socket.connect(options)

const jsmodbus = require('jsmodbus');

可能的原因及解决方法 #

1. 全局变量初始化不完整 #

如果只声明了global_values_list但未初始化对象结构，会导致属性赋值时出现隐式问题，HTML无法识别未初始化的对象属性。

• 修正方式：在JS文件开头明确初始化全局变量：

// 全局变量声明并初始化，确保HTML可访问
window.global_values_list = { single_value: null };

2. 固定延迟无法适配异步数据返回 #

Modbus数据获取是异步操作，setTimeout的固定延迟可能短于数据返回时间，此时HTML访问时变量还未被赋值。

• 替代方案：放弃固定延迟，改用自定义事件监听，数据更新时主动通知HTML：
  • 在JS中添加事件触发逻辑：

  client.readInputRegisters(509, 6).then(function (resp) {
    console.log(resp);
    values_list = resp.response.body._values;
    global_values_list.single_value = values_list[0];
    // 触发自定义事件，携带更新后的数据
    window.dispatchEvent(new CustomEvent('modbusDataUpdated', { 
      detail: global_values_list 
    }));
  }, console.error);
  

  • 在HTML对应的脚本中监听事件并更新页面：

  window.addEventListener('modbusDataUpdated', function(e) {
    // 替换成你的HTML元素ID，更新显示内容
    document.getElementById('data-display').textContent = e.detail.single_value;
  });
  

3. 变量作用域未真正全局化 #

如果是模块化环境（比如使用ES6模块），单纯用var/let声明的变量无法被HTML直接访问，必须挂载到window对象上。

• 修正方式：强制将变量挂载到window：

// 确保变量全局可访问，兼容模块化环境
window.global_values_list = window.global_values_list || {};

4. 仅单次读取无法持续更新数据 #

如果需要实时展示数据，要确保Modbus读取操作周期性执行，而非仅在连接时读取一次：

socket.on('connect', function () {
  // 每2秒读取一次数据，可根据需求调整间隔
  setInterval(() => {
    client.readInputRegisters(509, 6).then(function (resp) {
      values_list = resp.response.body._values;
      global_values_list.single_value = values_list[0];
      // 每次更新都触发事件通知HTML
      window.dispatchEvent(new CustomEvent('modbusDataUpdated', { 
        detail: global_values_list 
      }));
    }, console.error);
  }, 2000);
});

验证步骤 #

1. 在JS赋值single_value后，立即打印window.global_values_list.single_value，确认值已正确挂载到全局。
2. 在HTML的事件监听回调中打印e.detail.single_value，确认数据能被正确接收。
3. 检查浏览器控制台是否有Modbus请求失败的报错，排除数据获取本身的问题。

内容的提问来源于stack exchange，提问作者gooner_10