[javascript] javascript barcode reader [핸드 스캐너] 읽기

 

기본적으로 핸드 스캐너는 입력 장치 이기 때문에 

입력 장치로 들어오는 이벤트 listener로 들어온다. (keyup, keydown...)

 

javascript 에서는 document.addEventListener를 통해서 핸드 스캐너 값을 읽을 수 있으나 

다른 이벤트 들과 같이 일반 키보드 이벤트와 동일하게 작동돼 

공통 함수에 조건을 주어 맞추어야 한다. 

 

핸드 스캐너 값은 30 millisecond 안에 다 들어온다는 점을 이용하여 

들어온 이벤트들을 모아서 한꺼번에 처리 하는 로직을 구현하였다. 

 

// keyup, keydown 상관 없다
document.addEventListener('keyup', keyboardEvent)

// scan 값을 저장할 변수 선언
// window.scan = []
var scan = []
var keyCode = {
    "enter": 13,
    "backspace": 8,
    "delete": 46,
    "esc": 27
}

function keyboardEvent(e) {
    let data = JSON.parse(JSON.stringify(e, ['key', 'timeStamp']))
    data.timeStampDiff = this.scan.length > 0 ? data.timeStamp - this.scan.slice(-1)[0].timeStamp : 0
    
    scan.push(e)

    setTimeout(() => {
    
    	// scan 처리가 끝난 후 이후에 들어오는 이벤트는 실행하지 않는다.
        if (scan.length === 0) return

        let lastEvent = this.scan.slice(-1)[0]

		// 핸드 스캐너의 경우 입력된 값이 들어온 다음 마지막에 Enter Event를 보낸다.
        if (scan.length > 1 && e.timeStamp - lastEvent.timeStamp < 30 && lastEvent.keyCode === keyCode.enter) {
            
            // 마지막 Enter 이벤트 삭제
            scan.splice(-1)
            
            // 입력된 바코드 추출
            let barcode = this.scan.reduce(function (scannedString, entry) {
                return scannedString + entry.key
            }, "")
            
            // todo: 바코드 처리
        }
        else {

            // 들어온 이벤트를 묶어서 하나의 이벤트 처럼 처리해 준다.
            // 예를 들어 "00" 값이나 "000" 키보드 값은 하나씩 차례차례 들어온다.
            // 키보드에서 들어온 이벤트는 setter가 없어 object속성 자체를 바꿀 수 없다. 
            let $event = this.scan.reduce((prev, curr) => {
                prev.key += curr.key
                return prev
            }, {
                key: '',
                keyCode: e.keyCode
            })
            
            // todo: 이벤트 처리 
        }

        // 저장된 scan 값 초기화
        scan = []
    }, 30)
}

 

끝.