??想了解更多關于開源的內容,請訪問:??
??51CTO開源基礎軟件社區??
??https://ost.51cto.com??
(相關資料圖)
如果要實現像微信聊天一樣的功能,在組網內進行通信顯然是不夠的,所以軟總線并不作用與這種遠距離傳輸。如果我們要完成微信的聊天功能,傳統的方法就是利用webSocket借助服務器進行全雙工通信。
WebSocket是什么?WebSocket 是 一種在單個 TCP 連接上進行全雙工通訊的網絡通信協議。
在以前沒有webSocket的時候,大家都用HTTP協議進行網絡通信,但是HTTP協議是一個無狀態,無連接,單向的應用層協議,因此只能讓客戶端對服務端進行單向請求,服務端無法主動向客戶端發送消息,導致了像實時聊天這種業務開展起來比較困難。
有開發者就使用HTTP進行長輪詢的方案,也就是說需要HTTP在一段時間內必須一直保持連接請求,以獲取最新的服務器的消息。這樣顯然效率低下,而且非常浪費資源。
因此就誕生了WebSocket,只需要進行一次連接,就可以一直保持全雙工的通信狀態。
Demo展示下面我們就來用官方提供的WebSocket接口實現一個簡易實時聊天室的Demo。效果如下:
代碼實現可以看到官方文檔的接口說明,我們只需要簡單用到幾個接口就可以實現我們的業務需求了。
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/websocket-connection-0000001333321005。
1、申請網絡權限在config.json文件里面注冊網絡權限,該權限允許程序打開網絡套接字,進行網絡連接。
"reqPermissions": [ { "name": "ohos.permission.INTERNET" }]2、導入webSocket模塊
import webSocket from "@ohos.net.webSocket";3、創建webSocket對象
接著我們調用createWebSocket()接口生成一個webSocket對象,并且保存起來。
let ws = webSocket.createWebSocket();4、連接webSocket通道
調用connect()接口進行連接。這里需要一個URL作為參數傳入,在這個demo中,直接用了一個以前開發好的服務器接口進行調用,但是不對外開放,因此大家只需要將自己開發好的接口地址放到”wsURL“內即可。
onInit() { let that = this; ws.connect("wsURL", (err, value) => { if (!err) { console.log("xxx---connect success"); } else { console.log("xxx---connect fail, err:" + JSON.stringify(err)); } }); },5、訂閱通道內消息更新
這里我們調用on( type:‘message’ )接口進行消息監聽,這里要注意的是服務端傳遞過來的是字符串類型,所以如果消息是JSON對象,則需要用JSON.parse()進行解析,還原成JSON對象。
onInit() { let that = this; ws.on("message", (err, value) => { console.log("xxx---on message, message:" + value); //傳遞的是序列化后的字符串,需要解序列化為JSON對象 let dataObj = JSON.parse(value) console.log("xxx---parse success---postId: "+dataObj.postId+",message:"+dataObj.message) that.message.push(dataObj) console.log("xxx---check message: "+JSON.stringify(that.message)) }); },6、發送消息
緊接著調用send()接口進行消息的發送,這里注意,如果要傳遞的是JSON對象,要使用JSON.stringify()進行序列化操作, 保證我們傳遞的是流字符串的形式。
在該接口的回調中,我們也可以打印出來,看看消息是否發送成功。
sendMessage(){ let that = this; let data = { postId:that.id, message:that.sendMes } let dataStr = JSON.stringify(data) ws.send(dataStr, (err, value) => { if (!err) { console.log("xxx---send success"); } else { console.log("xxx---send fail, err:" + JSON.stringify(err)); } }); that.message.push(data) },7、隱藏標題欄
細心的小伙伴就會發現,我的demo展示的黑色標題欄不見了,其實是可以隱藏掉的,只需要在config.json文件中module.abilities下添加幾行代碼即可。
"metaData":{ "customizeData":[ { "name": "hwc-theme", "value": "androidhwext:style/Theme.Emui.NoTitleBar", "extra":"" } ] }8、樣式設計
接著就是簡單設計一下界面樣式,把獲取到的消息渲染出來就完成啦。
.container { display: flex; flex-direction: column; justify-content: center; align-items: center; left: 0px; top: 0px; width: 100%; height: 100%;}.textarea { placeholder-color: gray; width: 70%;}.listItemDiv{ background-color: #ff87f3d0; border-radius: 10px;}.listItemLeft{ margin: 10px; width: 100%; justify-content: flex-start;}.listItemRight{ margin: 10px; width: 100%; justify-content: flex-end;}
文章相關附件可以點擊下面的原文鏈接前往下載:
https://ost.51cto.com/resource/2210。
??想了解更多關于開源的內容,請訪問:??
??51CTO開源基礎軟件社區??
??https://ost.51cto.com??。
X 關閉
X 關閉
- 1轉轉集團發布2022年二季度手機行情報告:二手市場“飄香”
- 2充電寶100Wh等于多少毫安?鐵路旅客禁止、限制攜帶和托運物品目錄
- 3好消息!京東與騰訊續簽三年戰略合作協議 加強技術創新與供應鏈服務
- 4名創優品擬通過香港IPO全球發售4100萬股 全球發售所得款項有什么用處?
- 5亞馬遜云科技成立量子網絡中心致力解決量子計算領域的挑戰
- 6京東綠色建材線上平臺上線 新增用戶70%來自下沉市場
- 7網紅淘品牌“七格格”chuu在北京又開一家店 潮人新寵chuu能紅多久
- 8市場競爭加劇,有車企因經營不善出現破產、退網、退市
- 9北京市市場監管局為企業紓困減負保護經濟韌性
- 10市場監管總局發布限制商品過度包裝標準和第1號修改單