如何在Vue 2/Electron中捕获嵌入式网页事件并实现应用通信

刚好我之前做过类似的Electron+Vue设备集成的项目，这两个问题其实都是围绕进程/跨应用通信来解决的，我给你拆解一下具体方案：

这里的核心是Electron主进程（处理设备逻辑的进程）和Vue渲染进程（嵌入式网页）之间的IPC（进程间通信），Electron原生提供了ipcMain（主进程）和ipcRenderer（渲染进程）来实现双向通信。

1. 把设备事件从主进程传给Vue页面 #

当你通过node-hid/node-serialport捕获到设备数据后，可以直接把数据发送给Vue渲染进程：

// main.js（Electron主进程）
const { app, BrowserWindow, ipcMain } = require('electron');
const HID = require('node-hid');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 推荐用preload脚本（更安全），这里先简化配置
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 加载你的Vue应用（本地开发地址或打包后的文件）
  mainWindow.loadURL('http://localhost:8080');

  // 监听设备数据，发送给渲染进程
  const device = new HID.HID(你的设备vendorId, productId);
  device.on('data', (rawData) => {
    // 把原始数据转成易处理的格式，比如字符串
    mainWindow.webContents.send('device-data-updated', rawData.toString());
  });
}

app.whenReady().then(createWindow);

然后在Vue组件里监听这个事件：

<template>
  <div class="device-panel">
    <h3>电子秤数据：{{ weightData }}</h3>
  </div>
</template>

<script>
const { ipcRenderer } = require('electron');

export default {
  data() {
    return {
      weightData: '等待数据...'
    };
  },
  mounted() {
    // 监听主进程发来的设备数据
    ipcRenderer.on('device-data-updated', (_, data) => {
      this.weightData = data;
      // 这里可以加数据解析、页面更新逻辑
    });
  },
  beforeDestroy() {
    // 记得移除监听，避免内存泄漏
    ipcRenderer.removeAllListeners('device-data-updated');
  }
};
</script>

2. 从Vue页面发命令给主进程控制设备 #

如果需要在Vue页面触发设备操作（比如主动获取重量），可以反向发送IPC事件：

<template>
  <button @click="fetchWeight">主动获取重量</button>
</template>

<script>
const { ipcRenderer } = require('electron');

export default {
  methods: {
    fetchWeight() {
      // 发送命令到主进程
      ipcRenderer.send('device-send-command', 'GET_CURRENT_WEIGHT');
    }
  }
};
</script>

主进程里监听并执行设备操作：

// main.js
ipcMain.on('device-send-command', (_, command) => {
  if (command === 'GET_CURRENT_WEIGHT') {
    // 向电子秤发送命令帧
    device.write(Buffer.from([0x01, 0x02, 0x03]));
  }
});

注意：如果追求更高的安全性，推荐用preload脚本暴露API，避免直接在Vue里引用Electron模块，防止上下文隔离问题，核心逻辑和上面一致，只是把Electron API封装后再暴露给Vue页面。

因为你的Vue应用是独立托管的（比如在本地HTTP服务器上），和Electron是两个独立的进程，无法直接用IPC，这里推荐两种常用的双向通信方案：

1. WebSocket双向通信（最推荐） #

WebSocket可以实现实时双向通信，适合设备数据这类需要实时推送的场景：

第一步：在Electron主进程启动WebSocket服务器 #

// main.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8081 });

wss.on('connection', (ws) => {
  console.log('Vue应用已连接到设备服务');

  // 设备数据推送给Vue应用
  device.on('data', (rawData) => {
    ws.send(JSON.stringify({
      type: 'device-data',
      payload: rawData.toString()
    }));
  });

  // 接收Vue应用的命令
  ws.on('message', (message) => {
    const msg = JSON.parse(message);
    if (msg.type === 'device-command') {
      device.write(Buffer.from(msg.payload));
    }
  });

  ws.on('close', () => {
    console.log('Vue应用已断开连接');
  });
});

第二步：Vue应用里连接WebSocket #

<template>
  <div>
    <div>扫码器数据：{{ scanData }}</div>
    <button @click="triggerScan">触发扫码</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scanData: '',
      ws: null
    };
  },
  mounted() {
    // 连接Electron的WebSocket服务器
    this.ws = new WebSocket('ws://localhost:8081');
    
    this.ws.onopen = () => {
      console.log('已连接到设备服务');
    };

    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'device-data') {
        this.scanData = data.payload;
      }
    };

    this.ws.onerror = (err) => {
      console.error('WebSocket连接失败:', err);
    };
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  },
  methods: {
    triggerScan() {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify({
          type: 'device-command',
          payload: [0x0A, 0x0B]
        }));
      }
    }
  }
};
</script>

2. HTTP + SSE（服务器推送事件） #

如果不需要频繁的双向通信，也可以用HTTP请求发送命令，用SSE实现设备数据的单向推送：

第一步：Electron主进程启动HTTP服务器 #

// main.js
const express = require('express');
const app = express();
const server = require('http').createServer(app);

app.use(express.json());

// 接收Vue的设备命令
app.post('/api/device/command', (req, res) => {
  const command = req.body.command;
  device.write(Buffer.from(command));
  res.status(200).json({ status: 'success' });
});

// SSE推送设备数据
app.get('/api/device/data', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 发送设备数据的回调
  const sendDeviceData = (rawData) => {
    res.write(`data: ${JSON.stringify({ payload: rawData.toString() })}\n\n`);
  };

  device.on('data', sendDeviceData);

  // 客户端断开连接时移除监听
  req.on('close', () => {
    device.off('data', sendDeviceData);
    res.end();
  });
});

server.listen(8081);

第二步：Vue应用里调用接口 #

<script>
import axios from 'axios';

export default {
  data() {
    return {
      weightData: '',
      eventSource: null
    };
  },
  mounted() {
    // 连接SSE获取实时数据
    this.eventSource = new EventSource('http://localhost:8081/api/device/data');
    this.eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.weightData = data.payload;
    };
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  },
  methods: {
    async getWeight() {
      try {
        await axios.post('http://localhost:8081/api/device/command', {
          command: [0x01, 0x02]
        });
      } catch (err) {
        console.error('发送命令失败:', err);
      }
    }
  }
};
</script>

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