整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程序
只要你會javascript html css 就可以構建自己想要做的PC桌面和MACos app 應用，是不是很強大。
今天的重點是通過它來實現串口通信的功能，想要實現這部分功能不得不做些準備工作
下面跟我一步一步的來操作吧
想構建electron 必須要有支持的基礎環境，node 和 npm
node想必大家并不陌生，前端的小伙伴太熟悉不過了，Node.js 就是運行在服務端的 JavaScript
檢測你的電腦環境中是否安裝了node.js
檢測是否安裝node，的命令是
node -v我這里是win10 開發環境
打開命令行工具
我這里已經安裝過了，看到有版本信息v10.16.1 說明已經安裝成功
接下來再檢查下是否安裝了npm 工具
npm -v我這里也已經安裝了npm ,顯示版本6.9.0
有的同學小伙伴不知道npm是什么
PS：是nodejs內置的軟件包管理器, 在項目開發中，需要用到說明包就拿這個下載就行了，下面有介紹
好了，有了基礎的環境，我們就開始構建一個桌面程序吧
在工作的根目錄創建一個文件夾eletest
在創建一個普通的index.html 文件，這樣就有了一個基本的前端界面,electron 在node.js基礎上構建的，下面是應用的基本目錄結構，我們已經創建了index.html
eletest/
├── package.json
├── main.js
└── index.htmlmian.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()
}
})
這里的方法 函數不在過多的解釋了，復制代碼到你創建的main.js中去就可以了，也可以去electron文檔中查看對應的API
package.json 這是一個包構建信息的文件 在eletest文件下運行命令
npm init -y就會自動生成package.json文件 ，是不是很簡單啊
要想運行你寫的hml界面 打開這個文件修改一處
"scripts": {
"start": "electron ."
},這樣就完成了幾個基本的配置
下面安裝electron 包了 運行命令
npm i --save-dev electron你的運行結果和上面的圖片里的信息說明就成功安裝了electron 默認安裝的最新穩定的依賴包
前期的工作都做完了，來運行它，看看是否出現我們想要的界面
運行命令
npm starthello world! 是不是很熟悉，很驚喜，很意外。
出現了平時我們打開windows應用窗口
以上步驟都是構建一個electron的桌面應用的，串口是如何實現的呢？
如果你不熟悉串口是說明，先去補補串口的基本概念和相關信息
串口、COM口是指的物理接口形式(硬件)
你也可以打開設備管理器看到相應的串口，我這里有COM11和COM10 ，串口是成對出現的
了解了說明是串口后，來實現我們的應用串口通信吧
運行命令
npm install serialport出現serialport 的版本信息 說明已經安裝成功
electron 通信或者一些交互都是在node上完成的
查看了文檔后 我們可以在html頁面上
引入serialport包
設置要監聽的串口端口 比如COM11
配置寫端口基本信息
serialPost.on 接收發過來的信息，如果在控制臺上打印出信息，就說明串口通信成功
再次運行electron npm start
打印控臺看到 信息：打印端口成功，正在監聽數據中，就說明實現了串口的通信最重要一部打開通道
為了驗證是否能通信，我們找個串口精靈 發送一寫信息 ，再次看控制臺收到了發送的信息
如圖 在測試串口工具中輸入aaaa, 運行的控制臺收到了aaaa ，說明已經成功實現串口通信。
是不是很簡單，是不是很驚喜，是不是你在今后項目當中有需要串口通信的就可以復制粘貼了。
avaScript本身不提供直接訪問串口的功能。然而，可以使用Web API和JavaScript與串口進行通信，一般需要在瀏覽器環境中進行。
const port=await navigator.serial.requestPort();await port.open({ baudRate: 9600 });使用Web Serial API進行串口通信需要在瀏覽器環境中運行，并且通常需要用戶授權。不是所有瀏覽器都支持Web Serial API，而且它主要用于Web應用程序，而不是傳統的本地JavaScript應用程序。
// 請求串口訪問權限
async function requestSerialAccess() {
try {
const port=await navigator.serial.requestPort();
await port.open({ baudRate: 9600 }); // 打開串口連接
// 讀取數據
const reader=port.readable.getReader();
while (true) {
const { value, done }=await reader.read();
if (done) {
break;
}
// 處理從串口讀取的數據
console.log(value);
}
// 關閉串口連接
await port.close();
} catch (error) {
console.error("Error:", error);
}
}
// 添加事件監聽器，用于在用戶點擊按鈕時請求串口訪問權限
const connectButton=document.getElementById("connect-button");
connectButton.addEventListener("click", requestSerialAccess);首先我們創建了一個函數requestSerialAccess()，它請求串口訪問權限，打開串口連接，然后使用一個循環來不斷讀取數據，將數據輸出到控制臺。最后，它在完成后關閉串口連接。
HTTP協議是互聯網應用最為廣泛的一種網絡協議，由客戶端發送請求消息，服務端針對客戶端的請求進行響應回復。本文將基于EsDA開發平臺，使用EPC6450-AWI開發板，以及圖形化設計工具AWFlow Designer實現將串口數據轉換為HTTP請求發送給云端，隨后云端針對HTTP請求進行處理響應的功能。該項目主要用到了serial_in_ex，fscript，http_request，fileout，timer，filein和serial_out_ex節點，具體實現請見下文。
該項目是將串口數據通過作為HTTP客戶端的EPC6450-AWI開發板去發送HTTP請求到云端服務器，在云端服務器上處理HTTP請求并下發響應數據。
該項目的主要步驟如下：
1、配置EPC6450-AWI的網口設備并連接到互聯網
2、配置串口通信參數，包括波特率，數據位，停止位和校驗等
3、從串口讀取HTTP請求參數，在本項目中串口的輸入數據如下：POST方法主要是輸入body消息正文，GET方法主要是輸入url統一資源定位符
4、http_request節點向云端服務器發起HTTP請求，云端服務器處理數據后發送響應到客戶端，客戶端接收來自云端服務器的響應數據
5、HTTP客戶端接收響應數據后，將響應數據中轉到文本中保存并輸出到串口進行顯示
在本文將不再贅述串口設備在EsDA的基礎通信，讀者可以閱讀以下文章對串口節點和EsDA的一些基礎項目進行熟絡：
【EsDA應用】5分鐘實現一個串口通信業務
【EsDA 應用】常用IO設備節點詳解
EsDA MPC-ZC1應用——串口服務器（一）
在標有絲印為TF Card 絲印的卡槽處，插入SD卡
用戶可隨機選擇EPC6450-AWI的可用串口設備，在本文將用UART5進行串口通信。在標有絲印為UTX5,URX5的串口模塊上，將TTL轉USB串口模塊的TX與板子絲印為URX5連接，TTL轉USB串口模塊的RX與板子絲印為UTX5相連；并將TTL轉USB串口模塊另一端的USB
口接入電腦
在標有絲印為Type-C 的接口處，插上Type-C線，并將Type-C線的另一端USB口插入電腦
在標有絲印為NET0 或 NET1的RJ45插座處接上水晶頭，網線另一端水晶接頭插在PC的網絡插座上
本文的網絡搭建是將電腦wifi通過以太網與開發板進行網絡共享，以此達到開發板的以太網口聯網的目的
將TTL轉USB串口模塊接在絲印為DUART的調試串口上(TX接RX，RX接TX)
打開串口調試助手，檢索并打開TTL轉USB串口模塊的設備端口號后，使用shell命令ip addr，查看網口的ip地址，根據下圖可知，本文使用的網口設備ip地址是192.168.137.251
配置PC上的以太網的IP與開發板的IP地址在同一局域網下
將PC上的WLAN配置共享給與開發板連接的以太網
在串口調試助手輸入shell指令ping www.baidu.com，ping成功即開發板聯網成功
本項目業務主要分為兩個部分：
POST方法請求項目：模擬傳感器數據通過串口轉HTTP客戶端傳送到HTTP服務器，服務器進行數據分析和處理。將串口數據作為HTTP請求的body參數，http_request節點在整理屬性和輸入參數后對自建的HTTP服務器發起POST方法的HTTP請求；服務器收到請求后，將串口數據保存到本地的文本文件以便后續查看，下發響應數據給客戶端；客戶端收到服務器的響應數據經過數據處理后打印到串口助手的界面進行查看。
GET方法請求項目：請求訪問百度服務器。串口提供HTTP請求參數，http_request節點整理屬性和輸入參數對百度服務器發起GET方法的HTTP請求；http_request節點接收來自百度服務器的響應數據，將數據保存到指定的文本文件中存儲再從文本中將數據輸出到串口助手的界面上。
本項目由串口助手模擬將采集的傳感器數據通過開發板的串口傳輸到開發板創建的HTTP客戶端，HTTP客戶端再通過POST方法將傳感器數據作為body參數去請求本地搭建的HTTP服務器，HTTP服務器接收到請求后，將傳感器數據存儲到本地的index.html文件中，并將數據處理后作為響應體回發給客戶端，HTTP客戶端接收到響應消息后打印到串口助手上進行顯示。
添加serial_in_ex，fscript，http_request，fileout，timer，filein和serial_out_ex節點到畫布中并連線如下圖。
在本文的serial_in_ex和serial_out_ex節點配置參數和操作一致，后面不再贅述serial_out_ex節點的配置操作。雙擊serial_in_ex節點，點擊配置節點名旁邊的鉛筆圖標。
選擇用戶使用的串口設備，根據實際需求配置波特率，奇偶校驗等串口配置參數，本項目中的串口配置參數如下圖所示。
雙擊serial_in_ex的消費者節點fscript，因為本項目主要是將采集到的傳感器數據作為消息體參數發送到HTTP服務器進行處理，所以該fscript主要是將讀取到的serial_in_ex串口數據賦值給http_request節點的body參數如下：
msg.body=istream_read_string(msg.istream, 100)
雙擊http_request節點，配置方法為POST，并設置用戶想要訪問的HTTP服務器URL(這里的HTTP服務器是筆者本地用python搭建的一個簡易HTTP服務器)，根據需要選擇輸出的內容類型，其他參數按需配置即可。
雙擊http_request節點的消費者節點fscript，該節點主要是存儲http_request節點的輸出參數msg.payloadLength，用于后續賦值給filein節點的輸入參數讀取的數據長度。
set(global.length, msg.payloadLength)
雙擊fileout節點，配置屬性參數如下，在本項目中配置文件打開模式為從頭寫入且丟棄源文件內容，文件名選擇開發板上自動掛載的/flow目錄下的文件，數據來源選擇payload形式。
雙擊timer節點，配置定時周期時長，定時用filein節點去讀取存放HTTP響應的數據
雙擊timer的消費者節點fscript，配置filein節點的輸入參數如下
set(msg.topic,"exec:read_data");var length=global.lengthset(msg.payload,length);
雙擊filein節點，配置需要讀取的文件名
雙擊filein的消費者節點fscript，該節點主要將從filein節點讀取到的數據轉換給serial_out_ex節點
set(output.payload,str(msg.payload,true));
雙擊serial_out_ex節點，該節點配置參數與serial_in_ex節點一樣
筆者用python腳本搭建了一個簡易的HTTP服務器，主要功能是收到的POST請求中的消息體數據存儲到本地的index.html文本中，并將收到的消息體數據處理后作為響應體回發給客戶端。在PC端執行以下http_server.py的腳本即開啟了本地的HTTP服務端。
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()
將流圖下載到目標開發板后，在串口調試助手輸入HTTP請求的消息體(模擬的傳感器數據)后，就可以在串口助手輸出界面看到返回的響應內容如下：
本地的HTTP服務器端收到的來自客戶端的請求信息如下：
打開PC本地的index.html文本，可以看到保存的傳感器數據如下：
至此，串口轉HTTP客戶端的傳感器數據上云的實驗就已完全結束，接下來開啟訪問百度游覽器的HTTP請求實驗。
該項目主要是通過GET方法請求百度服務器，最后將百度服務器響應的消息進行打印顯示，主要是將串口數據轉換為HTTP請求，發送到服務器端，以實現與遠程服務器的通信。
添加serial_in_ex，fscript，http_request，fileout，timer，filein和serial_out_ex節點到畫布中并連線如下圖。
在本文的serial_in_ex和serial_out_ex節點配置參數和操作一致，后面不再贅述serial_out_ex節點的配置操作。雙擊serial_in_ex節點，點擊配置節點名旁邊的鉛筆圖標。
選擇用戶使用的串口設備，根據實際需求配置波特率，奇偶校驗等串口配置參數，本項目中的串口配置參數如下圖所示。
雙擊serial_in_ex的消費者節點fscript，因為本項目主要是對HTTP協議的GET方法進行數據請求，而GET的請求參數是拼接在URL的后面，所以串口輸入的主要是http_request節點的URL配置項，該fscript主要是讀取serial_in_ex的串口數據，如下：
var str=istream_read_string(msg.istream, 100)msg.url=str
雙擊http_request節點，配置方法為GET，并設置用戶想要訪問的云端服務器URL，根據需要選擇輸出內容類型，其他參數按需配置即可。
雙擊http_request節點的消費者節點fscript，該節點主要是存儲http_request節點的輸出參數msg.payloadLength，用于后續賦值給filein節點的輸入參數讀取的數據長度。
set(global.length, msg.payloadLength)
雙擊fileout節點，配置屬性參數如下，在本項目中配置文件打開模式為從頭寫入且丟棄源文件內容，文件名選擇開發板上自動掛載的/flow目錄下的文件，數據來源選擇payload形式。
雙擊timer節點，配置定時周期時長，定時用filein節點去讀取存放HTTP響應的數據
雙擊timer的消費者節點fscript，配置filein節點的輸入參數如下
set(msg.topic,"exec:read_data");var length=global.lengthset(msg.payload,length);
雙擊filein節點，配置需要讀取的文件名
雙擊filein的消費者節點fscript，該節點主要將從filein節點讀取到的數據轉換給serial_out_ex節點
set(output.payload,str(msg.payload,true));
雙擊serial_out_ex節點，該節點配置參數與serial_in_ex節點一樣
將該流圖下載到目標開發板后，在串口調試助手輸入HTTP請求的云端URL后，可以看到返回的響應消息體如下。至此該實驗到此結束。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
