electron開(kāi)發(fā)桌面應(yīng)用實(shí)現(xiàn)串口通信，看完你就學(xué)

electron開(kāi)發(fā)桌面應(yīng)用實(shí)現(xiàn)串口通信，看完你就學(xué)會(huì)了

么是electron

使用 JavaScript，HTML 和 CSS 構(gòu)建跨平臺(tái)的桌面應(yīng)用程序

只要你會(huì)javascript html css 就可以構(gòu)建自己想要做的PC桌面和MACos app 應(yīng)用，是不是很強(qiáng)大。

今天的重點(diǎn)是通過(guò)它來(lái)實(shí)現(xiàn)串口通信的功能，想要實(shí)現(xiàn)這部分功能不得不做些準(zhǔn)備工作

下面跟我一步一步的來(lái)操作吧

electron串口通信實(shí)現(xiàn)步驟

安裝環(huán)境

想構(gòu)建electron 必須要有支持的基礎(chǔ)環(huán)境，node 和 npm

node想必大家并不陌生，前端的小伙伴太熟悉不過(guò)了，Node.js 就是運(yùn)行在服務(wù)端的 JavaScript

檢測(cè)你的電腦環(huán)境中是否安裝了node.js

檢測(cè)是否安裝node，的命令是

node -v

我這里是win10 開(kāi)發(fā)環(huán)境

打開(kāi)命令行工具

我這里已經(jīng)安裝過(guò)了，看到有版本信息v10.16.1 說(shuō)明已經(jīng)安裝成功

接下來(lái)再檢查下是否安裝了npm 工具

npm -v

我這里也已經(jīng)安裝了npm ,顯示版本6.9.0

有的同學(xué)小伙伴不知道npm是什么

PS：是nodejs內(nèi)置的軟件包管理器, 在項(xiàng)目開(kāi)發(fā)中，需要用到說(shuō)明包就拿這個(gè)下載就行了，下面有介紹

好了，有了基礎(chǔ)的環(huán)境，我們就開(kāi)始構(gòu)建一個(gè)桌面程序吧

在工作的根目錄創(chuàng)建一個(gè)文件夾eletest

在創(chuàng)建一個(gè)普通的index.html 文件，這樣就有了一個(gè)基本的前端界面,electron 在node.js基礎(chǔ)上構(gòu)建的，下面是應(yīng)用的基本目錄結(jié)構(gòu)，我們已經(jīng)創(chuàng)建了index.html

eletest/
├── package.json
├── main.js
└── index.html

mian.js文件也是electron的入口文件

const electron=require('electron')
    // Module to control application life.
const app=electron.app
    // Module to create native browser window.
const BrowserWindow=electron.BrowserWindow

const path=require('path')
const url=require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow() {
    // Create the browser window.
    mainWindow=new BrowserWindow({
         width: 1920,
        height: 1080,
        frame:false,
        resizable: false,
        fullscreen:true,
        webPreferences: {
            nodeIntegration: true,
            // preload: path.join(__dirname, 'preload.js')
        }
    })

    // and load the index.html of the app.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

    // Open the DevTools.
    mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow=null
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    app.quit()
})

app.on('activate', function() {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow===null) {
        createWindow()
    }
})

這里的方法函數(shù)不在過(guò)多的解釋了，復(fù)制代碼到你創(chuàng)建的main.js中去就可以了，也可以去electron文檔中查看對(duì)應(yīng)的API

package.json 這是一個(gè)包構(gòu)建信息的文件在eletest文件下運(yùn)行命令

npm init -y

就會(huì)自動(dòng)生成package.json文件，是不是很簡(jiǎn)單啊

要想運(yùn)行你寫(xiě)的hml界面打開(kāi)這個(gè)文件修改一處

"scripts": {
    "start": "electron ."
  },

這樣就完成了幾個(gè)基本的配置

下面安裝electron 包了運(yùn)行命令

npm i --save-dev electron

你的運(yùn)行結(jié)果和上面的圖片里的信息說(shuō)明就成功安裝了electron 默認(rèn)安裝的最新穩(wěn)定的依賴(lài)包

前期的工作都做完了，來(lái)運(yùn)行它，看看是否出現(xiàn)我們想要的界面

運(yùn)行命令

npm start

hello world! 是不是很熟悉，很驚喜，很意外。

出現(xiàn)了平時(shí)我們打開(kāi)windows應(yīng)用窗口

以上步驟都是構(gòu)建一個(gè)electron的桌面應(yīng)用的，串口是如何實(shí)現(xiàn)的呢？

如果你不熟悉串口是說(shuō)明，先去補(bǔ)補(bǔ)串口的基本概念和相關(guān)信息

串口、COM口是指的物理接口形式(硬件)

你也可以打開(kāi)設(shè)備管理器看到相應(yīng)的串口，我這里有COM11和COM10 ，串口是成對(duì)出現(xiàn)的

了解了說(shuō)明是串口后，來(lái)實(shí)現(xiàn)我們的應(yīng)用串口通信吧

運(yùn)行命令

npm install serialport

出現(xiàn)serialport 的版本信息說(shuō)明已經(jīng)安裝成功

electron 通信或者一些交互都是在node上完成的

查看了文檔后我們可以在html頁(yè)面上

引入serialport包

設(shè)置要監(jiān)聽(tīng)的串口端口比如COM11

配置寫(xiě)端口基本信息

serialPost.on 接收發(fā)過(guò)來(lái)的信息，如果在控制臺(tái)上打印出信息，就說(shuō)明串口通信成功

再次運(yùn)行electron npm start

打印控臺(tái)看到信息：打印端口成功，正在監(jiān)聽(tīng)數(shù)據(jù)中，就說(shuō)明實(shí)現(xiàn)了串口的通信最重要一部打開(kāi)通道

為了驗(yàn)證是否能通信，我們找個(gè)串口精靈發(fā)送一寫(xiě)信息，再次看控制臺(tái)收到了發(fā)送的信息

如圖在測(cè)試串口工具中輸入aaaa, 運(yùn)行的控制臺(tái)收到了aaaa ，說(shuō)明已經(jīng)成功實(shí)現(xiàn)串口通信。

是不是很簡(jiǎn)單，是不是很驚喜，是不是你在今后項(xiàng)目當(dāng)中有需要串口通信的就可以復(fù)制粘貼了。

avaScript本身不提供直接訪問(wèn)串口的功能。然而，可以使用Web API和JavaScript與串口進(jìn)行通信，一般需要在瀏覽器環(huán)境中進(jìn)行。

步驟

Web Serial API：Web Serial API是一種Web API，允許JavaScript在瀏覽器中與串口設(shè)備通信。要使用它，需要在支持該API的瀏覽器中運(yùn)行JavaScript。通常需要使用最新的Chrome瀏覽器。
請(qǐng)求串口訪問(wèn)：在JavaScript中，我們可以通過(guò)使用navigator.serial.requestPort()方法請(qǐng)求訪問(wèn)串口設(shè)備。這將提示用戶(hù)選擇串口設(shè)備。

const port=await navigator.serial.requestPort();

打開(kāi)串口連接

await port.open({ baudRate: 9600 });

讀寫(xiě)數(shù)據(jù)：可以使用port.readable和port.writable屬性來(lái)讀取和寫(xiě)入數(shù)據(jù)。例如，我們可以使用readable.getReader()獲取一個(gè)可讀數(shù)據(jù)流，并使用read()方法讀取數(shù)據(jù)。對(duì)于寫(xiě)入，可以使用writable.getWriter()獲取一個(gè)可寫(xiě)數(shù)據(jù)流，并使用write()方法寫(xiě)入數(shù)據(jù)。
關(guān)閉串口：在完成通信后，應(yīng)該使用port.close()方法關(guān)閉串口連接。

使用Web Serial API進(jìn)行串口通信需要在瀏覽器環(huán)境中運(yùn)行，并且通常需要用戶(hù)授權(quán)。不是所有瀏覽器都支持Web Serial API，而且它主要用于Web應(yīng)用程序，而不是傳統(tǒng)的本地JavaScript應(yīng)用程序。

Demo

// 請(qǐng)求串口訪問(wèn)權(quán)限
async function requestSerialAccess() {
  try {
    const port=await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 }); // 打開(kāi)串口連接

    // 讀取數(shù)據(jù)
    const reader=port.readable.getReader();

    while (true) {
      const { value, done }=await reader.read();
      if (done) {
        break;
      }
      // 處理從串口讀取的數(shù)據(jù)
      console.log(value);
    }

    // 關(guān)閉串口連接
    await port.close();
  } catch (error) {
    console.error("Error:", error);
  }
}

// 添加事件監(jiān)聽(tīng)器，用于在用戶(hù)點(diǎn)擊按鈕時(shí)請(qǐng)求串口訪問(wèn)權(quán)限
const connectButton=document.getElementById("connect-button");
connectButton.addEventListener("click", requestSerialAccess);

首先我們創(chuàng)建了一個(gè)函數(shù)requestSerialAccess()，它請(qǐng)求串口訪問(wèn)權(quán)限，打開(kāi)串口連接，然后使用一個(gè)循環(huán)來(lái)不斷讀取數(shù)據(jù)，將數(shù)據(jù)輸出到控制臺(tái)。最后，它在完成后關(guān)閉串口連接。

、項(xiàng)目簡(jiǎn)介

HTTP協(xié)議是互聯(lián)網(wǎng)應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，由客戶(hù)端發(fā)送請(qǐng)求消息，服務(wù)端針對(duì)客戶(hù)端的請(qǐng)求進(jìn)行響應(yīng)回復(fù)。本文將基于EsDA開(kāi)發(fā)平臺(tái)，使用EPC6450-AWI開(kāi)發(fā)板，以及圖形化設(shè)計(jì)工具AWFlow Designer實(shí)現(xiàn)將串口數(shù)據(jù)轉(zhuǎn)換為HTTP請(qǐng)求發(fā)送給云端，隨后云端針對(duì)HTTP請(qǐng)求進(jìn)行處理響應(yīng)的功能。該項(xiàng)目主要用到了serial_in_ex，fscript，http_request，fileout，timer，filein和serial_out_ex節(jié)點(diǎn)，具體實(shí)現(xiàn)請(qǐng)見(jiàn)下文。

2、項(xiàng)目概述

該項(xiàng)目是將串口數(shù)據(jù)通過(guò)作為HTTP客戶(hù)端的EPC6450-AWI開(kāi)發(fā)板去發(fā)送HTTP請(qǐng)求到云端服務(wù)器，在云端服務(wù)器上處理HTTP請(qǐng)求并下發(fā)響應(yīng)數(shù)據(jù)。

該項(xiàng)目的主要步驟如下：

1、配置EPC6450-AWI的網(wǎng)口設(shè)備并連接到互聯(lián)網(wǎng)

2、配置串口通信參數(shù)，包括波特率，數(shù)據(jù)位，停止位和校驗(yàn)等

3、從串口讀取HTTP請(qǐng)求參數(shù)，在本項(xiàng)目中串口的輸入數(shù)據(jù)如下：POST方法主要是輸入body消息正文，GET方法主要是輸入url統(tǒng)一資源定位符

4、http_request節(jié)點(diǎn)向云端服務(wù)器發(fā)起HTTP請(qǐng)求，云端服務(wù)器處理數(shù)據(jù)后發(fā)送響應(yīng)到客戶(hù)端，客戶(hù)端接收來(lái)自云端服務(wù)器的響應(yīng)數(shù)據(jù)

5、HTTP客戶(hù)端接收響應(yīng)數(shù)據(jù)后，將響應(yīng)數(shù)據(jù)中轉(zhuǎn)到文本中保存并輸出到串口進(jìn)行顯示

3、項(xiàng)目準(zhǔn)備

在本文將不再贅述串口設(shè)備在EsDA的基礎(chǔ)通信，讀者可以閱讀以下文章對(duì)串口節(jié)點(diǎn)和EsDA的一些基礎(chǔ)項(xiàng)目進(jìn)行熟絡(luò)：

【EsDA應(yīng)用】5分鐘實(shí)現(xiàn)一個(gè)串口通信業(yè)務(wù)
【EsDA 應(yīng)用】常用IO設(shè)備節(jié)點(diǎn)詳解
EsDA MPC-ZC1應(yīng)用——串口服務(wù)器（一）

3.1、硬件準(zhǔn)備

在標(biāo)有絲印為TF Card 絲印的卡槽處，插入SD卡

用戶(hù)可隨機(jī)選擇EPC6450-AWI的可用串口設(shè)備，在本文將用UART5進(jìn)行串口通信。在標(biāo)有絲印為UTX5,URX5的串口模塊上，將TTL轉(zhuǎn)USB串口模塊的TX與板子絲印為URX5連接，TTL轉(zhuǎn)USB串口模塊的RX與板子絲印為UTX5相連；并將TTL轉(zhuǎn)USB串口模塊另一端的USB
口接入電腦

在標(biāo)有絲印為Type-C 的接口處，插上Type-C線(xiàn)，并將Type-C線(xiàn)的另一端USB口插入電腦

在標(biāo)有絲印為NET0 或 NET1的RJ45插座處接上水晶頭，網(wǎng)線(xiàn)另一端水晶接頭插在PC的網(wǎng)絡(luò)插座上

3.2、網(wǎng)絡(luò)搭建

本文的網(wǎng)絡(luò)搭建是將電腦wifi通過(guò)以太網(wǎng)與開(kāi)發(fā)板進(jìn)行網(wǎng)絡(luò)共享，以此達(dá)到開(kāi)發(fā)板的以太網(wǎng)口聯(lián)網(wǎng)的目的

將TTL轉(zhuǎn)USB串口模塊接在絲印為DUART的調(diào)試串口上(TX接RX，RX接TX)

打開(kāi)串口調(diào)試助手，檢索并打開(kāi)TTL轉(zhuǎn)USB串口模塊的設(shè)備端口號(hào)后，使用shell命令ip addr，查看網(wǎng)口的ip地址，根據(jù)下圖可知，本文使用的網(wǎng)口設(shè)備ip地址是192.168.137.251

配置PC上的以太網(wǎng)的IP與開(kāi)發(fā)板的IP地址在同一局域網(wǎng)下

將PC上的WLAN配置共享給與開(kāi)發(fā)板連接的以太網(wǎng)

在串口調(diào)試助手輸入shell指令ping www.baidu.com，ping成功即開(kāi)發(fā)板聯(lián)網(wǎng)成功

4、項(xiàng)目實(shí)施

本項(xiàng)目業(yè)務(wù)主要分為兩個(gè)部分：

POST方法請(qǐng)求項(xiàng)目：模擬傳感器數(shù)據(jù)通過(guò)串口轉(zhuǎn)HTTP客戶(hù)端傳送到HTTP服務(wù)器，服務(wù)器進(jìn)行數(shù)據(jù)分析和處理。將串口數(shù)據(jù)作為HTTP請(qǐng)求的body參數(shù)，http_request節(jié)點(diǎn)在整理屬性和輸入?yún)?shù)后對(duì)自建的HTTP服務(wù)器發(fā)起POST方法的HTTP請(qǐng)求；服務(wù)器收到請(qǐng)求后，將串口數(shù)據(jù)保存到本地的文本文件以便后續(xù)查看，下發(fā)響應(yīng)數(shù)據(jù)給客戶(hù)端；客戶(hù)端收到服務(wù)器的響應(yīng)數(shù)據(jù)經(jīng)過(guò)數(shù)據(jù)處理后打印到串口助手的界面進(jìn)行查看。
GET方法請(qǐng)求項(xiàng)目：請(qǐng)求訪問(wèn)百度服務(wù)器。串口提供HTTP請(qǐng)求參數(shù)，http_request節(jié)點(diǎn)整理屬性和輸入?yún)?shù)對(duì)百度服務(wù)器發(fā)起GET方法的HTTP請(qǐng)求；http_request節(jié)點(diǎn)接收來(lái)自百度服務(wù)器的響應(yīng)數(shù)據(jù)，將數(shù)據(jù)保存到指定的文本文件中存儲(chǔ)再?gòu)奈谋局袑?shù)據(jù)輸出到串口助手的界面上。

4.1、POST方法請(qǐng)求

本項(xiàng)目由串口助手模擬將采集的傳感器數(shù)據(jù)通過(guò)開(kāi)發(fā)板的串口傳輸?shù)介_(kāi)發(fā)板創(chuàng)建的HTTP客戶(hù)端，HTTP客戶(hù)端再通過(guò)POST方法將傳感器數(shù)據(jù)作為body參數(shù)去請(qǐng)求本地搭建的HTTP服務(wù)器，HTTP服務(wù)器接收到請(qǐng)求后，將傳感器數(shù)據(jù)存儲(chǔ)到本地的index.html文件中，并將數(shù)據(jù)處理后作為響應(yīng)體回發(fā)給客戶(hù)端，HTTP客戶(hù)端接收到響應(yīng)消息后打印到串口助手上進(jìn)行顯示。

4.1.1、流圖繪制

添加serial_in_ex，fscript，http_request，fileout，timer，filein和serial_out_ex節(jié)點(diǎn)到畫(huà)布中并連線(xiàn)如下圖。

4.1.2、節(jié)點(diǎn)配置

在本文的serial_in_ex和serial_out_ex節(jié)點(diǎn)配置參數(shù)和操作一致，后面不再贅述serial_out_ex節(jié)點(diǎn)的配置操作。雙擊serial_in_ex節(jié)點(diǎn)，點(diǎn)擊配置節(jié)點(diǎn)名旁邊的鉛筆圖標(biāo)。

選擇用戶(hù)使用的串口設(shè)備，根據(jù)實(shí)際需求配置波特率，奇偶校驗(yàn)等串口配置參數(shù)，本項(xiàng)目中的串口配置參數(shù)如下圖所示。

雙擊serial_in_ex的消費(fèi)者節(jié)點(diǎn)fscript，因?yàn)楸卷?xiàng)目主要是將采集到的傳感器數(shù)據(jù)作為消息體參數(shù)發(fā)送到HTTP服務(wù)器進(jìn)行處理，所以該fscript主要是將讀取到的serial_in_ex串口數(shù)據(jù)賦值給http_request節(jié)點(diǎn)的body參數(shù)如下：

msg.body=istream_read_string(msg.istream, 100)

雙擊http_request節(jié)點(diǎn)，配置方法為POST，并設(shè)置用戶(hù)想要訪問(wèn)的HTTP服務(wù)器URL(這里的HTTP服務(wù)器是筆者本地用python搭建的一個(gè)簡(jiǎn)易HTTP服務(wù)器)，根據(jù)需要選擇輸出的內(nèi)容類(lèi)型，其他參數(shù)按需配置即可。

雙擊http_request節(jié)點(diǎn)的消費(fèi)者節(jié)點(diǎn)fscript，該節(jié)點(diǎn)主要是存儲(chǔ)http_request節(jié)點(diǎn)的輸出參數(shù)msg.payloadLength，用于后續(xù)賦值給filein節(jié)點(diǎn)的輸入?yún)?shù)讀取的數(shù)據(jù)長(zhǎng)度。

set(global.length, msg.payloadLength)

雙擊fileout節(jié)點(diǎn)，配置屬性參數(shù)如下，在本項(xiàng)目中配置文件打開(kāi)模式為從頭寫(xiě)入且丟棄源文件內(nèi)容，文件名選擇開(kāi)發(fā)板上自動(dòng)掛載的/flow目錄下的文件，數(shù)據(jù)來(lái)源選擇payload形式。

雙擊timer節(jié)點(diǎn)，配置定時(shí)周期時(shí)長(zhǎng)，定時(shí)用filein節(jié)點(diǎn)去讀取存放HTTP響應(yīng)的數(shù)據(jù)

雙擊timer的消費(fèi)者節(jié)點(diǎn)fscript，配置filein節(jié)點(diǎn)的輸入?yún)?shù)如下

set(msg.topic,"exec:read_data");var length=global.lengthset(msg.payload,length);

雙擊filein節(jié)點(diǎn)，配置需要讀取的文件名

雙擊filein的消費(fèi)者節(jié)點(diǎn)fscript，該節(jié)點(diǎn)主要將從filein節(jié)點(diǎn)讀取到的數(shù)據(jù)轉(zhuǎn)換給serial_out_ex節(jié)點(diǎn)

set(output.payload,str(msg.payload,true));

雙擊serial_out_ex節(jié)點(diǎn)，該節(jié)點(diǎn)配置參數(shù)與serial_in_ex節(jié)點(diǎn)一樣

4.1.3、本地HTTP服務(wù)器搭建

筆者用python腳本搭建了一個(gè)簡(jiǎn)易的HTTP服務(wù)器，主要功能是收到的POST請(qǐng)求中的消息體數(shù)據(jù)存儲(chǔ)到本地的index.html文本中，并將收到的消息體數(shù)據(jù)處理后作為響應(yīng)體回發(fā)給客戶(hù)端。在PC端執(zhí)行以下http_server.py的腳本即開(kāi)啟了本地的HTTP服務(wù)端。

from http.server import BaseHTTPRequestHandler, HTTPServerimport loggingclass S(BaseHTTPRequestHandler): def do_HEAD(self): self.send_response(200) self.send_header('Content-type', 'text/html') self.end_headers() def do_POST(self): content_length=int(self.headers['Content-Length']) post_data=self.rfile.read(content_length) logging.info("POST request,\nPath: %s\nHeaders:\n%s\n\nBody:\n%s\n", str(self.path), str(self.headers), post_data.decode('utf-8')) res="You Input: " + post_data.decode('utf-8') with open("index.html","a+") as f: f.write(post_data.decode('utf-8')) self.do_HEAD() self.wfile.write("{}".format(res).encode('utf-8')) def respond(self, opts): response=self.handle_http(opts['status'], self.path) self.wfile.write(response) def handle_http(self, status_code, path): self.send_response(status_code) self.send_header('Content-type', 'text/html') self.end_headers() content=''' <html><head><title>Title goes here.</title></head> <body><p>This is a test.</p> <p>You accessed path: {}</p> </body></html> '''.format(path) return bytes(content, 'UTF-8')def run(server_class=HTTPServer, handler_class=S, port=8080): print("run()") logging.basicConfig(level=logging.INFO) server_address=('', port) httpd=server_class(server_address, handler_class) logging.info('Starting http server...\n') try: httpd.serve_forever() except KeyboardInterrupt: pass httpd.server_close() print("httpd.server_close()") logging.info('Stopping http server...\n')if __name__=='__main__': from sys import argv if len(argv)==2: run(port=int(argv[1])) else: run()

4.1.4、下載運(yùn)行

將流圖下載到目標(biāo)開(kāi)發(fā)板后，在串口調(diào)試助手輸入HTTP請(qǐng)求的消息體(模擬的傳感器數(shù)據(jù))后，就可以在串口助手輸出界面看到返回的響應(yīng)內(nèi)容如下：

本地的HTTP服務(wù)器端收到的來(lái)自客戶(hù)端的請(qǐng)求信息如下：

打開(kāi)PC本地的index.html文本，可以看到保存的傳感器數(shù)據(jù)如下：

至此，串口轉(zhuǎn)HTTP客戶(hù)端的傳感器數(shù)據(jù)上云的實(shí)驗(yàn)就已完全結(jié)束，接下來(lái)開(kāi)啟訪問(wèn)百度游覽器的HTTP請(qǐng)求實(shí)驗(yàn)。

4.2、GET方法請(qǐng)求

該項(xiàng)目主要是通過(guò)GET方法請(qǐng)求百度服務(wù)器，最后將百度服務(wù)器響應(yīng)的消息進(jìn)行打印顯示，主要是將串口數(shù)據(jù)轉(zhuǎn)換為HTTP請(qǐng)求，發(fā)送到服務(wù)器端，以實(shí)現(xiàn)與遠(yuǎn)程服務(wù)器的通信。

4.2.1、流圖繪制

添加serial_in_ex，fscript，http_request，fileout，timer，filein和serial_out_ex節(jié)點(diǎn)到畫(huà)布中并連線(xiàn)如下圖。

4.2.2、節(jié)點(diǎn)配置

雙擊serial_in_ex的消費(fèi)者節(jié)點(diǎn)fscript，因?yàn)楸卷?xiàng)目主要是對(duì)HTTP協(xié)議的GET方法進(jìn)行數(shù)據(jù)請(qǐng)求，而GET的請(qǐng)求參數(shù)是拼接在URL的后面，所以串口輸入的主要是http_request節(jié)點(diǎn)的URL配置項(xiàng)，該fscript主要是讀取serial_in_ex的串口數(shù)據(jù)，如下：

var str=istream_read_string(msg.istream, 100)msg.url=str

雙擊http_request節(jié)點(diǎn)，配置方法為GET，并設(shè)置用戶(hù)想要訪問(wèn)的云端服務(wù)器URL，根據(jù)需要選擇輸出內(nèi)容類(lèi)型，其他參數(shù)按需配置即可。

set(global.length, msg.payloadLength)

雙擊timer節(jié)點(diǎn)，配置定時(shí)周期時(shí)長(zhǎng)，定時(shí)用filein節(jié)點(diǎn)去讀取存放HTTP響應(yīng)的數(shù)據(jù)

雙擊timer的消費(fèi)者節(jié)點(diǎn)fscript，配置filein節(jié)點(diǎn)的輸入?yún)?shù)如下

set(msg.topic,"exec:read_data");var length=global.lengthset(msg.payload,length);

雙擊filein節(jié)點(diǎn)，配置需要讀取的文件名

set(output.payload,str(msg.payload,true));

雙擊serial_out_ex節(jié)點(diǎn)，該節(jié)點(diǎn)配置參數(shù)與serial_in_ex節(jié)點(diǎn)一樣

4.2.3、下載驗(yàn)證

將該流圖下載到目標(biāo)開(kāi)發(fā)板后，在串口調(diào)試助手輸入HTTP請(qǐng)求的云端URL后，可以看到返回的響應(yīng)消息體如下。至此該實(shí)驗(yàn)到此結(jié)束。

在線(xiàn)咨詢(xún)

上一篇：c# 實(shí)現(xiàn)文件上傳下載功能的實(shí)例代碼
下一篇：滑動(dòng)頁(yè)面時(shí)的控件設(shè)計(jì)規(guī)范-吸底&錨點(diǎn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

electron開(kāi)發(fā)桌面應(yīng)用實(shí)現(xiàn)串口通信，看完你就學(xué)

么是electron

electron串口通信實(shí)現(xiàn)步驟

步驟

Demo

、項(xiàng)目簡(jiǎn)介

2、項(xiàng)目概述

3、項(xiàng)目準(zhǔn)備

3.1、硬件準(zhǔn)備

3.2、網(wǎng)絡(luò)搭建

4、項(xiàng)目實(shí)施

4.1、POST方法請(qǐng)求

4.1.1、流圖繪制

4.1.2、節(jié)點(diǎn)配置

4.1.3、本地HTTP服務(wù)器搭建

4.1.4、下載運(yùn)行

4.2、GET方法請(qǐng)求

4.2.1、流圖繪制

4.2.2、節(jié)點(diǎn)配置

4.2.3、下載驗(yàn)證

您的項(xiàng)目需求