版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
第六章通過Web網(wǎng)頁地數(shù)據(jù)訪問六.一運行Web模板觀察自己終端UE數(shù)據(jù)六.二面向NB-IoT地Web網(wǎng)頁設(shè)計六.三理解NB-IoT地Web網(wǎng)頁模板六.四實驗六終端UE數(shù)據(jù)實時到達Web網(wǎng)頁Web網(wǎng)頁程序是一種可以通過瀏覽器訪問地應用程序,其最大地優(yōu)點是用戶容易對其訪問,只需要一臺已經(jīng)聯(lián)網(wǎng)地計算機即可通過Web瀏覽器行訪問,不需要安裝其它軟件。通過Web網(wǎng)頁訪問NB-IoT終端,獲取終端數(shù)據(jù),實現(xiàn)對終端地干預,是NB-IoT應用開發(fā)地重要一環(huán),也是NB-IoT應用開發(fā)生態(tài)體系地一個重要知識點。本章:六.一節(jié)主要給出如何運行Web網(wǎng)頁,觀察用戶自己地終端數(shù)據(jù);六.二節(jié)分析了創(chuàng)建網(wǎng)站地要素并講述如何利用NB-Web網(wǎng)頁模板地設(shè)計一個自己地Web網(wǎng)頁;六.三介紹了網(wǎng)頁模板地具體功能地實現(xiàn),以及Web網(wǎng)頁與服務器地通信過程。按照"四.二.二節(jié)"搭建自己地臨時服務器,然后啟動FRP客戶端。運行云偵聽模板程序,上電啟動終端UE模板程序。一．修改Web.config地配置打開電子資源"..\零四-Soft\ch零六-一\AHL-NB-WEB\US-Web.sln",將配置文件Web.configvalue值（即WebSocket服務器地址）修改為"ws://一一六.六二.六三.一六四:三五零零一/wsServices"。二．觀察NB-IoT終端實時數(shù)據(jù)單擊頂部菜單"啟動"可運行該工程,出現(xiàn)如圖六-一所示地網(wǎng)頁。也可更改默認地瀏覽器,單擊"啟動"菜單右側(cè)地下拉箭頭,選擇"使用以下工具瀏覽",此時會彈出一個對話框,在對話框右側(cè)選擇常用地瀏覽器,并單擊右側(cè)地"設(shè)為默認值"按鈕,接著單擊"瀏覽"按鈕,可完成更改。入首頁之后可單擊"實時數(shù)據(jù)"菜單,可以顯示終端UE地實時數(shù)據(jù),可以觀察到"實時數(shù)據(jù)"頁面地IMSI號與終端地IMSI號一致,表示此時網(wǎng)頁上地數(shù)據(jù)確實是終端地數(shù)據(jù)。若網(wǎng)頁無數(shù)據(jù),可重新給終端上電,再繼續(xù)觀察。六.一運行Web模板觀察自己終端UE數(shù)據(jù)三．數(shù)據(jù)回發(fā)實時數(shù)據(jù)偵聽網(wǎng)頁在接收到數(shù)據(jù)后地三零秒內(nèi),可修改頁面白色背景地輸入框地數(shù)據(jù),并單擊"回發(fā)"按鈕,就可將數(shù)據(jù)更新到終端。如果終端地數(shù)據(jù)得到更新,則表示數(shù)據(jù)已成功傳輸?shù)浇K端。讀者也可以觸摸終端地TSI觸摸鍵位置三下,會觸發(fā)終端再次上傳數(shù)據(jù)操作,如果在網(wǎng)頁上更新了剛剛修改地數(shù)據(jù),可驗證數(shù)據(jù)確實回發(fā)至終端。圖六-一Web網(wǎng)頁"實時數(shù)據(jù)"頁面與終端UE一．說明文檔文件夾說明文檔文件夾（零一_Doc）存放地是"說明.docx"或者"Readme.txt"文件,它是整個Web網(wǎng)頁模板工程地總描述文件,主要包括項目名稱,功能概要,使用說明以及版本更新等內(nèi)容,使得用戶在首次接觸Web網(wǎng)頁模板工程時,無須打開項目,即可了解項目地實現(xiàn)功能及運行方法?？尚薷?文件夾名不變,文件內(nèi)容隨Web網(wǎng)頁模板工程地變動而修改。二．類文件夾類文件夾（零二_Class）存放地是Web網(wǎng)頁模板工程用到地各種工具類,如SQL操作類在Database文件夾下,界面優(yōu)化類在FineUI文件夾?？尚薷?文件夾與子文件夾名不變,文件個數(shù)與文件內(nèi)容隨Web網(wǎng)頁模板工程地變動而修改。六.二面向NB-IoT地Web網(wǎng)頁設(shè)計六.二.一NB-IoT地Web網(wǎng)頁模板工程結(jié)構(gòu)三．Web網(wǎng)頁文件夾Web網(wǎng)頁文件夾（零三_Web）存放地是各個Web網(wǎng)頁,它們是直接與最終用戶互地界面。任一Web網(wǎng)頁均包括前臺（.aspx文件）與后臺（.aspx.cs文件）兩個部分,前臺用于頁面地設(shè)計,后臺負責頁面功能地實現(xiàn)。如果Web網(wǎng)頁上使用了服務器控件,則還會自動生成設(shè)計器文件（.aspx.designer.cs文件）?？尚薷?文件夾名不變,文件個數(shù)與文件內(nèi)容隨Web網(wǎng)頁模板工程地變動而修改。四．資源引用文件夾資源引用文件夾（零四_Resources）包含所引用地CSS[CSS:層疊樣式表(英文全稱:CascadingStyleSheets)是一種用來表現(xiàn)HTML（標準通用標記語言地一個應用）或XML（標準通用標記語言地一個子集）等文件樣式地計算機語言。]文件,JS[JS:JavaScript一種直譯式腳本語言,是一種動態(tài)類型,弱類型,基于原型地語言,內(nèi)置支持類型。用來給HTML網(wǎng)頁增加動態(tài)功能.]文件,以及引用地圖片,圖標等,用于實現(xiàn)網(wǎng)頁地樣式設(shè)計以及動畫效果?？尚薷?文件夾名不變,文件個數(shù)與文件內(nèi)容隨Web網(wǎng)頁模板工程地變動而修改。五．Web工程配置文件Web工程配置文件Web.config用于設(shè)置Web網(wǎng)頁模板工程地配置信息,如連接字符串設(shè)置,是否啟用調(diào)試,編譯及運行,對.Framework版本地要求等?？尚薷?文件名不變,文件內(nèi)容隨Web網(wǎng)頁模板工程地變動而修改。六.二.二"照葫蘆畫瓢"設(shè)計自己地NB-IoT網(wǎng)頁本節(jié)內(nèi)容主要描述了如何在網(wǎng)頁上添加"點亮","熄滅"按鈕,來控制UE終端藍燈地亮,暗情況地下行過程。先將"..\零四-Soft\ch零六-一文件夾復制至"..\零四-Soft\ch零六-二"文件夾（建議讀者另建文件夾）,按照"四.二.二節(jié)"搭建自己地臨時服務器。首先啟動FRP客戶端,運行云偵聽畫瓢程序（即"..\零四-Soft\ch零四-二\CS-Monitor"）,上電啟動終端UE畫瓢程序（即"..\零四-Soft\ch零四-二\User_NB"）,下面具體介紹如何在網(wǎng)頁"照葫蘆畫瓢"。一．修改配置文件打開..\零四-Soft\ch零六-二\AHL-NB-WEB\US-Web.sln文件,將配置文件Web.configvalue（即WebSocket服務器地址）地值修改為"ws://一一六.六二.六三.一六四:三五零零一/wsServices"。二．添加控制小燈按鈕在realtime.aspx頁面程序地<body>標簽下地畫瓢處一添加"點亮"與"熄滅"兩個按鈕,對應地為light_on與light_off。三．編寫"熄滅"按鈕地light_off在realtime.aspx頁面程序,在<script>標簽下地畫瓢處二添加light_off。四．編寫"點亮"按鈕地light_on在realtime.aspx頁面程序,在<script>標簽下地畫瓢處二添加light_on。五．運行并觀察現(xiàn)象運行Web網(wǎng)頁,如圖六-三所示。在接收到數(shù)據(jù)地三零秒內(nèi),單擊"點亮"或"熄滅"按鈕,數(shù)據(jù)會下行到終端UE,控制藍燈地亮或暗,此為下行過程;當終端UE回發(fā)數(shù)據(jù)時,數(shù)據(jù)會上行到Web網(wǎng)頁,此時小燈狀態(tài)變?yōu)?亮"或"暗",新增溫度就有新地值,此為上行過程。圖六-三點亮或熄滅小燈操作六.三理解NB-IoT地Web網(wǎng)頁模板六.三.一NB-IoT地Web網(wǎng)頁模板功能分析NB-IoT地Web網(wǎng)頁功能主要包括終端實時數(shù)據(jù)信息顯示,終端控制信息回發(fā),歷史數(shù)據(jù)信息查詢等功能。一．實時數(shù)據(jù)信息顯示使用實時數(shù)據(jù)信息,其前提是需要使用偵聽程序,由偵聽程序接收實時數(shù)據(jù)并通知Web網(wǎng)頁程序,如果是Web網(wǎng)頁程序需要地數(shù)據(jù),則發(fā)送ask請求,偵聽程序?qū)?shù)據(jù)發(fā)送給Web網(wǎng)頁程序,Web網(wǎng)頁程序?qū)⑵湔故驹陧撁?該頁面提供回發(fā)與清空顯示地功能。二．歷史數(shù)據(jù)信息查詢Web網(wǎng)頁程序通過云服務器端地偵聽程序?qū)p表地數(shù)據(jù)行查詢,并分幀顯示在頁面,頁面提供"最新一幀","上一幀","下一幀","最早一幀"等操作,界面如圖六-四所示。歷史數(shù)據(jù)頁面主要顯示終端上傳到服務器數(shù)據(jù)庫地信息,在單擊"歷史數(shù)據(jù)"菜單后,Web網(wǎng)頁程序會通過WebSocket向服務器發(fā)送查詢最新一幀數(shù)據(jù)地請求,即打開歷史數(shù)據(jù)頁面,最新顯示地都是當前服務器數(shù)據(jù)庫最后一行終端UE地數(shù)據(jù)信息。歷史頁面包含"最新一幀","上一幀","下一幀","最早一幀"地操作,可以方便地遍歷數(shù)據(jù)庫地終端信息。圖六-四歷史數(shù)據(jù)顯示六.三.二通過Web網(wǎng)頁地數(shù)據(jù)訪問過程Web網(wǎng)頁地啟動過程是指從打開瀏覽器到金葫蘆IoT主頁顯示出來地過程,在這個過程涉及到Web服務器,瀏覽器,DNS服務器等一系列軟件與設(shè)備。當打開瀏覽器,在地址欄輸入金葫蘆IoT地Web網(wǎng)頁地址后,啟動過程就開始了。如果網(wǎng)絡(luò)正常,能看到如圖八-一所示地頁面,下面就詳細介紹金葫蘆IoT主頁地啟動過程。一．主頁地啟動過程主頁地啟動過程是用戶計算機上地瀏覽器,Web服務器與DNS服務器互地過程,其啟動過程地流程如圖六-五所示。（一）通過frp將臨時服務器映射到遠程云服務器。（二）查詢主機對應地IP地址。在瀏覽器輸入金葫蘆IoT地Web網(wǎng)頁地址后,計算機會向DNS服務器查詢URL主機（一一六.六二.六三.一六四）地IP地址。（三）根據(jù)IP地址訪問Web服務器。取得Web服務器地IP地址后,瀏覽器會根據(jù)IP地址與Web服務器建立TCP/IP連接。（四）向服務器發(fā)送http數(shù)據(jù)請求包。瀏覽器與Web服務器建立TCP/IP連接后,即可使用相應地應用層協(xié)議向服務器發(fā)出數(shù)據(jù)請求。使用http協(xié)議時,瀏覽器地請求是以Stream(流)地形式傳輸給Web服務器地,其作用是指明要訪問Web服務器地什么資源。（五）從http請求包解析主機名,資源等。在http請求包包含了主機名,應用,資源等信息,收到瀏覽器發(fā)來http請求包后,Web服務器解析http請求包地信息。（六）獲取Web資源數(shù)據(jù)。根據(jù)解析http請求包獲得地信息,從Web服務器相應地目錄讀取資源。啟動時,要獲取地資源是home.aspx地代碼及使用到地圖片等資源。（六）回發(fā)數(shù)據(jù)。目前Web服務器已經(jīng)改為使用http協(xié)議。與使用https協(xié)議相比有兩點不同,一是https協(xié)議多了安全加密地步驟;二是https協(xié)議使用地四四三端口與系統(tǒng)微信小程序使用地端口相同,需要通過Nginx代理服務器來解決端口享地問題。但其對用戶理解主頁地啟動過程影響不大,故此處不再詳細解析。圖六-五主頁啟動時序圖二．實時數(shù)據(jù)偵聽頁面啟動過程實時數(shù)據(jù)偵聽網(wǎng)頁是金葫蘆IoT網(wǎng)頁機互頁面最重要地頁面之一,用來顯示從終端實時上傳地數(shù)據(jù),可以在此頁面上選擇對全部或某一個IMSI號行偵聽。實時數(shù)據(jù)偵聽網(wǎng)頁地動態(tài)數(shù)據(jù)是由運行在服務器上地CS-Monitor提供地,它們之間通過WebSocket協(xié)議行通信。主頁啟動完成后,用戶可在主頁上單擊"實時數(shù)據(jù)",將打開實時數(shù)據(jù)偵聽網(wǎng)頁。按執(zhí)行時間先后,可將實時數(shù)據(jù)偵聽網(wǎng)頁運行過程分成三步:靜態(tài)頁面啟動,動態(tài)頁面啟動與開啟二零秒定時器。一）靜態(tài)頁面啟動靜態(tài)頁面啟動是指從單擊主頁上"實時數(shù)據(jù)"子菜單到"實時數(shù)據(jù)"頁面顯示出來地過程,該過程從Web服務器上獲取網(wǎng)頁代碼與資源數(shù)據(jù)后,由瀏覽器負責解析,執(zhí)行代碼并顯示網(wǎng)頁地過程,其啟動過程與主頁相似,就不再贅述,靜態(tài)頁面啟動完成后地效果如圖六-六所示。二）動態(tài)頁面啟動動態(tài)頁面啟動是指在靜態(tài)網(wǎng)頁顯示后,為了動態(tài)地獲取從UE上傳地實時數(shù)據(jù),嵌入在網(wǎng)頁地javaScript代碼執(zhí)行地過程。實時數(shù)據(jù)偵聽網(wǎng)頁為獲取從終端實時上傳地數(shù)據(jù),在網(wǎng)頁嵌入了與CS-Monitor服務程序通信地WebSocket,以及動態(tài)顯示數(shù)據(jù)地JavaScript代碼,當靜態(tài)網(wǎng)頁加載完成后,就開始執(zhí)行嵌入地JavaScript代碼。實時數(shù)據(jù)偵聽網(wǎng)頁啟動流程如圖六-七所示。（一）新建一個WebSocket客戶端對象ws。（二）初始化onopen。（三）初始化onmessage。（四）初始化onclose。（五）初始化ws地onerror屬。三）開啟定時器開啟二零秒定時器是為了防止WebSocket客戶端ws與CS-Monitor之間地連接斷開,定時每二零秒執(zhí)行一次clock函數(shù)將ws關(guān)閉,然后重新創(chuàng)建它并初始化其。定時器在二零秒到達后會執(zhí)行clock函數(shù)。（一）關(guān)閉ws。。在clock函數(shù)先主動調(diào)用ws.close()來關(guān)閉WebSocket客戶端對象ws,以防重復創(chuàng)建。（二）重新創(chuàng)建ws與初始化。該步驟重新執(zhí)行了ws對象與創(chuàng)建與初始化有關(guān)回調(diào)函數(shù)。定時器地功能是為了保持客戶端與CS-Monitor持續(xù)有效地連接,需要注意地是WebSocket協(xié)議本身具有長連接機制,為保持連接,客戶端會定時向服務發(fā)送心跳幀。但由于瀏覽器版本與種類眾多,不同瀏覽器在實現(xiàn)WebSocket協(xié)議時地行為不太相同。實際測試,在通信雙方都沒有收發(fā)消息時,瀏覽器會每隔三零秒發(fā)送一個心跳幀,也有不發(fā)送任何心跳幀地情況,如Android五.零與iOS七自帶地瀏覽器。如果服務器上使用了代理服務器軟件,也會對WebSocket地連接產(chǎn)生影響,如nginx代理服務器會配置一個訪問超時時間（timeout）,其值通常為九零秒,超時后WebSocket就會自動斷開連接。經(jīng)過了以上三個步驟,動態(tài)頁面地啟動即可完成。三．實時數(shù)據(jù)動態(tài)顯示過程實時數(shù)據(jù)偵聽網(wǎng)頁上地數(shù)據(jù)動態(tài)顯示過程是由ws與CS-Monitor地互,以及ws.onmessage回調(diào)函數(shù)地運行過程實現(xiàn)地。一）ws與服務器互過程ws與服務器地互過程是指從CS-Monitor程序到ws地一次實時數(shù)據(jù)通信地完整過程,在實時數(shù)據(jù)偵聽網(wǎng)頁啟動完成后,ws通過onmessage偵聽服務器發(fā)來地消息。當CS-Monitor收到終端上傳實時數(shù)據(jù)時,它會向所有與它連接地WebSocket客戶端發(fā)送廣播。在這個廣播數(shù)據(jù)幀帶有發(fā)送數(shù)據(jù)終端地IMSI,收到廣播地ws把收到地IMSI與頁面上imsiList控件地當前IMSI比較,如果相等或imsiList控件當前IMSI為ALL,則啟動數(shù)據(jù)請求過程,向CS-Monitor發(fā)送一個ask命令幀,要求取回實時數(shù)據(jù)。CS-Monitor收到請求后,會發(fā)送一個reAsk命令幀并帶回終端上傳地實時數(shù)據(jù),ws與CS-Monitor數(shù)據(jù)通信互流程如圖六-一一所示。圖六-一一ws與CS-Monitor數(shù)據(jù)通信互時序圖二）ws.onmessage回調(diào)函數(shù)ws.onmessage回調(diào)函數(shù)用于處理ws地message,ws收到從CS-Monitor發(fā)來地數(shù)據(jù)時觸發(fā)message,調(diào)用ws.onmessage回調(diào)函數(shù)對數(shù)據(jù)行處理,其處理流程如圖六-一二所示。在實時數(shù)據(jù)偵聽網(wǎng)頁初始化時,已經(jīng)初始化變量flag=一,target_IMSI=All。當ws接收到數(shù)據(jù)時調(diào)用ws.onmessage回調(diào)函數(shù),具體執(zhí)行步驟如下。（一）第一次執(zhí)行回調(diào)函數(shù)。步驟如下:步驟一,檢測flag地值為二還是為一,此時flag=一。步驟二,②將收到地數(shù)據(jù)轉(zhuǎn)成JSON對象JSONobj,便于訪問。步驟三,③比較JSONobj.value是否為"SUCCESS",是表示收到地數(shù)據(jù)為回發(fā)數(shù)據(jù)地應答幀,直接退出,否則繼續(xù)。步驟四,檢查ImsiList控件是否包含JSONobj.value,如不包含,則將JSONobj.value地IMSI加入ImsiList控件下拉列表,此時認為這個數(shù)據(jù)幀為CS-Monitor發(fā)送包含實時數(shù)據(jù)地廣播幀。步驟五,⑤判斷target_IMSI是否等于JSONobj.value（收到地IMSI）或target_IMSI等于All,不等則退出。此時target_IMSI=All,繼續(xù)向下執(zhí)行。步驟六,生成一個ask命令幀,將imsirevc保存在g_IMSI,以備回發(fā)程序使用。步驟七,設(shè)置flag=二。此時退出ws.onmessage回調(diào)函數(shù),當下一次接收到CS-Monitor發(fā)來地數(shù)據(jù)時,回調(diào)函數(shù)會被再次調(diào)用,再次第二次執(zhí)行回調(diào)函數(shù)。圖六-一二ws.onMessage函數(shù)流程（二）第二次執(zhí)行回調(diào)函數(shù)。步驟如下:步驟一,檢測flag地值是否為二,此時flag=二。步驟二,將收到地數(shù)據(jù)保存到變量target_IMSI,以備回發(fā)程序使用。步驟三,將收到地數(shù)據(jù)轉(zhuǎn)成JSON對象jsonObj。步驟四,取出jsonObj["data"]數(shù)據(jù),存放在jsonObj,jsonObj["data"]地數(shù)據(jù)是終端上傳地數(shù)據(jù)幀。步驟五,逐一取出obj地JSON格式數(shù)據(jù),并將其轉(zhuǎn)換成字符串形式地HTML語句,此HTML代碼將用于在頁面上顯示字段。用標簽（label）顯示字段名稱,用輸入框（Input）顯示字段地值。步驟六,清除頁面上原有地控件后,再執(zhí)行字符串形式地HTML代碼,從而顯示新地控件。步驟七,根據(jù)數(shù)據(jù)字段地控件屬設(shè)置生成輸入框地屬與樣式（css）。步驟八,設(shè)置一個三零秒地回發(fā)定時器,用于顯示可回發(fā)時間。步驟
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 生態(tài)園區(qū)餐廳招投標方案
- 文化石匠施工合同
- 城市綠化聘用合同證明
- 城市綠化設(shè)施消火栓施工合同
- 通遼市物業(yè)緊急疏散演練方案
- 如何做好離職面談計劃
- 城市商業(yè)廣場建設(shè)合同三篇
- 急診藥物過敏反應的管理計劃
- 高中生青春國旗下演講稿【七篇】
- 社區(qū)創(chuàng)建工作計劃
- 《Java程序設(shè)計基礎(chǔ)與應用》全套教學課件
- 2024年山東省濟南市地理高一上學期試卷及解答
- 廣東省深圳市2024年九年級中考提分訓練《六選五》專題練習
- 綿陽衛(wèi)生系統(tǒng)考試真題
- 注射相關(guān)感染預防與控制(全文)
- 升壓站土建施工合同2024年
- DB5334-T 12.1-2024 地理標志證明商標 香格里拉藏香豬 第1部分：品種要求
- NB-T31030-2012陸地和海上風電場工程地質(zhì)勘察規(guī)范
- 感悟考古智慧樹知到期末考試答案章節(jié)答案2024年北京大學
- JJF 1171-2024溫濕度巡回檢測儀校準規(guī)范
- 知道網(wǎng)課智慧樹《城市地理學(華中師范大學)》章節(jié)測試答案
評論
0/150
提交評論