Electron 학습기록

카드 이벤트를 잡기위한 기록

일반적으로 카드리더기를 잡으려면 USB를 통해 연결을 잡은 이후, 카드리더기인 경우 해당 카드정보를 Electron에서 React로 이벤트를 쏴주는 형태로 가야함.

 

여기서 문제는 다음과 같음.

1. Electron은 기본적으로 Node.js기반 Main Processor에서 실행이 된다.
   1. 해당 영역을 ipcMain이라고 칭하며, 해당 영역은 Node.js로 구동이 되고, Electron이 실행하는 main.js 또는 electron.js등등 실행에 필요한 소스코드 영역임.
   2. React Web(크로미움) 영역 에서는 Node.js를 통한 특정 라이브러리를 실행할 수가 없음.
2. 현재 내가 카드리더기를 읽기 위해 사용되는 모듈은 아래의 링크와 같음.(약간 변형은함)
   1. https://github.com/tomkp/smartcard
   2. https://github.com/tomkp/card-reader
   3. https://github.com/tomkp/hexify
3. 위의 라이브러리들에서 PCSC관련 라이브러리는 Node.js를 통해 C++ 레벨의 코드를 실행한다.

문제의 해결방안은 다음과 같음.

• 렌더링 영역은 React에서 실행한다.
• Node.js가 필요한 영역은 main영역으로 와서 실행한다.
• 이를 위해서는 채널을 열어야 하며 다음의 방법을 활용한다
  • React
    •  

const {ipcRenderer} = window.require("electron");

// 보내고 받기.
export default function () {
	const handleChannel = (event, args) => {
    	console.log('test');
    }
    useEffect(()=> {
        console.log('[ipcRenderer Effect] Renderer Effect')
        ipcRenderer.send('channel', 'hihi') // Data는 Optional , Json을 줘도 된다.
        ipcRenderer.on('channel', handleChannel);
    }, [ipcRenderer])
    
    return <>
        Test
    </>
}

 

Main.js

const ipcMain = require('electron').ipcMain;

// 둘중 편한방법을 사용하면됨.
ipcMain.on("channel", (event, data) => {
  event.sender.send("channel", "From Main Process");
});

ipcMain.on("channel", (event, data) => {
  event.reply("channel", data);
});

 

 

차라리 라이브러리를..  nfc-pcsc 나 node-pcsclite 를 쓰는게 나아보이긴하는데... ㅠㅠ

 

글은 나중에 정리하는걸로..