7.4鴻蒙APP端開(kāi)發(fā)本章主要講述分布式倉(cāng)庫(kù)環(huán)境監(jiān)測(cè)項(xiàng)目鴻蒙APP端開(kāi)發(fā)。通過(guò)學(xué)習(xí)本節(jié)將能夠了解分布式倉(cāng)庫(kù)環(huán)境監(jiān)測(cè)項(xiàng)目鴻蒙APP端開(kāi)發(fā)。通過(guò)本節(jié)學(xué)習(xí)可以熟悉：鴻蒙APP端TCP編程鴻蒙APP端UDP編程鴻蒙APP端主程序編程鴻蒙APP端TCP編程鴻蒙APP端UDP編程鴻蒙APP端主程序編程鴻蒙APP端開(kāi)發(fā)(1/8)

首先在DevEcoStudio基于EmptyAbility模板創(chuàng)建IoTFactoryApp工程，并將資源圖片文件復(fù)制至工程資源目錄下的media子文件夾中，然后為工程增加網(wǎng)絡(luò)訪問(wèn)權(quán)限。修改工程configuration目錄下的module.json5配置文件，在第15行插入以下內(nèi)容：

"requestPermissions":[{

"name":"ohos.permission.INTERNET"

}],鴻蒙APP端TCP編程(2/8)

在工程的pages源碼目錄下創(chuàng)建socketComponent文件夾，并在該文件夾內(nèi)創(chuàng)建IoTTcpClient.ets源文件。將TCP客戶(hù)端通信功能封裝為IoTTcpClient類(lèi)，并實(shí)現(xiàn)將ArrayBuffer類(lèi)型的TCP數(shù)據(jù)轉(zhuǎn)換成字符串的函數(shù)。源文件關(guān)鍵函數(shù)代碼：exportclassIoTTcpClient{//1.創(chuàng)建TCP通信對(duì)象，與網(wǎng)絡(luò)協(xié)議棧建立聯(lián)系privatetcp:socket.TCPSocket=socket.constructTCPSocketInstance();//當(dāng)創(chuàng)建對(duì)象需傳入?yún)?shù)：

服務(wù)器IP地址、端口號(hào)、接收數(shù)據(jù)的回調(diào)函數(shù)、TCP連接的回調(diào)函數(shù)、TCP斷開(kāi)的回調(diào)函數(shù)constructor(serverIP:string,serverPort:number,tcpRcvCb:Callback<socket.SocketMessageInfo>,tcpConnectCb:AsyncCallback<void>,tcpCloseCb:Callback<void>){//2.綁定使用端口號(hào)this.tcp.bind(addr,(err:BusinessError)=>{//設(shè)置當(dāng)接收到TCP數(shù)據(jù)時(shí)，觸發(fā)調(diào)用的回調(diào)函數(shù)鴻蒙APP端TCP編程(3/8)//設(shè)置當(dāng)接收到TCP數(shù)據(jù)時(shí)，觸發(fā)調(diào)用的回調(diào)函數(shù)this.tcp.on('message',tcpRcvCb);//設(shè)置當(dāng)TCP通信斷開(kāi)時(shí)，觸發(fā)調(diào)用的回調(diào)函數(shù)this.tcp.on('close',tcpCloseCb);//3.連接服務(wù)器端，并設(shè)置當(dāng)連接成功時(shí)觸發(fā)調(diào)用的回調(diào)函數(shù)this.tcp.connect(connOpts,tcpConnectCb);//4.發(fā)送數(shù)據(jù)asyncsendData(s:string){letopts:socket.TCPSendOptions={data:s};this.tcp.send(opts);}//5.關(guān)閉TCP通信close(){this.tcp.close();

鴻蒙APP端TCP編程(4/8)//ArrayBuffer轉(zhuǎn)換成字符串exportfunctionarrayBufToString(buffer:ArrayBuffer):string{letdataView:DataView=newDataView(buffer);letstr="";for(leti=0;i<dataView.byteLength;++i){str+=String.fromCharCode(dataView.getUint8(i));}returnstr;}鴻蒙APP端TCP編程(5/8)在Index頁(yè)面上進(jìn)行簡(jiǎn)單的測(cè)試。在Index頁(yè)面上實(shí)現(xiàn)在頁(yè)面初始化時(shí)連接TCP服務(wù)器以設(shè)置回調(diào)函數(shù)，點(diǎn)擊按鈕時(shí)發(fā)出TCP數(shù)據(jù)，并在Text組件上顯示接收到的數(shù)據(jù)。關(guān)鍵函數(shù)代碼：structIndex{@Statemessage:string='HelloWorld';privatetcp?:IoTTcpClient;//接收處理的回調(diào)函數(shù)privatetcpRcvCb=async(sInfo:socket.SocketMessageInfo)=>{lets=arrayBufToString(sInfo.message);//將ArrayBuffer轉(zhuǎn)成字符串//連接成功后的回調(diào)函數(shù)privatetcpConnectCb=async()=>{this.tcp?.sendData("hellofromclient");//連接成功后發(fā)出數(shù)據(jù)}

鴻蒙APP端TCP編程(6/8)aboutToAppear():void{//創(chuàng)建TCP通信對(duì)象，并指定服務(wù)器的IP地址、端口號(hào)、接收數(shù)據(jù)的回調(diào)函數(shù)、連接的回調(diào)函數(shù)、連接斷開(kāi)的回調(diào)函數(shù)this.tcp=newIoTTcpClient("",10086,this.tcpRcvCb,this.tcpConnectCb,this.tcpCloseCb);}build(){Column(){Text(this.message)Button('Send').onClick(()=>{//點(diǎn)擊按鈕時(shí)發(fā)出數(shù)據(jù)this.tcp?.sendData("hellotcpClient");})

鴻蒙APP端TCP編程(7/8)在PC上通過(guò)Socket調(diào)試工具設(shè)立TCPServer，然后進(jìn)行通信測(cè)試。Socket調(diào)試工具測(cè)試輸出:鴻蒙APP端TCP編程(8/8)App端程序測(cè)試效果:鴻蒙APP端TCP編程鴻蒙APP端UDP編程鴻蒙APP端主程序編程鴻蒙APP端UDP編程(1/2)

將此第5章IoTUdp.ets源文件復(fù)制至項(xiàng)目工程的socketComponent文件夾中，然后修改Index.ets源文件，實(shí)現(xiàn)當(dāng)頁(yè)面初始化時(shí)創(chuàng)建IoTUdp對(duì)象與指定UDP接收處理的回調(diào)函數(shù)，然后發(fā)出掃描設(shè)備的命令，在接收回調(diào)函數(shù)中由數(shù)組記錄回復(fù)的設(shè)備端IP地址，然后在Index頁(yè)面中由List組件顯示在線設(shè)備端的IP地址。Index.ets源文件關(guān)鍵代碼：structIndex{

privateboradcastIP:string="55";//設(shè)備端的UDP廣播地址

privateport:number=10086;//設(shè)備端的UDP端口號(hào)

@StatedevIPList:Array<string>=[];//由動(dòng)態(tài)數(shù)組記錄所有設(shè)備端的IP地址、端口號(hào)信息

privateudp?:IoTUdp;//用于掃描設(shè)備的UDP通信對(duì)象

//UDP接收的回調(diào)函數(shù)

private

udpRcvCallback=async(sInfo:socket.SocketMessageInfo)=>{

letstr=

arrayBufToString(sInfo.message);

//當(dāng)設(shè)備端回"iamDev"則表示成功掃描到一個(gè)設(shè)備端

//在動(dòng)態(tài)數(shù)組中記錄設(shè)備端IP地址鴻蒙APP端UDP編程(2/2)aboutToAppear():void{//創(chuàng)建UDP通信對(duì)象，并設(shè)置接收處理的回調(diào)函數(shù)this.udp=newIoTUdp(0,this.udpRcvCallback);//頁(yè)面初始化時(shí)發(fā)出掃描設(shè)備端的命令this.udp.sendData("scanningDev",this.boradcastIP,this.port);}build(){Column(){List(){ForEach(this.devIPList,(ip:string)=>{ListItem(){Text(ip).fontSize(25)}鴻蒙APP端TCP編程鴻蒙APP端UDP編程鴻蒙APP端主程序編程鴻蒙APP端主程序編程(1/8)

主要實(shí)現(xiàn)：當(dāng)App打開(kāi)時(shí)通過(guò)UDP廣播發(fā)出掃描設(shè)備的命令，獲取在線的所有設(shè)備端，并記錄它們的IP地址與端口號(hào)。然后，在List列表中展示每個(gè)設(shè)備端的頁(yè)面組件。在設(shè)備頁(yè)面組件內(nèi)部，通過(guò)TCP協(xié)議與設(shè)備端的TCP服務(wù)器建立連接，并定期向設(shè)備發(fā)送傳感器數(shù)據(jù)更新的指令，將接收到的傳感器數(shù)據(jù)實(shí)時(shí)展示在對(duì)應(yīng)的組件上，同時(shí)提供控制按鈕以打開(kāi)或關(guān)閉設(shè)備端的布防狀態(tài)。

鴻蒙APP端主程序編程(2/8)

在工程的pages目錄下創(chuàng)建customeUIComponent文件夾，并在此文件夾中創(chuàng)建IoTDeviceUI.ets源文件，在此源文件中設(shè)計(jì)每個(gè)傳感器通用的IoTDeviceSensorUI組件，組件的關(guān)鍵代碼：exportstructIoTDeviceSensorUI{

privateimgSrc:ResourceStr='';//記錄傳感器圖像

privatesName:string='';//記錄傳感器名稱(chēng)

@Propval:string='';//綁定一個(gè)狀態(tài)變量，val的值跟隨此狀態(tài)變量變化

build(){

Row({space:10}){

Image(this.imgSrc)//圖像組件描述

Text(this.sName).fontSize(18)//傳感器名稱(chēng)組件描述

//傳感器值組件描述

Text(this.val).fontSize(18).fontWeight(FontWeight.Bold)鴻蒙APP端主程序編程(3/8)

接著customUIComponent文件夾中創(chuàng)建操作每個(gè)設(shè)備端的IoTDeviceUI.ets頁(yè)面組件源文件。源文件中實(shí)現(xiàn)在組件初始化時(shí)TCP連接設(shè)備端，在組件退出時(shí)斷開(kāi)TCP連接，并通過(guò)定時(shí)器定時(shí)向設(shè)備端發(fā)出傳感器數(shù)據(jù)更新命令，根據(jù)設(shè)備端返回的傳感器數(shù)據(jù)更新組件與實(shí)現(xiàn)布防開(kāi)關(guān)的控制功能。IoTDeviceUI.ets關(guān)鍵代碼：exportstructIoTDeviceUI{//屬性成員：記錄設(shè)備端的IP地址

設(shè)備端的端口號(hào)TCP通信對(duì)象//State變量：人體感應(yīng)數(shù)據(jù)

煙霧數(shù)據(jù)

濕度數(shù)據(jù)

溫度數(shù)據(jù)

記錄TCP客戶(hù)端是否在線//tcp接收的回調(diào)函數(shù)privatetcpRcvFunc=async(sInfo:socket.SocketMessageInfo)=>{//根據(jù)通信協(xié)議獲取傳感器數(shù)據(jù)并更新State變量值}//TCP連接成功后觸發(fā)的回調(diào)函數(shù)privatetcpConnectFunc=async()=>{//創(chuàng)建定時(shí)器，每隔3秒向設(shè)備端發(fā)出傳感器數(shù)據(jù)的更新命令}鴻蒙APP端主程序編程(4/8)/TCP斷開(kāi)連接后觸發(fā)的回調(diào)函數(shù)privatetcpCloseFunc=()=>{//關(guān)閉定時(shí)器}aboutToAppear():void{//當(dāng)頁(yè)面組件將要出現(xiàn)時(shí)觸發(fā)執(zhí)行的函數(shù)//創(chuàng)建TCP通信對(duì)象this.tcpClient=newIoTTcpClient(this.sIP,this.port,this.tcpRcvFunc,this.tcpConnectFunc,this.tcpCloseFunc);}//當(dāng)頁(yè)面將要銷(xiāo)毀或隱藏時(shí)觸發(fā)執(zhí)行的函數(shù)aboutToDisappear():void{

關(guān)閉TCP通信}鴻蒙APP端主程序編程(5/8)build(){Column({space:10}){...//分別以四個(gè)傳感器組件呈現(xiàn)濕度、溫度、煙霧、人體傳感器的數(shù)據(jù)IoTDeviceSensorUI({imgSrc:$r('app.media.humidity'),sName:'相對(duì)濕度:',val:this.humidity})IoTDeviceSensorUI({imgSrc:$r('app.media.temperature'),sName:'相對(duì)溫度:',val:this.temperature})IoTDeviceSensorUI({imgSrc:$r('app.media.smoke'),sName:'煙霧濃度:',val:this.smoke})IoTDeviceSensorUI({imgSrc:$r('app.media.user2'),sName:'人體感應(yīng):',val:this.human})鴻蒙APP端主程序編程(5/8)//照明燈器控制Row({space:10}){Image($r('app.media.alarm')).width(40).height(40)//按鈕圖像組件描述Text('布防開(kāi)關(guān)').fontSize(18)//按鈕文字組件描述Toggle({type:ToggleType.Switch})//按鈕開(kāi)關(guān)組件描述.onChange((isOn:boolean)=>{/*手機(jī)端發(fā):"cmdDev:guardOn",設(shè)備端回復(fù)"dataDev:guardOn"

手機(jī)端發(fā):"cmdDev:guardOff",設(shè)備端回復(fù)"dataDev:guardOff"*/