在 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 数据。

相关推荐
wanhengidc1 小时前
云手机是由什么组成的?
运维·服务器·web安全·游戏·智能手机
an86950015 小时前
vue新建项目
前端·javascript·vue.js
wanhengidc5 小时前
网站服务器都有哪些作用?
运维·服务器·科技·智能手机·云计算
卓小帅的博客5 小时前
关于实现远程服务器使用本地网络的清晰简洁的教程
服务器·网络·vscode·连接超时
顾安r6 小时前
11.22 脚本打包APP 排错指南
linux·服务器·开发语言·前端·flask
czhc11400756636 小时前
c# 1121 构造方法
java·javascript·c#
小小编程能手6 小时前
Linux文件编程
linux·运维·服务器
木童6627 小时前
nginx安装步骤详解
linux·运维·服务器·网络·nginx
Coding_Doggy7 小时前
链盾shieldchain | 项目管理、DID操作、DID密钥更新消息定时提醒
java·服务器·前端
wa的一声哭了8 小时前
Webase部署Webase-Web在合约IDE页面一直转圈
linux·运维·服务器·前端·python·区块链·ssh