在 Electron 框架中连接 OPC UA 服务器并读取 PLC 数据,通常可以借助 Node.js 的 OPC UA 客户端库(如 node-opcua)实现。以下是具体实现步骤和示例代码:
一、环境准备
-
创建 Electron 项目(若已有项目可跳过):
bashmkdir electron-opcua-demo cd electron-opcua-demo npm init -y npm install electron --save-dev -
安装 OPC UA 客户端库 :使用
node-opcua(成熟的 OPC UA 客户端 / 服务器实现):bashnpm 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>
四、关键配置说明
-
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及认证信息:javascriptOPCUAClient.create({ securityMode: "SignAndEncrypt", securityPolicy: "Basic256Sha256", userName: "your-username", password: "your-password" });
五、调试与测试
-
确认 PLC 服务器可达 :使用 OPC UA 客户端工具(如 UaExpert)先测试连接,确保能正常读取节点值。
-
运行 Electron 应用 :在
package.json中添加启动脚本:json"scripts": { "start": "electron ." }执行
npm start启动应用,查看控制台输出和页面数据显示。
六、常见问题
- 连接超时:检查 PLC 网络是否可达、端口是否开放、防火墙设置。
- 节点不存在 :确认
nodeId格式正确(命名空间索引ns和标识符s需匹配)。 - 权限问题:若服务器要求认证,需配置正确的用户名密码或证书。
通过以上步骤,即可在 Electron 中实现 OPC UA 连接并读取 PLC 数据。