앞에서 만든 시리얼 입력하며 출력하는 예제를 이용해서

웹페이지에서 연결해서 사용해보자.

 

※ 소스 : index.html

<!DOCTYPE html>
<html>
<body>
<h2>WebSerial Terminal</h2>

<textarea id="text" rows="4" cols="40"></textarea><br>
<button onclick="connect()">Connect</button>
<button onclick="send()">Send</button>

<script>
let port;
let writer;

async function connect() {
  port = await navigator.serial.requestPort();
  await port.open({ baudRate: 115200 });

  writer = port.writable.getWriter();
  alert("Connected!");
}

async function send() {
  const text = document.getElementById("text").value + "\n";

  // UTF-8 인코딩
  const encoder = new TextEncoder();
  const data = encoder.encode(text);

  await writer.write(data);
}
</script>
</body>
</html>

 

※ 실행

 

 

728x90

+ Recent posts