自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

深入淺出學(xué)習(xí)eTs—TCP聊天室(十九)

系統(tǒng) OpenHarmony
本章節(jié)我們來(lái)實(shí)現(xiàn)一個(gè)TCP聊天的功能。

??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

一、需求分析

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

本章節(jié)我們來(lái)實(shí)現(xiàn)一個(gè)TCP聊天的功能

  • 連接指定IP和端口
  • 顯示接收的內(nèi)容
  • 具有發(fā)送的功能

二、控件介紹

1、Socket連接

場(chǎng)景介紹

應(yīng)用通過(guò)Socket進(jìn)行數(shù)據(jù)傳輸,支持TCP和UDP兩種協(xié)議。

接口說(shuō)明

Socket連接主要由socket模塊提供。具體接口說(shuō)明如下表。

接口名

功能描述

constructUDPSocketInstance()

創(chuàng)建一個(gè)UDPSocket對(duì)象。

constructTCPSocketInstance()

創(chuàng)建一個(gè)TCPSocket對(duì)象。

bind()

綁定IP地址和端口。

send()

發(fā)送數(shù)據(jù)。

close()

關(guān)閉連接。

getState()

獲取Socket狀態(tài)。

connect()

連接到指定的IP地址和端口(僅TCP支持)

getRemoteAddress()

獲取對(duì)端Socket地址(僅TCP支持,需要先調(diào)用connect方法)

on(type: ‘message’)

訂閱Socket連接的接收消息事件。

off(type: ‘message’)

取消訂閱Socket連接的接收消息事件。

on(type: ‘close’)

訂閱Socket連接的關(guān)閉事件。

off(type: ‘close’)

取消訂閱Socket連接的關(guān)閉事件。

on(type: ‘error’)

訂閱Socket連接的Error事件。

off(type: ‘error’)

取消訂閱Socket連接的Error事件。

on(type: ‘listening’)

訂閱UDPSocket連接的數(shù)據(jù)包消息事件(僅UDP支持)。

off(type: ‘listening’)

取消訂閱UDPSocket連接的數(shù)據(jù)包消息事件(僅UDP支持)。

on(type: ‘connect’)

訂閱TCPSocket的連接事件(僅TCP支持)。

off(type: ‘connect’)

取消訂閱TCPSocket的連接事件(僅TCP支持)。

基本例程(參考我之前的家庭醫(yī)生終端系統(tǒng))。

import socket from '@ohos.net.socket';
let tcp = socket.constructTCPSocketInstance();

tcp.bind({address: '0.0.0.0', port: 12121, family: 1}, err => {
if (err) {
console.log('bind fail');
return;
}
console.log('bind success');
})
tcp.on('message', value => {
console.log("on message, message:" + value.message + ", remoteInfo:" + value.remoteInfo)
let da = resolveArrayBuffer(value.message);
let dat_buff = String(da);
//此處對(duì)接受到的數(shù)據(jù)進(jìn)行處理
});
//將接受到的數(shù)據(jù)轉(zhuǎn)化為文本型
function resolveArrayBuffer(message){
if (message instanceof ArrayBuffer) {
let dataView = new DataView(message)
let str = ""
for (let i = 0;i < dataView.byteLength; ++i) {
let c = String.fromCharCode(dataView.getUint8(i))
if (c !== "\n") {
str += c
}
}
return str;
}
}
//數(shù)據(jù)的發(fā)送函數(shù)
function send_once(Con_buff) {
if (flag == false) {
let promise = tcp.connect({ address: { address: 'xxx.xxx.xxx.xxx', port: xxxx, family: 1 }, timeout: 2000 });
promise.then(() => {
console.log('connect success');
flag = true;
tcp.send({
data: Con_buff
}, err => {
if (err) {
console.log('send fail');
return;
}
console.log('send success');
})
}).catch(err => {
console.log('connect fail');
});
} else if (flag == true) {
tcp.send({
data: Con_buff
}, err => {
if (err) {
console.log('send fail');
return;
}
console.log('send success');
})
}
}

2、AppStorage與組件同步

在??管理組件擁有的狀態(tài)??中,已經(jīng)定義了如何將組件的狀態(tài)變量與父組件或祖先組件中的@State裝飾的狀態(tài)變量同步,主要包括@Prop、@Link、@Consume。

本章節(jié)定義如何將組件變量與AppStorage同步,主要提供@StorageLink和@StorageProp裝飾器。

@StorageLink裝飾器

組件通過(guò)使用@StorageLink(key)裝飾的狀態(tài)變量,與AppStorage建立雙向數(shù)據(jù)綁定,key為AppStorage中的屬性鍵值。當(dāng)創(chuàng)建包含@StorageLink的狀態(tài)變量的組件時(shí),該狀態(tài)變量的值將使用AppStorage中的值進(jìn)行初始化。在UI組件中對(duì)@StorageLink的狀態(tài)變量所做的更改將同步到AppStorage,并從AppStorage同步到任何其他綁定實(shí)例中,如PersistentStorage或其他綁定的UI組件。

@StorageProp裝飾器

組件通過(guò)使用@StorageProp(key)裝飾的狀態(tài)變量,將與AppStorage建立單向數(shù)據(jù)綁定,key標(biāo)識(shí)AppStorage中的屬性鍵值。當(dāng)創(chuàng)建包含@StoageProp的狀態(tài)變量的組件時(shí),該狀態(tài)變量的值將使用AppStorage中的值進(jìn)行初始化。AppStorage中的屬性值的更改會(huì)導(dǎo)致綁定的UI組件進(jìn)行狀態(tài)更新。

let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
@Entry
@Component
struct ComponentA {
@StorageLink('varA') varA: number = 2
@StorageProp('languageCode') lang: string = 'en'
private label: string = 'count'

private aboutToAppear() {
this.label = (this.lang === 'zh') ? '數(shù)' : 'Count'
}
build() {
Row({ space: 20 }) {

Button(`${this.label}: ${this.varA}`)
.onClick(() => {
AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
})
Button(`lang: ${this.lang}`)
.onClick(() => {
if (this.lang === 'zh') {
AppStorage.Set<string>('languageCode', 'en')
} else {
AppStorage.Set<string>('languageCode', 'zh')
}
this.label = (this.lang === 'zh') ? '數(shù)' : 'Count'
})
}
}
}

即通過(guò)AppStorage.Link和 @StorageLink的方式,可實(shí)現(xiàn)外部動(dòng)態(tài)刷新Text組件和image組件(等等之類(lèi)都可以),方便我們?cè)谌终{(diào)用時(shí)更新數(shù)據(jù)。

三、UI設(shè)計(jì)

本項(xiàng)目的基本內(nèi)容是可以在預(yù)覽器中看到的,所以先在預(yù)覽器中簡(jiǎn)單設(shè)計(jì)UI

1、基本界面

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

以后不會(huì)大時(shí)間講解UI了,會(huì)直接放成品,且我的源碼都在Gitee倉(cāng)上存在,需要的可以自己下載,會(huì)著重體現(xiàn)程序部分。

2、接口綁定

首先是接收框處的變量綁定。

let Rc_message = AppStorage.Link('Rc_message')
@StorageLink('Rc_message') Rc_message: String = '收到消息'
Text(`${this.Rc_message}`)
.width("98%")
.height("35%")
.borderStyle(BorderStyle.Solid).borderWidth(8).borderColor(0xAFEEEE).borderRadius(20)
.fontSize(25)

3、TCP回調(diào)設(shè)置

tcp.on('message', value => {
console.log("on message, message:" + value.message + ", remoteInfo:" + value.remoteInfo)
let da = resolveArrayBuffer(value.message);
let dat_buff = String(da);
AppStorage.Set<String>('Rc_message',dat_buff);
//AppStorage.Set<String>('ID_1_stata','rgba(0, 109, 229, 0.95)');
});

該部分實(shí)現(xiàn)聊天框內(nèi)部的文字刷新。

4、IP設(shè)置

這里我是使用的合宙的TCP工具[wstool (luatos.com)](。

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

在此處修改IP和端口。

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

5、遠(yuǎn)端模擬器

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

在模擬器中打開(kāi)如上。

四、實(shí)際測(cè)試

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

使用模擬器進(jìn)行發(fā)送。

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

在TCP工具處有接收到內(nèi)容,此時(shí)進(jìn)行回復(fù)。

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

在APP端可以接收到并顯示(暫時(shí)可能只支持英文接受顯示)。

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

五、動(dòng)態(tài)圖

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

TCP助手顯示如下:

#盲盒+碼##深入淺出學(xué)習(xí)eTs#(十九)TCP聊天室-開(kāi)源基礎(chǔ)軟件社區(qū)

??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。

責(zé)任編輯:jianghua 來(lái)源: 51CTO開(kāi)源基礎(chǔ)軟件社區(qū)
相關(guān)推薦

2022-12-01 08:20:00

2023-04-03 15:32:21

學(xué)習(xí)eTsHTTP協(xié)議

2009-11-30 16:46:29

學(xué)習(xí)Linux

2013-09-16 09:56:29

TCP協(xié)議網(wǎng)絡(luò)協(xié)議send

2021-03-16 08:54:35

AQSAbstractQueJava

2011-07-04 10:39:57

Web

2017-07-02 18:04:53

塊加密算法AES算法

2019-01-07 15:29:07

HadoopYarn架構(gòu)調(diào)度器

2021-07-20 15:20:02

FlatBuffers阿里云Java

2012-05-21 10:06:26

FrameworkCocoa

2022-09-26 09:01:15

語(yǔ)言數(shù)據(jù)JavaScript

2009-06-18 12:59:39

Criteria Qu深入淺出Hiberna

2014-08-05 09:27:20

TCP網(wǎng)絡(luò)協(xié)議

2010-07-26 12:57:12

OPhone游戲開(kāi)發(fā)

2016-10-14 13:53:05

JavascriptDOMWeb

2016-10-14 14:32:58

JavascriptDOMWeb

2009-11-17 17:31:58

Oracle COMM

2021-07-19 11:54:15

MySQL優(yōu)先隊(duì)列

2023-12-04 13:22:00

JavaScript異步編程

2010-07-16 09:11:40

JavaScript內(nèi)存泄漏
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)