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兩個項目。

項目計划

在確定了計划的可行性后，我對項目做了簡單的規划。這個項目我打算分三步做：

1. 第一步實現macOS監聽鼠標按鍵並傳輸信息到Electron窗口；
2. 第二步實現自制貼圖和動畫，讓鼠標按鍵信息可以控制動畫播放；
3. 第三步實現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的安裝和使用。

1. ioHook的安裝
   和大多數node模塊一樣，ioHook可以通過npm安裝。

   npm i ioHook -S # 由於Electron在打包的時候只拷貝dependencies的模塊，所以這里要加一下-S參數
   

2. 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

附錄——ioHook與macOS pro 2017鍵盤對照表

考慮到ioHook監聽獲取的keycode和rawcode和js的keyCode差別較大，而且網上也沒有其他的對照表，這里給出一份ioHook與macOS pro 2017的鍵盤對照表，其他操作系統是否可以使用需要自己測試一下。