一.常用API介绍

1. requestPort----获取授权串口
2. open-----打开串口
3. close—关闭串口(串口关闭前，需要释放锁住的流)
4. cancel—立即退出读取的循环，然后去调用releaseLock，最后调用close方法
5. releaseLock—Reader和.Writer的释放方法
6. read—port.readable.getReader()的读取字节数组方法
7. write—port.writable.getWriter()的写入方法

二.代码示例

<button onclick="sendMsg()">发送</button>
<button onclick="serial()">启动串口调试</button>

<script type="text/javascript">
	let writer = null, getData = [],timeOut;
    async function sendMsg() {  
        //信息 49, 50, 51, 13---123  116,101, 115, 116, 13---test
        const data = new Uint8Array(toUint8Arr('test1234'))
        await writer.write(data);
    }
    async function serial() {
        // 浏览器支持serial
        console.log(navigator);
        if ('serial' in navigator) {
            console.log('当前浏览器支持serial')
            // 提示用户选择一个串口
            const port = await navigator.serial.requestPort();
            // 获取用户之前授予网站访问权限的所有串口.
            // const ports = await navigator.serial.getPorts();
            //打开串口
            //baudRate：波特率
            //dataBits：数据位（7 或 8）
			//stopBits：停止位（1 或 2）
			//parity：校验位"none"、"偶even"、"奇odd"
			//bufferSize：读写缓冲区大小（必须小于 16MB）
			//flowControl：流量控制模式。"none"、"hardware"
            await port.open({ baudRate: 115200})
            const reader = port.readable.getReader();
            writer = port.writable.getWriter();
            try {
                while (true) {
                    const { value, done } = await reader.read();
                    if (done) {
                        reader.releaseLock();
                        break;
                    }
                    let arr=Array.from(value);
                     getData.push(...arr);
                     if(timeOut)clearTimeout(timeOut);  //不知道为什么返回数据会分批，所以做了防抖
	                    timeOut=setTimeout(()=>{
	                      console.log(Uint8ArrayToString(new Uint8Array(getData)));
	                       getData=[];
	                       timeOut=null;
	                    },200)
                	}
            } catch (error) {
                console.error(error)
            } finally {
                reader.releaseLock();
                console.log('允许稍后关闭串口。');
                await port.close();
            }
        }else{
            console.log('不支持');
        }
    }
    //string转uint8array
    function toUint8Arr(str) {
        const buffer = [];
        for (let i of str) {
            const _code = i.charCodeAt(0);
            if (_code < 0x80) {
                buffer.push(_code);
            } else if (_code < 0x800) {
                buffer.push(0xc0 + (_code >> 6));
                buffer.push(0x80 + (_code & 0x3f));
            } else if (_code < 0x10000) {
                buffer.push(0xe0 + (_code >> 12));
                buffer.push(0x80 + (_code >> 6 & 0x3f));
                buffer.push(0x80 + (_code & 0x3f));
            }
        }
        return Uint8Array.from(buffer);
    }
    //uint8array转String
    function Uint8ArrayToString(serialData) {
        var out, i, len, c;
        var char2, char3;
        out = "";
        len = serialData.length;
        i = 0;
        while (i < len) {
            c = serialData[i++];
            switch (c >> 4) {
                case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                    // 0xxxxxxx
                    out += String.fromCharCode(c);
                    break;
                case 12: case 13:
                    // 110x xxxx   10xx xxxx
                    char2 = serialData[i++];
                    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                    break;
                case 14:
                    // 1110 xxxx  10xx xxxx  10xx xxxx
                    char2 = serialData[i++];
                    char3 = serialData[i++];
                    out += String.fromCharCode(((c & 0x0F) << 12) |
                        ((char2 & 0x3F) << 6) |
                        ((char3 & 0x3F) << 0));
                    break;
            }
        }
        return out;
    }
</script >

三.示例截图

1.启动串口调试

2.使用串口工具调试发送和接收

注:

• 此功能仅支持chromium内核89版本以上的浏览器；
• 域名或IP访问时需要HTTPS，localhost没有限制。

参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API