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

原创于 2025-10-31 09:45:56 发布 · 516 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#electron #服务器 #javascript

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

一、环境准备

创建 Electron 项目（若已有项目可跳过）：

mkdir electron-opcua-demo
cd electron-opcua-demo
npm init -y
npm install electron --save-dev

安装 OPC UA 客户端库：使用 node-opcua（成熟的 OPC UA 客户端 / 服务器实现）：
```
npm install node-opcua-client --save
```

二、核心实现思路

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

三、示例代码

1. 主进程（`main.js`）

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

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 通信桥接：

const { contextBridge, ipcRenderer } = require('electron');

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

3. 渲染进程（`index.html`）

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

<!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>

四、关键配置说明

OPC UA 服务器地址：endpointUrl 需替换为你的 PLC 或 OPC UA 网关的实际地址（格式：opc.tcp://ip:端口）。
节点 ID（NodeId）：nodeId 是 PLC 中变量的唯一标识（如 ns=2;s=Temperature），需通过 PLC 配置工具或 OPC UA 客户端（如 UaExpert）查询确认。

安全配置：若 PLC 服务器启用了安全验证（如用户名密码、证书），需在 OPCUAClient.create 中配置 securityMode、securityPolicy 及认证信息：

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

五、调试与测试

确认 PLC 服务器可达：使用 OPC UA 客户端工具（如 UaExpert）先测试连接，确保能正常读取节点值。
运行 Electron 应用：在 package.json 中添加启动脚本：
```
"scripts": {
  "start": "electron ."
}
```
执行 npm start 启动应用，查看控制台输出和页面数据显示。