Web Serial API の使い方

こちらのシステムを、Web Serial API で制御します。
[M5Stack Core2: シリアルで LED を制御](https://qiita.com/ekzemplaro/items/e4ddb0ba0b03a9004204)

こちらのページを参考にしました。
[Web Serial API＋ESP32(Arduino)研究 その1 シリアルコンソール](https://lang-ship.com/blog/work/web-serial-api-esp32-01-console/)

実行時の様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a8ac7bdb-17e8-bb52-18ff-9fa69ad782be.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Web Serial API Console</title>
<script src="serial.js"></script>
</head>
<body>
<h1>Web Serial API Console</h1>
<button onclick="onConnectButtonClick()">Connect</button> 115200 Only
<br />

<input type="text" id="sendInput" />
<input type="button" value="Send" onclick="sendSerial();" />
<br />
<textarea cols="80" rows="16" id="outputArea" readonly></textarea>
<p>Oct/2/2022</p>
</body>
</html>
```

```js:serial.js
// ---------------------------------------------------------------
//	serial.js
//
//					Oct/02/2022
// ---------------------------------------------------------------
let port;

// ---------------------------------------------------------------
async function onConnectButtonClick()
{
	try {
		port = await navigator.serial.requestPort();
		await port.open({ baudRate: 115200 });

		while (port.readable) {
			const reader = port.readable.getReader();

			try {
				while (true) {
					const { value, done } = await reader.read();
					if (done) {
						addSerial("Canceled\n");
						break;
						}
					const inputValue = new TextDecoder().decode(value);
					addSerial(inputValue);
					}
			} catch (error) {
				addSerial("Error: Read" + error + "\n");
			} finally {
				reader.releaseLock();
			}
		}
	} catch (error) {
		addSerial("Error: Open" + error + "\n");
	}
}

// ---------------------------------------------------------------
function addSerial(msg)
{
	var textarea = document.getElementById('outputArea');
	textarea.value += msg;
	textarea.scrollTop = textarea.scrollHeight;
}

// ---------------------------------------------------------------
async function sendSerial()
{
	var text = document.getElementById('sendInput').value;
	document.getElementById('sendInput').value = "";

	const encoder = new TextEncoder();
	const writer = port.writable.getWriter();
	await writer.write(encoder.encode(text + "\n"));
	writer.releaseLock();
}

// ---------------------------------------------------------------
```

サーバーの起動

```bash
python -m http.server
```

```text
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
127.0.0.1 - - [02/Oct/2022 10:46:38] "GET / HTTP/1.1" 304 -
127.0.0.1 - - [02/Oct/2022 10:46:38] "GET /serial.js HTTP/1.1" 304 -
```

ポートを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/659b2ab0-4cf5-4a75-7c22-59ec5204f323.png)

red と入れて、send をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ff923e93-9dac-7e6c-c009-3736b7150b98.png)

## ネットワーク経由でのアクセス
テストした限り、
ネットワーク経由で、シリアルにはアクセスできませんでした。
機能したのは、サーバーとクライアントが同一マシーンにある時だけでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/2853a56e-52ed-0e20-03b8-7a6f2d4fbae0.png)