Electron 接收 UDP 数据报

需求

Electron 可以自动接收服务器发送的广播 UDP 数据报，当数据报的内容中有 'xxx' 字符串时，读取该条数据报的数据内容并传递给渲染进程

实现

Electron 包含主进程和渲染进程

1. 渲染进程中的页面点击读取广播 UDP 数据报按钮（入口）

2. 监听入口按钮，当入口按钮被点击时向主进程发送 listener 事件，获取 UDP 数据报信息

3. 主进程监听到 listener 事件，调用 node 的 dgram 接口，dgram 接口可以获取同一网关下的广播 UDP 数据报，比对 UDP 数据报的内容是否符合条件，若符合条件则将数据传送给渲染进程

4. 渲染进程获取到数据，根据数据进行一系列的处理操作

如果使主进程与渲染进程通信？

安装 electron

npm install electron --save

index.html 加入以下代码

<script>
    window.electron = require('electron')
</script>

electron 的入口程序 main.js 中添加如下配置项

mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true // add 集成 Nodejs
    }
})

在 vue 组件中通过 ipcRenderer 与主进程通信

• ipcRenderer.send('receiving-broadcast') 发送异步消息

• ipcRenderer.on('broadcast-reply') 接收主进程传递过来的消息

const ipcRenderer = window.electron.ipcRenderer
ipcRenderer.send('receiving-broadcast')
ipcRenderer.on('broadcast-reply', (event, arg) => {
    console.log(arg)
})

在 main.js 主进程中通过 ipcMain 与渲染进程通信

• ipcMain.on('receiving-broadcast', (event, arg) => {}） 监听渲染进程发送过来的事件

• event.sender.send('broadcast-reply', JSON.stringify(rinfo)) 回应渲染进程的异步消息

const dgram = require('dgram')
const {
  ipcMain
} = require('electron')
​
ipcMain.on('receiving-broadcast', (event, arg) => {
    // 调用 nodejs 的 dgram 接口接收 udp 数据报
    // 套接字族为 'udp4'
    const socket = dgram.createSocket('udp4');
    
    // 接收 UDP 数据报消息
    socket.on('message', (msg, rinfo) => {
        // 当数据报中数据包含 'bolean' 字符串时，将数据报的来源数据发送给渲染进程
        if (~msg.indexOf('xxx')) {
            event.sender.send('broadcast-reply', JSON.stringify(rinfo))
            // 关闭 udp 监听
            socket.close()
        }
    });
    
    // 绑定需要监听的端口
    socket.bind({
        address: '0.0.0.0',
        port: 9999
    })
})