Electron 接收 UDP 数据报

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

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

 

### 实现 Electron 和 Vue 项目中的 UDP 数据传输 在 Electron 和 Vue 的项目中实现 UDP 数据传递,可以利用 Node.js 提供的 `dgram` 模块。该模块允许创建 UDP 客户端和服务器以进行数据通信。 以下是具体方法: #### 创建 UDP 服务端 可以通过以下代码片段设置一个简单的 UDP 服务端: ```javascript const dgram = require('dgram'); const server = dgram.createSocket('udp4'); server.on('error', (err) => { console.log(`Server error:\n${err.stack}`); server.close(); }); server.on('message', (msg, rinfo) => { console.log(`Server got: ${msg} from ${rinfo.address}:${rinfo.port}`); }); server.on('listening', () => { const address = server.address(); console.log(`Server listening on ${address.address}:${address.port}`); }); server.bind(41234); // 绑定到指定端口 ``` 此部分负责监听来自客户端的消息并打印出来[^5]。 #### 创建 UDP 客户端 为了向上述服务端发送消息,可以在项目的其他地方定义如下代码: ```javascript const dgram = require('dgram'); const message = Buffer.from('Some bytes to send via UDP'); const client = dgram.createSocket('udp4'); client.send(message, 41234, 'localhost', (err) => { // 发送至 localhost:41234 if (err) throw err; console.log('UDP message sent!'); client.close(); // 关闭连接 }); ``` 这段脚本实现了将一条消息通过 UDP 协议发送给本地的服务端实例[^6]。 #### 集成到 Electron-Vue 应用程序 由于 Electron 使用的是主进程(Main Process)与渲染器进程(Renderer Process),因此需要特别注意在哪里执行这些网络操作。通常建议把涉及文件系统访问或者网络请求的操作放在主进程中完成,而 UI 更新则留在渲染器进程中处理。 对于上面提到的例子来说,在主进程中初始化和服务端绑定逻辑;当接收到新数据包时触发事件通知前端更新界面状态即可满足需求[^7]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值