前言

之前寫了一個vue+django的一個通過串口控制的上位機系統，但是實際生產中，不如部署到服務器上，這樣可以更好的節約成本，但是這樣就需要弄一個客戶端來控制處理串口資訊，那我就在想能不能通過網頁直接拿到客戶端的串口資訊，所以問了萬能的chatgpt，得到了以下答案：
是的，前端可以使用 Web SerialAPI直接與客戶端機器的串口通信，而Diango只需要負責存盤資料，當客戶端機器發送資料時，前端可以將資料發送到 Diango服務器，Diango 服務器再將資料存盤到資料庫中，當需要讀取資料時，前端可以從 Django服務器中獲取資料并顯示在頁面上，
所以我去研究了下Web Serial Api

一、什么是Web Serial Api

官方：https://wicg.github.io/serial/#open-method
Web Serial API 是一個用于訪問串行設備的 Web API，它允許 web 應用程式與串行設備（如 Arduino、傳感器、GPS 接收器等）進行通信，使用 Web Serial API，你可以在 web 應用程式中讀取和寫入串行資料，就像使用本地應用程式一樣，

Web Serial API 是由 W3C Web 原生設備和傳感器作業組開發的，它已經成為標準的一部分，目前已經在主流瀏覽器中得到了支持，包括 Chrome、Edge、Firefox 和 Opera，

使用 Web Serial API，你可以在 web 應用程式中執行以下操作：

請求用戶授權訪問串行埠
打開和關閉串行埠
讀取和寫入串行資料
監聽來自串行設備的資料
設定串行埠的引數，例如波特率、資料位、停止位、奇偶校驗等，

Web Serial API 的優點在于它可以在沒有任何插件或安裝軟體的情況下訪問串行設備，因此它非常適合用于構建基于 web 的物聯網應用程式，

二、vite專案運行在https協議

如果想使用Web Serial Api就需要把專案運行在https模式下
其實可以簡單驗證下：

if ("serial" in navigator) {  
console.log("Web Serial API is supported!");  
} else {  
console.log("Web Serial API is not supported!");  
}

正常在http模式下是不成功的，

首先需要把專案在https模式運行，這里先用簡單證書去處理，
錯誤示范：

直接加--https 運行時在https上但是會報錯：

這個時候需要自己獲取SSL證書

Windows使用mkcert頒發證書及應用
1、下載：

https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4

在下載好的檔案下

打開cd 找到檔案輸入mkcert-v1.4.3-windows-amd64.exe -install（根據你實際包來）

這個時候我們就看到2個pem檔案了

Vite配置

把上面生成的兩個檔案放到專案根目錄keys檔案夾
在vite.config.ts中修改為(請根據情況按需修改)：

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')),
    },
  },
})

選擇高級

這樣我們的專案就運行在

這樣就解決了這個問題，

三、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>

串口接受訊息

// 提示用戶選擇一個串口
const port = await navigator.serial.requestPort();
await port.open({baudRate:9600});

const reader = port.readable.getReader();

let buffer = ''; // 緩沖區

// 監聽來自串口的資料
while (true) {
  const { value } = await reader.read();
  if (value) {
    const textDecoder = new TextDecoder('utf-8');
    const str = textDecoder.decode(value);
    buffer += str; // 將讀取到的資料添加到緩沖區中

    // 判斷緩沖區中是否存在完整的資料包
    const completePacketIndex = buffer.indexOf('\n');
    if (completePacketIndex !== -1) {
      const completePacket = buffer.substring(0, completePacketIndex);
      buffer = buffer.substring(completePacketIndex + 1);

      // 處理完整的資料包
      console.log(completePacket);
    }
  }
}

串口發送訊息

 const writer = port.writable.getWriter();

 const data = https://www.cnblogs.com/lightwower/archive/2023/05/05/new Uint8Array([104, 101, 108, 108, 111]); // hello

 setInterval(async () => {
   await writer.write(data);
 }, 2000);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551771.html

標籤：其他

上一篇：HTML5中的document.visibilityState

下一篇：返回列表

Vue3專案（Vite+TS）使用Web Serial Api全記錄

前言

一、什么是Web Serial Api

二、vite專案運行在https協議

三、Web Serial Api簡單使用