Verwenden Sie die Web Serial API in Vue, um eine Verbindung zum seriellen Port herzustellen und eine Kommunikationsinteraktion zu erreichen
Web Serial API : Die Webseite kommuniziert über die serielle Schnittstelle mit der Hardware.
Diese API gilt nur für das Navigatorobjekt von JS selbst und hat daher nichts mit der Entwicklung des Vue- und React-Frameworks zu tun. Die
serielle Schnittstelle ist eine bidirektionale Kommunikation Schnittstelle, die das Senden und Empfangen von Bytes ermöglicht.
Die Web Serial API bietet Websites die Möglichkeit, mithilfe von JavaScript auf seriellen Geräten zu lesen und darauf zu schreiben. Serielle Geräte können über den seriellen Anschluss am System des Benutzers oder über abnehmbare USB- und Bluetooth-Geräte angeschlossen werden, die einen seriellen Anschluss emulieren.
Mit anderen Worten: Die Web Serial API verbindet das Web und die physische Welt, indem sie Websites die Kommunikation mit seriellen Geräten wie Mikrocontrollern und 3D-Druckern ermöglicht.
Diese API ist auch ein guter Begleiter für WebUSB, da Betriebssysteme erfordern, dass Anwendungen mit einigen seriellen Ports über ihre serielle High-Level-API und nicht über die Low-Level-USB-API kommunizieren.
Web Serial API ist eine Webtechnologie, die für den Zugriff auf und die Kommunikation mit Geräten mit serieller Schnittstelle (wie Arduino, Sensoren usw.) im Browser verwendet wird. Es bietet eine Reihe von JavaScript-Schnittstellen, die es Webanwendungen ermöglichen, über serielle USB-Anschlüsse eine Verbindung zu Hardwaregeräten herzustellen und Datensende- und -empfangsvorgänge durchzuführen.
Stellen Sie fest, ob der Browser die serielle Kommunikation unterstützt
if ("serial" in navigator) {
console.log(true);
} else {
console.log(false);
}
Häufig verwendete APIs
- requestPort ---- Autorisierten seriellen Port abrufen
- open-----Öffnen Sie die serielle Schnittstelle
- close – Schließen Sie die serielle Schnittstelle (der gesperrte Stream muss freigegeben werden, bevor die serielle Schnittstelle geschlossen wird).
- Abbrechen – Verlassen Sie die Leseschleife sofort, rufen Sie dann releaseLock auf und rufen Sie schließlich die Methode close auf
- releaseLock – Reader- und .Writer-Freigabemethoden
- read – Die Byte-Array-Lesemethode von port.readable.getReader()
- write – Die Schreibmethode von port.writable.getWriter()
Referenzdokumentation
Web Serial API
MDN Web Docs Web Serial API
Beispielvollständiger Code
<template>
<div class="serial-port">测试串口</div>
<el-button type="primary" @click="connectToSerialPort">连接串口</el-button>
<el-input
v-model="inputData"
maxlength="50"
placeholder="输入发送数据内容"
show-word-limit
type="textarea"
/>
<el-button type="success" @click="sendData">发送数据</el-button>
<el-button type="danger" @click="cutPort">断开串口</el-button>
</template>
<script setup>
import {
ref, onMounted } from "vue";
import {
ElMessage } from "element-plus";
const port = ref("");
const ports = ref([]);
const reader = ref("");
const connectToSerialPort = async () => {
try {
// 提示用户选择一个串口
port.value = await navigator.serial.requestPort();
// 获取用户之前授予该网站访问权限的所有串口。
ports.value = await navigator.serial.getPorts();
// console.log(port.value, ports.value);
console.log(port.value);
// 等待串口打开
await port.value.open({
baudRate: 9600 });
// console.log(typeof port.value);
ElMessage({
message: "成功连接串口",
type: "success",
});
// readData(port.value);
readData();
} catch (error) {
// 处理连接串口出错的情况
console.log("Error connecting to serial port:", error);
}
};
const readData = async () => {
reader.value = port.value.readable.getReader();
console.log(reader);
// 监听来自串口的数据
while (true) {
const {
value, done } = await reader.value.read();
if (done) {
// 允许稍后关闭串口
reader.value.releaseLock();
break;
}
// 获取发送的数据
const serialData = new TextDecoder().decode(value);
console.log(serialData);
// value 是一个 Uint8Array
console.log(value);
}
};
const inputData = ref("");
//
const sendData = async () => {
// if (port.value && port.value.isOpen) {
if (port.value) {
if (inputData.value) {
const writer = port.value.writable.getWriter();
console.log("发送数据");
await writer.write(new TextEncoder().encode(inputData.value));
await writer.close();
} else {
return ElMessage({
message: "输入需要发送的数据内容",
type: "warning",
showClose: true,
grouping: true,
duration: 2000,
});
}
} else {
ElMessage({
message: "串口未连接或未打开！",
type: "warning",
showClose: true,
grouping: true,
duration: 2000,
});
// console.error("串口未连接或未打开！");
}
};
// 断开接口
const cutPort = async () => {
if (port.value !== "") {
await reader.value.cancel();
await port.value.close();
port.value = "";
console.log("断开串口连接");
ElMessage({
message: "已成功断开串口连接",
type: "success",
});
} else {
ElMessage({
message: "请先连接或打开串口",
type: "warning",
showClose: true,
grouping: true,
duration: 2000,
});
// console.error("串口未连接或未打开！");
}
};
onMounted(() => {
// 判断浏览器支持串口通信
if ("serial" in navigator) {
console.log(true);
} else {
console.log(false);
}
// 页面刷新提示
// window.onbeforeunload = e => {
// console.log(e);
// // 兼容IE8和Firefox 4之前的版本
// if (e) {
// e.returnValue = '关闭提示'
// }
// // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
// return '关闭提示'
// }
});
</script>
Screenshot des Beispieleffekts
Weitere Informationen finden Sie im Artikel
Web Serial API. Die Webseite kommuniziert mit der Hardware über den seriellen Port.
Vue verwendet Serial, um eine Verbindung zum seriellen Port herzustellen.