前言
之前寫了一個(gè)vue+django的一個(gè)通過串口控制的上位機(jī)系統(tǒng)。但是實(shí)際生產(chǎn)中，不如部署到服務(wù)器上，這樣可以更好的節(jié)約成本。但是這樣就需要弄一個(gè)客戶端來控制處理串口信息。那我就在想能不能通過網(wǎng)頁直接拿到客戶端的串口信息。所以問了萬能的chatgpt，得到了以下答案：
是的，前端可以使用 Web SerialAPI直接與客戶端機(jī)器的串口通信，而Diango只需要負(fù)責(zé)存儲(chǔ)數(shù)據(jù)。當(dāng)客戶端機(jī)器發(fā)送數(shù)據(jù)時(shí)，前端可以將數(shù)據(jù)發(fā)送到 Diango服務(wù)器，Diango 服務(wù)器再將數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫中。當(dāng)需要讀取數(shù)據(jù)時(shí)，前端可以從 Django服務(wù)器中獲取數(shù)據(jù)并顯示在頁面上。
所以我去研究了下Web Serial Api
一、什么是Web Serial Api
官方：https://wicg.github.io/serial/#open-method
Web Serial API 是一個(gè)用于訪問串行設(shè)備的 Web API，它允許 web 應(yīng)用程序與串行設(shè)備（如 Arduino、傳感器、GPS 接收器等）進(jìn)行通信。使用 Web Serial API，你可以在 web 應(yīng)用程序中讀取和寫入串行數(shù)據(jù)，就像使用本地應(yīng)用程序一樣。
Web Serial API 是由 W3C Web 原生設(shè)備和傳感器工作組開發(fā)的，它已經(jīng)成為標(biāo)準(zhǔn)的一部分，目前已經(jīng)在主流瀏覽器中得到了支持，包括 Chrome、Edge、Firefox 和 Opera。
使用 Web Serial API，你可以在 web 應(yīng)用程序中執(zhí)行以下操作：
- 請求用戶授權(quán)訪問串行端口
- 打開和關(guān)閉串行端口
- 讀取和寫入串行數(shù)據(jù)
- 監(jiān)聽來自串行設(shè)備的數(shù)據(jù)
- 設(shè)置串行端口的參數(shù)，例如波特率、數(shù)據(jù)位、停止位、奇偶校驗(yàn)等。
Web Serial API 的優(yōu)點(diǎn)在于它可以在沒有任何插件或安裝軟件的情況下訪問串行設(shè)備，因此它非常適合用于構(gòu)建基于 web 的物聯(lián)網(wǎng)應(yīng)用程序。
二、vite項(xiàng)目運(yùn)行在https協(xié)議
如果想使用Web Serial Api就需要把項(xiàng)目運(yùn)行在https模式下
其實(shí)可以簡單驗(yàn)證下：
if ("serial" in navigator) {
console.log("Web Serial API is supported!");
} else {
console.log("Web Serial API is not supported!");
}
正常在http模式下是不成功的。
首先需要把項(xiàng)目在https模式運(yùn)行，這里先用簡單證書去處理。
錯(cuò)誤示范：
直接加--https?運(yùn)行時(shí)在https上 但是會(huì)報(bào)錯(cuò)：
這個(gè)時(shí)候需要自己獲取SSL證書
Windows使用mkcert頒發(fā)證書及應(yīng)用
1、下載：
https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4
在下載好的文件下
打開cd 找到文件 輸入mkcert-v1.4.3-windows-amd64.exe -install（根據(jù)你實(shí)際包來）
這個(gè)時(shí)候我們就看到2個(gè)pem文件了
Vite配置
把上面生成的兩個(gè)文件放到項(xiàng)目根目錄keys文件夾
在vite.config.ts中修改為(請根據(jù)情況按需修改)：
import?*?as?fs?from?'fs'
import?path?from?'path'
// https://vitejs.dev/config/
export?default?defineConfig({
? plugins:?[vue()],
? resolve:?{
? ? alias:?{
? ? ? '@':?path.join(__dirname, 'src')
? ? }
? },
? server:{
? ? host:"192.168.149.1",
? ? port:8080,
? ? open:true,
? ? https:{
? ? ? key:fs.readFileSync(path.join(__dirname, 'key/install-key.pem')),
? ? ? cert:fs.readFileSync(path.join(__dirname, ?'key/install.pem')),
? ? },
? },
})
選擇高級
這樣我們的項(xiàng)目就運(yùn)行在
這樣就解決了這個(gè)問題。
三、Web Serial Api簡單使用
串口的選擇
<script>
const port = await navigator.serial.requestPort();
await port.open({baudRate:9600});
const reader = port.readable.getReader();
</script>
<template>
</template>
<style scoped>
</style>
串口接受消息文章來源：http://www.zghlxwxcb.cn/news/detail-434252.html
// 提示用戶選擇一個(gè)串口
const port = await navigator.serial.requestPort();
await port.open({baudRate:9600});
const reader = port.readable.getReader();
let buffer = ''; // 緩沖區(qū)
// 監(jiān)聽來自串口的數(shù)據(jù)
while (true) {
const { value } = await reader.read();
if (value) {
const textDecoder = new TextDecoder('utf-8');
const str = textDecoder.decode(value);
buffer += str; // 將讀取到的數(shù)據(jù)添加到緩沖區(qū)中
// 判斷緩沖區(qū)中是否存在完整的數(shù)據(jù)包
const completePacketIndex = buffer.indexOf('\n');
if (completePacketIndex !== -1) {
const completePacket = buffer.substring(0, completePacketIndex);
buffer = buffer.substring(completePacketIndex + 1);
// 處理完整的數(shù)據(jù)包
console.log(completePacket);
}
}
}
串口發(fā)送消息文章來源地址http://www.zghlxwxcb.cn/news/detail-434252.html
const writer = port.writable.getWriter();
const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
setInterval(async () => {
await writer.write(data);
}, 2000);
到了這里，關(guān)于Vue3項(xiàng)目（Vite+TS）使用Web Serial Api全記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
