39. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSerial Example</title>
</head>
<body>
<button id="openPort">打开串口</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const openPortButton = document.getElementById('openPort');
let serialPort;
let reader;
openPortButton.addEventListener('click', async () => {
try {
// 请求访问串口
port = await navigator.serial.requestPort();
serialPort = port;
// 打开串口
await port.open({ baudRate: 9600 });
// 创建TextDecoderStream实例并连接到串口可读流
let decoder = new TextDecoderStream();
port.readable.pipeTo(decoder.writable);
// 创建一个ReadableStreamDefaultReader实例来读取解码后的数据
reader = decoder.readable.getReader();
// 开始监听数据
readSerialData();
// 示例发送一条消息
sendMessage("Hello from WebSerial!");
} catch (error) {
console.error('Error accessing serial port:', error);
}
});
// 监听串口数据接收
async function readSerialData() {
while (true) {
try {
const { value, done } = await reader.read();
if (done) {
reader.releaseLock();
break;
}
if (value) {
console.log('Received data:', value);
}
} catch (error) {
console.error('Error reading serial data:', error);
break;
}
}
}
});
// 发送消息
function sendMessage(message) {
let encoder = new TextEncoder();
let data = encoder.encode(message);
let writer = port.writable.getWriter();
writer.write(data);
writer.releaseLock();
}
// 关闭串口
function closePort() {
if (serialPort && serialPort.isOpen && reader) {
reader.cancel();
serialPort.close();
}
}
// 可能的话，在窗口卸载时关闭串口
window.addEventListener('beforeunload', (event) => {
closePort();
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSerial Example</title>
</head>
<body>
<button id="openPort">打开串口</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const openPortButton = document.getElementById('openPort');
let serialPort;
let reader;
openPortButton.addEventListener('click', async () => {
try {
// 请求访问串口
port = await navigator.serial.requestPort();
serialPort = port;
// 打开串口
await port.open({ baudRate: 9600 });
// 创建TextDecoderStream实例并连接到串口可读流
let decoder = new TextDecoderStream();
port.readable.pipeTo(decoder.writable);
// 创建一个ReadableStreamDefaultReader实例来读取解码后的数据
reader = decoder.readable.getReader();
// 开始监听数据
readSerialData();
// 示例发送一条消息
sendMessage("Hello from WebSerial!");
} catch (error) {
console.error('Error accessing serial port:', error);
}
});
// 监听串口数据接收
async function readSerialData() {
while (true) {
try {
const { value, done } = await reader.read();
if (done) {
reader.releaseLock();
break;
}
if (value) {
console.log('Received data:', value);
}
} catch (error) {
console.error('Error reading serial data:', error);
break;
}
}
}
});
// 发送消息
function sendMessage(message) {
let encoder = new TextEncoder();
let data = encoder.encode(message);
let writer = port.writable.getWriter();
writer.write(data);
writer.releaseLock();
}
// 关闭串口
function closePort() {
if (serialPort && serialPort.isOpen && reader) {
reader.cancel();
serialPort.close();
}
}
// 可能的话，在窗口卸载时关闭串口
window.addEventListener('beforeunload', (event) => {
closePort();
});
</script>
</body>
</html>