在 Electron 框架中连接 OPC UA 服务器并读取 PLC 数据

在 Electron 框架中连接 OPC UA 服务器并读取 PLC 数据,通常可以借助 Node.js 的 OPC UA 客户端库(如 node-opcua)实现。以下是具体实现步骤和示例代码:

一、环境准备

  1. 创建 Electron 项目(若已有项目可跳过):

    bash 复制代码
    mkdir electron-opcua-demo
    cd electron-opcua-demo
    npm init -y
    npm install electron --save-dev
  2. 安装 OPC UA 客户端库 :使用 node-opcua(成熟的 OPC UA 客户端 / 服务器实现):

    bash 复制代码
    npm install node-opcua-client --save

二、核心实现思路

Electron 分为主进程渲染进程 ,建议在主进程中处理 OPC UA 连接(因为涉及底层网络操作),通过 IPC 通信将数据传递给渲染进程显示。

三、示例代码

1. 主进程(main.js

负责连接 OPC UA 服务器、读取 PLC 数据,并通过 IPC 发送给渲染进程:

javascript 复制代码
const { app, BrowserWindow, ipcMain } = require('electron');
const { OPCUAClient, AttributeIds } = require('node-opcua-client');
const path = require('path');

// OPC UA 服务器配置(替换为你的 PLC OPC UA 服务器信息)
const OPCUA_CONFIG = {
  endpointUrl: 'opc.tcp://192.168.1.100:4840', // PLC 的 OPC UA 地址
  nodeId: 'ns=2;s=PLC_Tag1' // 要读取的 PLC 变量节点 ID(需根据实际 PLC 配置修改)
};

let mainWindow;
let opcuaClient;

// 创建窗口
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 用于 IPC 通信
      contextIsolated: true // 启用上下文隔离(安全最佳实践)
    }
  });
  mainWindow.loadFile('index.html');
}

// 连接 OPC UA 服务器并读取数据
async function connectAndReadOPCUA() {
  opcuaClient = OPCUAClient.create({
    applicationName: "Electron OPCUA Client",
    securityMode: "None", // 若服务器启用安全验证,需配置对应模式
    securityPolicy: "None"
  });

  try {
    // 连接服务器
    await opcuaClient.connect(OPCUA_CONFIG.endpointUrl);
    console.log('已连接到 OPC UA 服务器');

    // 创建会话
    const session = await opcuaClient.createSession();
    console.log('会话创建成功');

    // 循环读取数据(实际场景可根据需求调整频率)
    setInterval(async () => {
      try {
        // 读取节点值(AttributeIds.Value 表示读取变量值)
        const dataValue = await session.read({
          nodeId: OPCUA_CONFIG.nodeId,
          attributeId: AttributeIds.Value
        });

        const value = dataValue.value.value; // 提取实际值
        console.log(`读取到 PLC 数据: ${value}`);

        // 通过 IPC 发送数据到渲染进程
        mainWindow.webContents.send('plc-data', value);
      } catch (err) {
        console.error('读取数据失败:', err);
      }
    }, 1000); // 每秒读取一次

  } catch (err) {
    console.error('OPC UA 连接失败:', err);
  }
}

// 关闭连接
function disconnectOPCUA() {
  if (opcuaClient) {
    opcuaClient.disconnect().then(() => {
      console.log('已断开 OPC UA 连接');
    });
  }
}

// 应用生命周期
app.whenReady().then(() => {
  createWindow();
  connectAndReadOPCUA(); // 启动时连接 OPC UA

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    disconnectOPCUA(); // 关闭窗口时断开连接
    app.quit();
  }
});
2. 预加载脚本(preload.js

用于渲染进程与主进程的 IPC 通信桥接:

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron');

// 暴露安全的 IPC 接口给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
  onPLCData: (callback) => ipcRenderer.on('plc-data', (event, value) => callback(value))
});
3. 渲染进程(index.html

显示从主进程接收的 PLC 数据:

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron OPC UA PLC 读取示例</title>
</head>
<body>
  <h1>PLC 数据监控</h1>
  <p>当前值: <span id="plcValue">-</span></p>

  <script>
    // 监听主进程发送的 PLC 数据
    window.electronAPI.onPLCData((value) => {
      document.getElementById('plcValue').textContent = value;
    });
  </script>
</body>
</html>

四、关键配置说明

  1. OPC UA 服务器地址endpointUrl 需替换为你的 PLC 或 OPC UA 网关的实际地址(格式:opc.tcp://ip:端口)。

  2. 节点 ID(NodeId)nodeId 是 PLC 中变量的唯一标识(如 ns=2;s=Temperature),需通过 PLC 配置工具或 OPC UA 客户端(如 UaExpert)查询确认。

  3. 安全配置 :若 PLC 服务器启用了安全验证(如用户名密码、证书),需在 OPCUAClient.create 中配置 securityModesecurityPolicy 及认证信息:

    javascript 复制代码
    OPCUAClient.create({
      securityMode: "SignAndEncrypt",
      securityPolicy: "Basic256Sha256",
      userName: "your-username",
      password: "your-password"
    });

五、调试与测试

  1. 确认 PLC 服务器可达 :使用 OPC UA 客户端工具(如 UaExpert)先测试连接,确保能正常读取节点值。

  2. 运行 Electron 应用 :在 package.json 中添加启动脚本:

    json 复制代码
    "scripts": {
      "start": "electron ."
    }

    执行 npm start 启动应用,查看控制台输出和页面数据显示。

六、常见问题

  • 连接超时:检查 PLC 网络是否可达、端口是否开放、防火墙设置。
  • 节点不存在 :确认 nodeId 格式正确(命名空间索引 ns 和标识符 s 需匹配)。
  • 权限问题:若服务器要求认证,需配置正确的用户名密码或证书。

通过以上步骤,即可在 Electron 中实现 OPC UA 连接并读取 PLC 数据。

相关推荐
大梦谁先觉i7 小时前
Linux 磁盘空间“消失”之谜:文件已删,空间却不释放?
linux·运维·服务器
序属秋秋秋7 小时前
《Linux系统编程之开发工具》【编译器 + 自动化构建器】
linux·运维·服务器·c语言·c++·自动化·编译器
前端小咸鱼一条7 小时前
19. React的高阶组件
前端·javascript·react.js
狮子座的男孩7 小时前
js基础:10、函数对象方法(call/apply)、arguments类数组对象、Date对象、Math工具类、包装类、字符串方法、正则表达式
前端·javascript·正则表达式·包装类·字符串方法·arguments·date对象
jackzhuoa8 小时前
Rust 异步核心机制剖析:从 Poll 到状态机的底层演化
服务器·前端·算法
qq_338032928 小时前
VUE的生命周期钩子,vue2和vue3的生命周期钩子的核心差异
前端·javascript·vue.js
艾莉丝努力练剑8 小时前
【Linux基础开发工具 (一)】详解Linux软件生态与包管理器:从yum / apt原理到镜像源实战
linux·运维·服务器·ubuntu·centos·1024程序员节
月巴月巴白勺合鸟月半8 小时前
生成私钥公钥
运维·服务器
七七七七078 小时前
【计算机网络】深入理解网络层:IP地址划分、CIDR与路由机制详解
linux·服务器·计算机网络·智能路由器