BongoCat_Mac(一)_Electron如何监听鼠标键盘事件——ioHook

运行环境

macOS High Sierra系统 10.13.6 node v14.2.0 electron v8.0.0

项目

http://gitee.com/xuanyusan/bongocat_for_mac

关于BongoCat

Bongo Cat是一款用于装饰直播/视频/桌面的工具，它能根据鼠标、键盘、手柄操作做出相应的动作，具有高度的可定制性。它是由一个越南的高中生开发的，github项目地址是这个链接。后来在B友的改动下有了更丰富的功能。其中晓辰XChen做的改动是我最喜欢，具体的效果大家可以看一下这个视频。

这个项目有Windows版和Unix版，但是没有macOS版，B友的改动也多是Windows。

我本来是想看看能不能直接把原项目的Unix版本在macOS上编出来，但是失败了。

libxdo

这一块就编译不过去，

x11

等模块编过了但是链接的时候会找不到库，怎么解决我暂时没有什么好的方法。

于是我放弃了原先的想法，打算自己使用

Electron

Vue3

来实现一下，这么做的主要灵感来源是 Electron-elf和 bongo.cat两个项目。

项目计划

在确定了计划的可行性后，我对项目做了简单的规划。这个项目我打算分三步做：

第一步实现macOS监听鼠标按键并传输信息到Electron窗口；第二步实现自制贴图和动画，让鼠标按键信息可以控制动画播放；第三步实现live2d,使得角色神态动作更自然丰富。

macOS鼠标键盘监听实现方案

❌ 注册快捷键

能不能用注册快捷键来进行键盘监听是我一开始考虑的方法，但是注册快捷键的话存在劫持的问题。也就是会影响我们正常使用的输入、复制和粘贴等行为。

menu

的

accelerator

和

globalShortcut

注册的快捷键都一样。所以这明显是不行的。

❌ HTML自身的一些监听

HTML自身的一些监听也是不能实现全局的鼠标键盘监听的，他们往往只能处理窗口内的鼠标键盘事件，我们又不可能把应用直接覆盖整个窗口。

ioHook

后来我转而考虑

ioHook

这个模块，

ioHook

是

Node.js

进行全局鼠标键盘监听的模块。

但是我实际测试的时候发现

ioHook

对版本的要求十分严格，在

Node v14.2.0

ioHook 0.9.3

NODE_MODULE_VERSION 83

的情况下

ioHook

的键盘监听是不成功的。只有

command

和

shift

是可以触发监听的。鼠标效果还可以。

好在本项目是用

Electron

开发，

Electron 8.0.0

ioHook 0.9.3

NODE_MODULE_VERSION 76

是可以触发监听的。接下来介绍一下ioHook的安装和使用。

ioHook

的安装和大多数

node

模块一样，

ioHook

可以通过

npm

安装。

npm i ioHook -S # 由于Electron在打包的时候只拷贝dependencies的模块，所以这里要加一下-S参数

ioHook

的重编译

ioHook

安装的时候，会根据本地

Node

的版本进行编译，也就是在

node_modules/iohook/builds

目录下会生成类似

node-v83-darwin-x64

的编译文件。如果没有，大概是网不好，编译所需文件没有下下来，因为我们本来就要重编译，这一次下不下来就无所谓了。

我们需要的是

electron-v76-darwin-x64

这样的编译文件，也就是我们要的是

Electron

运行环境下的编译产物，

NODE_MODULE_VERSION

也要和

Electron

的版本匹配。

而要获得符合要求的编译文件，首先得先找到当前

Electron

对应的

NODE_MODULE_VERSION

。

方法1.

node-abi

npm i node-abi -g
node -e "const nodeABI = require('node-abi');console.log(nodeABI.getAbi('`electron --version`','electron'))"

这样就可以获得符合

Electron

版本对应的

NODE_MODULE_VERSION

，比如我的

Electron

是v8.0.0，

NODE_MODULE_VERSION

就是76。方法2. 查询

ioHook

提供的支持信息另外，不想在本地安装

node-abi

的可以直接查

ioHook

的配置文件(

node_modules/iohook/package.json

)支持的对应关系，我这里贴出一部分。因为上文也提到

ioHook

对版本支持很严格，所以看它文档里写的支持其实是更稳妥的选择。

"supportedTargets": [
// ...electron
[
"electron",
"11.0.0",
"85"
],
[
"electron",
"12.0.0",
"87"
],
// ...node
[
"node",
"14.0.0",
"83"
],
[
"node",
"15.0.0",
"88"
]
]

拿到

NODE_MODULE_VERSION

就可以在主项目的

package.json

加入这个配置。这里是加在第一个层级，和scripts并列的地方。

"iohook": {
"targets": [
"electron-76" /* 这里76是指我本地的NODE_MODULE_VERSION */
]
}

然后

npm rebuild

就可以了，成功的话会在

node_modules/iohook/builds

下会生成

electron

开头的编译文件。没有就是网不好，好好检查一下网络问题以及自己的网络是否能访问

github

。一直不行的话，可以考虑改一下

ioHook

模块下的安装文件(

node_modules/iohook/install.js

)

<<<<<<< 源文件32行开始的内容
console.log('Downloading prebuild for platform:', currentPlatform);
let downloadUrl =
'https://github.com/wilix-team/iohook/releases/download/v' +
pkgVersion +
'/' +
currentPlatform +
'.tar.gz';
============
console.log('Downloading prebuild for platform:', currentPlatform);
let downloadUrl =
'https://hub.fastgit.org/wilix-team/iohook/releases/download/v' +
pkgVersion +
'/' +
currentPlatform +
'.tar.gz';
>>>>>>>> 我的修改

重编译之后就可以在electron的运行环境里实验效果了。

macOS鼠标键盘监听实现效果

想要直接看效果的话可以下载我的项目，只支持Mac。Windows直接下Bongo cat mver就好了，也不用折腾，B站也有很多教程。

温馨提示：我还没有做任何优化，特别是mousemove等高频事件没有做节流和防抖，所以试一下就好，不要长期运行。

git clone http://gitee.com/xuanyusan/bongocat_for_mac.git
cd bongocat_for_mac
npm install
# 因为我已经在package.json配置好了，所以顺利的话不用rebuild，不顺利的话就参照教程改install.js文件吧
# 如果安装失败，记得rebuild一下
npm start