1. Introducción a la API serie web

Web Serial API es una tecnología web para acceder y comunicarse con dispositivos de puerto serie (como Arduino, sensores, etc.) en un navegador. Proporciona un conjunto de interfaces JavaScript para que las aplicaciones web puedan conectarse a dispositivos de hardware a través de puertos serie USB y realizar operaciones de envío y recepción de datos.

2. Introducción al entorno de software

Versión del navegador: Google Chrome versión 113.0.5672.127

Versión de Node.js: Node.js v16.9.1

Versión de andamiaje de Vue: @vue/cli 5.0.8

Versión de Vue: vue: 3.2.13

Versión de elemento plus: elemento plus: 2.3.5

3. Introducción a las funciones de la interfaz Web Serial API

La API Web Serial proporciona algunas funciones de interfaz para acceder y comunicarse con dispositivos de puerto serie en un navegador. Las siguientes son funciones de interfaz Web Serial API de uso común:

navigator.serial.requestPort () : muestra un cuadro de diálogo de selección que permite al usuario seleccionar un dispositivo de puerto serie .
port.open(baudrate): abre el puerto serie especificado con la velocidad en baudios especificada.
port.write(data): escribe datos en un puerto serie abierto.
port.readable.getReader(): obtiene una secuencia legible.
lector.read(): Lee datos del puerto serie.
lector.cancel(): cancela la operación de lectura actual.
port.close(): cierra un puerto serie abierto.

4. Realización de funciones

4.1 Determinar si el navegador actual admite la API

/* 
生命周期函数
当挂载完成之后，对浏览器是否支持本网页进行检查
*/
onMounted(() => {
    if ("serial" in navigator) {
    } else {
        ElNotification({
            title: '浏览器版本低',
            message: '您的浏览器版本太低，可能不支持浏览器串口的使用',
            type: 'error',
            duration: 20000
        })
    }
})

4.2 Seleccionar puerto serie

Función de respuesta al clic del botón.

// 选择串口
const chooseSerial = async () => {
    // 提示用户选择一个串口
    try {
        port.value = await navigator.serial.requestPort();
        console.log(port.value);
    } catch (error) {
        // 错误提示弹窗
        ElNotification({title: '选择串口失败',message: '错误信息：' + error,type: 'warning',duration: 2000})
        return;
    }
    ElNotification({title: '选择串口成功',message: '打开串口接收信息',type: 'success',duration: 2000})
}

4.3 Información de configuración en serie

// 串口配置
const port = ref(null)
const reader = ref(null)
const message = ref(null)
const connected = ref(null)
const serialOptions = {
    baudRate: 9600,
    flowControl: 'none',
    dataBits: 8
};

4.4 Abrir el puerto serie para recibir información

// 2.打开串口
const openSerial = async () => {
    try {
        await port.value.open(serialOptions)
        reader.value = port.value.readable.getReader()
        connected.value = true
    } catch (error) {
        ElNotification({title: '打开串口失败',message: error,type: 'warning',duration: 2000})
        return;
    }
    ElNotification({title: '打开串口成功',message: '串口等待接收信息中',type: 'success',duration: 2000})
    readLoop()
}
// readLoop()串口读取函数
async function readLoop() {
    try {
        while (connected.value) {
            const { value, done } = await reader.value.read()
            if (done) {
                reader.value.releaseLock()
                break
            }
            message.value = new TextDecoder().decode(value)
        }
    } catch (error) {
        ElNotification({title: '读取串口失败',message: `串口读取信息失败：${error}`,type: 'error',duration: 2000})
    }
}

4.5 Cerrar el puerto serie

// 3.关闭串口
const closeSerial = async () => {
    try {
        await reader.value.cancel()
        await port.value.close()
        connected.value = false
    } catch (error) {
        ElNotification({title: '关闭串口失败',message: '请检查后重新关闭串口',type: 'warning',duration: 2000})
        return;
    }
    ElNotification({title: '关闭串口成功',message: `已关闭串口:${port.value.name}`,type: 'success',duration: 2000})
}

4.6 Realizar el efecto

La función se realiza perfectamente: puede seleccionar el puerto serie, abrir el puerto serie, recibir información y cerrar el puerto serie cuando no esté en uso. El problema es que la función de configuración del puerto serie no se ha realizado y solo puede haber tantos códigos como estén escritos.

Cinco, código completo

Enlace: Haga clic para ingresar
el código de extracción: ea9d

Uso de Web Serial API para realizar la comunicación en serie entre Vue y el microcontrolador