📡 브라우저에서 하드웨어를 직접 제어하는 Web Bluetooth와 Web HID API 완벽 가이드

// 실무에서 활용하는 블루투스 장치 연결 및 필터링 유틸리티 함수
async function connectBluetoothDevice() {
  try {
    console.log('블루투스 장치 검색 요청 중...');
    
    // 명시적인 필터 조건 설정 (서비스 UUID 또는 이름 기반)
    const options = {
      filters: [
        { services: ['heart_rate'] },
        { namePrefix: 'SmartSensor' }
      ],
      optionalServices: ['battery_service'] // 추가로 접근할 서비스 지정
    };

    const device = await navigator.bluetooth.requestDevice(options);
    
    // 장치 연결 끊김 이벤트 리스너 사전 등록
    device.addEventListener('gattserverdisconnected', onDisconnected);

    console.log(`선택된 장치: ${device.name} (ID: ${device.id})`);
    
    const server = await device.gatt.connect();
    console.log('GATT 서버 연결 성공:', server);
    
    return server;
  } catch (error) {
    console.error('블루투스 연결 실패 또는 사용자가 취소함:', error);
    throw error;
  }
}

function onDisconnected(event) {
  const device = event.target;
  console.warn(`장치와의 연결이 끊어졌습니다: ${device.name}`);
  // 재연결 로직 또는 UI 상태 업데이트 트리거
}

async function initializeHeartRateMonitor(server) {
  try {
    // 1. 심박수 서비스 획득
    const service = await server.getPrimaryService('heart_rate');
    
    // 2. 심박수 측정 특성 획득
    const characteristic = await service.getCharacteristic('heart_rate_measurement');
    
    // 3. 알림(Notification) 활성화
    await characteristic.startNotifications();
    
    // 4. 데이터 변경 이벤트 리스너 등록
    characteristic.addEventListener('characteristicvaluechanged', (event) => {
      const value = event.target.value;
      
      // BLE 데이터 파싱 규칙 (Bluetooth SIG 표준 규격 준수)
      const flags = value.getUint8(0);
      const is16Bit = flags & 0x01;
      let heartRate;
      
      if (is16Bit) {
        heartRate = value.getUint16(1, true); // Little-endian
      } else {
        heartRate = value.getUint8(1);
      }
      
      console.log(`실시간 심박수: ${heartRate} bpm`);
      updateDashboardUI(heartRate);
    });

    console.log('심박수 모니터링이 시작되었습니다.');
  } catch (error) {
    console.error('GATT 데이터 조작 중 오류 발생:', error);
  }
}

function updateDashboardUI(bpm) {
  // DOM 업데이트 로직 예시
  const element = document.getElementById('bpm-display');
  if (element) element.textContent = `${bpm} BPM`;
}

async function connectCustomHIDDevice() {
  try {
    // 벤더 ID(VID)와 제품 ID(PID)로 특정 하드웨어 필터링
    const filters = [
      { vendorId: 0x1234, productId: 0x5678 } // 예시 Vender/Product ID
    ];

    const devices = await navigator.hid.requestDevice({ filters });
    
    if (devices.length === 0) {
      console.log('선택된 HID 장치가 없습니다.');
      return;
    }

    const device = devices[0];
    
    if (!device.opened) {
      await device.open();
    }
    
    console.log(`HID 장치 연결됨: ${device.productName} (VID: ${device.vendorId}, PID: ${device.productId})`);
    return device;
  } catch (error) {
    console.error('HID 장치 연결 중 오류:', error);
  }
}

class CustomHardwareController {
  constructor() {
    this.device = null;
  }

  async init() {
    try {
      const devices = await navigator.hid.requestDevice({ filters: [] });
      if (devices.length === 0) return;

      this.device = devices[0];
      if (!this.device.opened) {
        await this.device.open();
      }

      // 입력 리포트 이벤트 리스너 등록
      this.device.addEventListener('inputreport', this.handleInputReport.bind(this));
      console.log('하드웨어 리스너가 성공적으로 초기화되었습니다.');
    } catch (error) {
      console.error('초기화 실패:', error);
    }
  }

  handleInputReport(event) {
    const { device, reportId, data } = event;
    
    // 데이터 뷰어(DataView)를 통한 바이트 파싱
    const firstByte = data.getUint8(0);
    const secondByte = data.getUint8(1);

    console.log(`[Report ID: ${reportId}] Device: ${device.productName}`);
    console.log(`Raw Bytes -> Byte 0: ${firstByte}, Byte 1: ${secondByte}`);

    // 특정 버튼 눌림 여부 판단 예시
    if (firstByte === 0x01) {
      this.triggerAction('BUTTON_A_PRESSED');
    } else if (firstByte === 0x02) {
      this.triggerAction('BUTTON_B_PRESSED');
    }
  }

  async sendOutputData(reportId, bufferData) {
    if (!this.device || !this.device.opened) {
      throw new Error('장치가 연결되어 있지 않습니다.');
    }
    // 장치로 제어 명령 전송 (예: LED 색상 변경 등)
    await this.device.sendReport(reportId, bufferData);
    console.log('출력 리포트 전송 완료');
  }

  triggerAction(actionName) {
    console.log(`액션 실행: ${actionName}`);
    // 비즈니스 로직 연동
  }
}

// 사용 예시
const controller = new CustomHardwareController();
document.getElementById('connect-btn').addEventListener('click', () => {
  controller.init();
});