Electron 接收 UDP 数据报

最新推荐文章于 2022-10-20 20:49:47 发布

原创最新推荐文章于 2022-10-20 20:49:47 发布 · 置顶 · 4.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#electron #udp #广播数据报

前端同时被 3 个专栏收录

25 篇文章

订阅专栏

electron

1 篇文章

订阅专栏

udp 广播数据报

1 篇文章

订阅专栏

本文介绍如何在Electron应用中使用主进程和渲染进程通信，实现自动接收并处理特定条件下的UDP广播数据报。通过安装electron模块，配置index.html和main.js，利用dgram接口监听UDP数据报，当数据报内容包含'xxx'时，将其信息传递给渲染进程进行后续处理。

Electron 接收 UDP 数据报

需求

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

实现

Electron 包含主进程和渲染进程

渲染进程中的页面点击读取广播 UDP 数据报按钮（入口）
监听入口按钮，当入口按钮被点击时向主进程发送 listener 事件，获取 UDP 数据报信息
主进程监听到 listener 事件，调用 node 的 dgram 接口，dgram 接口可以获取同一网关下的广播 UDP 数据报，比对 UDP 数据报的内容是否符合条件，若符合条件则将数据传送给渲染进程
渲染进程获取到数据，根据数据进行一系列的处理操作

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

安装 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
    })
})