온라인 시리얼 포트 디버거

핵심 API: Web Serial API

이 도구는 브라우저를 통해 직렬 포트에 액세스하기 위한 JavaScript 인터페이스를 제공하는 Web Serial API 위에 구축되었습니다.

주요 기능:

• 드라이버나 플러그인을 설치하지 않고도 브라우저가 기본적으로 직렬 포트 액세스를 지원
• 여러 직렬 포트 구성(보 레이트, 데이터 비트, 패리티, 정지 비트, 흐름 제어) 지원
• Readable/Writable Streams를 사용한 양방향 데이터 통신
• Promise 및 async/await 기반 비동기 작업

구현 단계

const port = await navigator.serial.requestPort();

await port.open({
  baudRate: 9600,
  dataBits: 8,
  parity: 'none',
  stopBits: 1,
  flowControl: 'none'
});

const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  // 수신된 데이터 처리(Uint8Array)
  const text = new TextDecoder().decode(value);
}

const writer = port.writable.getWriter();
const encoder = new TextEncoder();
const data = encoder.encode('Hello Serial!');
await writer.write(data);

await reader.cancel();
await reader.releaseLock();
await writer.releaseLock();
await port.close();

사용된 주요 API

• navigator.serial.requestPort() - 사용자에게 직렬 포트 선택 요청
• port.open(options) - 구성으로 직렬 포트 열기
• port.readable.getReader() - 읽기 스트림의 reader 가져오기
• port.writable.getWriter() - 쓰기 스트림의 writer 가져오기
• reader.read() - 직렬 포트에서 데이터 읽기
• writer.write(data) - 직렬 포트에 데이터 쓰기
• TextDecoder / TextEncoder - 문자열과 바이트 배열 간 변환
• port.addEventListener('disconnect') - 장치 연결 해제 이벤트 수신