上篇文中模擬了網(wǎng)頁(yè)版實(shí)時(shí)通訊，通過(guò)客戶端與服務(wù)器的連接，體驗(yàn)了基于socket的長(zhǎng)連接，本次通過(guò)移動(dòng)端開(kāi)發(fā)模擬微信App的通信；

實(shí)時(shí)雙向通訊的3種方式：

1：ajax輪詢(xún)：持續(xù)發(fā)送請(qǐng)求

2：Long?pull：循環(huán)，阻塞，等待客戶端返回，建立HTTP鏈接，耗費(fèi)資源

3：websocket：H5提出的，基于Http的長(zhǎng)連接，

通常請(qǐng)求與響應(yīng)一一對(duì)應(yīng)

而websocket是主動(dòng)，建立一次，源源不斷的保持連接

websocketApi

連接到后端

var?socket=new Websokcet（"ws://[ip]:[port]"）

生命周期：

onopen（）---onmessage--onerror--onclose（）

主動(dòng)方法

Socket.send()? ?Socket.close()

首先搭建移動(dòng)端頁(yè)面，通過(guò)工具Hbuilder建立，軟件自行下載：

http://www.dcloud.io/

Hbuilder跟HbuiderX相比，x更快，更穩(wěn)定，我自己電腦常常出現(xiàn)Hbuilder運(yùn)行出錯(cuò)的情況，而X就沒(méi)出現(xiàn)過(guò)，頁(yè)面類(lèi)似idea的運(yùn)行頁(yè)面，清晰，簡(jiǎn)潔，智能

新建項(xiàng)目-->移動(dòng)App-->mui項(xiàng)目

打開(kāi)首頁(yè)index.html

運(yùn)行此頁(yè)面------谷歌瀏覽器

在body部分填入快捷鍵mh

打開(kāi)瀏覽器調(diào)試：

字體和背景顏色設(shè)置--

css文件下新建hearder.css文件

在link標(biāo)簽快捷鍵引入路徑

刷新瀏覽器便可達(dá)到此效果

這里既然是移動(dòng)端聯(lián)調(diào)Netty，需要進(jìn)行移動(dòng)端的基座聯(lián)調(diào)

點(diǎn)擊箭頭如上，如果沒(méi)有此頁(yè)面，打開(kāi)Android手機(jī)開(kāi)發(fā)者選項(xiàng)，打開(kāi)usb調(diào)試連接，運(yùn)行調(diào)試基座

如果不能安裝可私信我聯(lián)調(diào)

模擬下微信頁(yè)面，對(duì)于底部狀態(tài)欄的tab顯示

首先在init下方引入mui.plusReady()，設(shè)置背景顏色與字體顏色

mui.init();

? ? ? mui.plusReady(function(){

? ? ? plus.navigator.setStatusBarBackground("red");

? ? ? plus.navigator.setStatusBarStyle("light");

? ? ? })

body頁(yè)面引入底部tab，快捷鍵mhb，經(jīng)過(guò)字體與class樣式調(diào)試實(shí)現(xiàn)頁(yè)面如下(這里在下文的kk頁(yè)面加入了火鍋的圖標(biāo)

)：

下面我們進(jìn)行字體設(shè)置

打開(kāi)http://www.iconfont.cn，進(jìn)行字體及樣式的選擇，加入收藏，下載到本地解壓，引入到項(xiàng)目

index引入css，在header引入class

然后再每個(gè)頁(yè)面打開(kāi)的時(shí)候進(jìn)行內(nèi)容顯示：建立聊天記錄，通訊錄，等頁(yè)面建立

里面內(nèi)容只填寫(xiě)標(biāo)題即可

然后實(shí)現(xiàn)頁(yè)面的切換

定義數(shù)組，把每個(gè)頁(yè)面id引入

var kkArray = [{

pageId: "kk-chartlist.html",

pageUrl: "kk-chartlist.html"

},

{

pageId: "kk-connect.html",

pageUrl: "kk-connect.html"

},

{

pageId:"kk-discover.html",

pageUrl: "kk-discover.html"

},

{

pageId: "kk-myself.html",

pageUrl: "kk-myself.html"

}

];

在頁(yè)面初始化時(shí)加載

mui.plusReady(function() {

//當(dāng)前webview對(duì)象

var indexWebView = plus.webview.currentWebview()

for(var i = 0; i < kkArray.length; i++) {

var kkpage = plus.webview.create(kkArray[i].pageUrl, kkArray[i].pageId, kkStyle);

//隱藏頁(yè)面

kkpage.hide();

//追加子頁(yè)面

indexWebView.append(kkpage);

}

plus.webview.show(kkArray[0].pageId);

//批量綁定tap事件

mui(".mui-bar-tab").on("tap", "a", function() {

var tabindex = this.getAttribute("tabindex");

//顯示點(diǎn)擊tab選項(xiàng)所對(duì)應(yīng)頁(yè)面

plus.webview.show(kkArray[tabindex].pageId, "fade-in", 200);

for(var i = 0; i < kkArray.length; i++) {

if(i != tabindex) {

//隱藏

plus.webview.hide(kkArray[i].pageId, "fade-out", 200);

}

}

})??

})

這是進(jìn)行聯(lián)機(jī)調(diào)試，發(fā)現(xiàn)頁(yè)面無(wú)法顯示，因?yàn)樽煮w原因，需要對(duì)底部的top進(jìn)行樣式設(shè)置

var kkStyle = {

top: "44px",

bottom: "50px"

}

在header.css頁(yè)面加入

進(jìn)行聯(lián)機(jī)測(cè)試，這個(gè)時(shí)候的瀏覽器端是無(wú)法感知的，只能進(jìn)行app端調(diào)試

最終效果：

聲明：本公眾號(hào)所有文章均為參考網(wǎng)上資料手寫(xiě)編制，如有侵權(quán)請(qǐng)聯(lián)系刪除，意在記錄開(kāi)發(fā)過(guò)程，不作為商業(yè)用途；

文末:關(guān)注公眾號(hào)回復(fù)送書(shū)，免費(fèi)獲取

《Springcloud與Docker微服務(wù)架構(gòu)實(shí)戰(zhàn)》電子版書(shū)籍?

有效期7天

回復(fù)Netty獲取

《Netty權(quán)威指南》電子版書(shū)籍?

歡迎投稿，指正

本文使用 文章同步助手 同步