Electron: 渲染进程开启子线程 Worker

该博客介绍了如何在Vue应用中,特别是在Electron环境中,利用Node.js的`child_process`模块执行异步任务,例如定期获取网卡信息。通过创建一个renderer.js文件并设置定时器,每隔2秒执行一次`netsh`命令来获取网络接口详细信息。获取到的数据随后在Vue组件中展示。这个示例展示了前端与后端能力的结合在特定场景下的应用。
摘要由CSDN通过智能技术生成

在Vue中需要使用例外的线程去执行轮询的任务,这里以获取网卡信息为例。

注:这里是在Electron中使用的,可以使用Node.js实例 “child_process”,如果是纯Vue工程无法使用Node实例。 

1.创建一个renderer.js文件,放在public静态文件夹下。

这里以获取网卡信息为例:

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.

var cluster = require('child_process')

setInterval(() => {
	cluster.exec("cmd /c chcp 65001>nul && netsh wlan show interface",  (err, res) => {
	    var node_nics = require("os").networkInterfaces();
		var lines = res.split('\r\n');
	    var fields = [
	        'name',
	        'model',
	        'vendor',
	        'mac_address',
	        'status',
	        'ssid',
	        'bssid',
	        'mode',
	        'radio',
	        'authentication',
	        'encryption',
	        'connection',
	        'channel',
	        'reception',
	        'transmission',
	        'signal',
	        'profil'
	    ];
	    var connections = [];
	    var tmp = {}
	    var len = 0;
	    for (var i = 3; i < lines.length; i++) {
	        if (lines[i] != "" && lines[i] != null && lines[i].indexOf(":") != -1) {
	            tmp[fields[len]] = lines[i].split(':')[1].trim()
	            len += 1;
	        } else {
	            if (tmp['name'] != null && tmp['model'] != null && tmp['vendor'] != null && tmp['mac_address'] != null && tmp['status'] != null) {
	                var node_nic = node_nics[tmp.name] || [];
	                node_nic.forEach(function (type) {
	                    if (type.family == 'IPv4') {
	                        tmp.ip_address = type.address;
	                        tmp.ip_gateway = "http://"+type.address.split('.')[0] + "." + type.address.split('.')[1] + "." + type.address.split('.')[2] + ".1"
	                    }
	                });
	                connections.push(tmp);
	                tmp = {}
	                len = 0;
	            }
	        }
	    }
		console.log(connections)
		self.postMessage(connections);
	})
}, 2000)

2.home.vue

var worker = new Worker("/renderer.js");
export default { 
		name: "home",
		data() {
			return {
                lists: ""
            }
        },
        created(){
            var that = this;
            worker.onmessage = function(event) {
                this.lists = event.data;
            }
        },
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值