深入浅出学习eTs之TCP聊天的功能实现
一、需求分析
本章节我们来实现一个tcp聊天的功能
连接指定ip和端口
显示接收的内容
具有发送的功能
二、控件介绍
（1）socket连接
场景介绍
应用通过socket进行数据传输，支持tcp和udp两种协议。
接口说明
socket连接主要由socket模块提供。具体接口说明如下表。
接口名 功能描述
constructudpsocketinstance() 创建一个udpsocket对象。
constructtcpsocketinstance() 创建一个tcpsocket对象。
bind() 绑定ip地址和端口。
send() 发送数据。
close() 关闭连接。
getstate() 获取socket状态。
connect() 连接到指定的ip地址和端口（仅tcp支持）
getremoteaddress() 获取对端socket地址（仅tcp支持，需要先调用connect方法）
on(type: ‘message’) 订阅socket连接的接收消息事件。
off(type: ‘message’) 取消订阅socket连接的接收消息事件。
on(type: ‘close’) 订阅socket连接的关闭事件。
off(type: ‘close’) 取消订阅socket连接的关闭事件。
on(type: ‘error’) 订阅socket连接的error事件。
off(type: ‘error’) 取消订阅socket连接的error事件。
on(type: ‘listening’) 订阅udpsocket连接的数据包消息事件（仅udp支持）。
off(type: ‘listening’) 取消订阅udpsocket连接的数据包消息事件（仅udp支持）。
on(type: ‘connect’) 订阅tcpsocket的连接事件（仅tcp支持）。
off(type: ‘connect’) 取消订阅tcpsocket的连接事件（仅tcp支持）。
基本例程（参考我之前的家庭医生终端系统）
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);//此处对接受到的数据进行处理});//将接受到的数据转化为文本型 function resolvearraybuffer(message){ if (message instanceof arraybuffer) { let dataview = new dataview(message) let str = for (let i = 0;i { 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与组件同步
在管理组件拥有的状态中，已经定义了如何将组件的状态变量与父组件或祖先组件中的@state装饰的状态变量同步，主要包括@prop、@link、@consume。
本章节定义如何将组件变量与appstorage同步，主要提供@storagelink和@storageprop装饰器。
@storagelink装饰器
组件通过使用@storagelink(key)装饰的状态变量，与appstorage建立双向数据绑定，key为appstorage中的属性键值。当创建包含@storagelink的状态变量的组件时，该状态变量的值将使用appstorage中的值进行初始化。在ui组件中对@storagelink的状态变量所做的更改将同步到appstorage，并从appstorage同步到任何其他绑定实例中，如persistentstorage或其他绑定的ui组件。
@storageprop装饰器
组件通过使用@storageprop(key)装饰的状态变量，将与appstorage建立单向数据绑定，key标识appstorage中的属性键值。当创建包含@stoageprop的状态变量的组件时，该状态变量的值将使用appstorage中的值进行初始化。appstorage中的属性值的更改会导致绑定的ui组件进行状态更新。
let vara = appstorage.link('vara')let envlang = appstorage.prop('languagecode')@entry@componentstruct componenta { @storagelink('vara') vara: number = 2 @storageprop('languagecode') lang: string = 'en' private label: string = 'count' private abouttoappear() { this.label = (this.lang === 'zh') ? '数' : 'count' } build() { row({ space: 20 }) { button(`${this.label}: ${this.vara}`) .onclick(() => { appstorage.set('vara', appstorage.get('vara') + 1) }) button(`lang: ${this.lang}`) .onclick(() => { if (this.lang === 'zh') { appstorage.set('languagecode', 'en') } else { appstorage.set('languagecode', 'zh') } this.label = (this.lang === 'zh') ? '数' : 'count' }) } }} 即通过appstorage.link和 @storagelink的方式，可实现外部动态刷新text组件和image组件（等等之类都可以），方便我们在全局调用时更新数据。
三、ui设计
本项目的基本内容是可以在预览器中看到的，所以先在预览器中简单设计ui
（1）基本界面
以后不会大时间讲解ui了，会直接放成品，且我的源码都在gitee仓上存在，需要的可以自己下载，会着重体现程序部分
（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回调设置
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('rc_message',dat_buff);//appstorage.set('id_1_stata','rgba(0, 109, 229, 0.95)');});
该部分实现聊天框内部的文字刷新
（4）ip设置
这里我是使用的合宙的tcp工具[wstool (luatos.com)](
在此处修改ip和端口
（5）远端模拟器
在模拟器中打开如上
四、实际测试
使用模拟器进行发送
在tcp工具处有接收到内容，此时进行回复
在app端可以接收到并显示（暂时可能只支持英文接受显示）
五、动态图
tcp助手显示如下
HDMI 2.1做了哪些功能升级
新能源滤波器的主要功能和作用有哪些？
运营商该怎么提高5G用户渗透率？
原理图到layout的设计输出
基于接地电极表面及与其接触的土壤之间的接触电阻
深入浅出学习eTs之TCP聊天的功能实现
直流电源滤波器的基本原理与优势
科学家首次实现操控光波和光子信息,标志通信基础设施将大幅提升
中本聪到底持有多少比特币
国产高性能32位M0内核MCU单片机DP32G003
华为为英国5G网络的推出提供了三分之一的基站
MODEM的系统硬件要求/接口类型/芯片组
CAN总线原理，CAN总线的8个特点
碳化硅的挑战与机遇
方案 | ST最新一代高灵敏度 STHS34PF80人体感应检测方案
深度解析工控行业最热门十个关键词
三相桥式逆变电路的原理和工作方式
百度Apollo计划发力广州自动驾驶智能交通新基建项目
BOM如何打通IPD与项目交付过程？
如何使用arduino制作情绪灯
本章节我们来实现一个tcp聊天的功能
连接指定ip和端口
显示接收的内容
具有发送的功能
二、控件介绍
（1）socket连接
场景介绍
应用通过socket进行数据传输，支持tcp和udp两种协议。
接口说明
socket连接主要由socket模块提供。具体接口说明如下表。
接口名 功能描述
constructudpsocketinstance() 创建一个udpsocket对象。
constructtcpsocketinstance() 创建一个tcpsocket对象。
bind() 绑定ip地址和端口。
send() 发送数据。
close() 关闭连接。
getstate() 获取socket状态。
connect() 连接到指定的ip地址和端口（仅tcp支持）
getremoteaddress() 获取对端socket地址（仅tcp支持，需要先调用connect方法）
on(type: ‘message’) 订阅socket连接的接收消息事件。
off(type: ‘message’) 取消订阅socket连接的接收消息事件。
on(type: ‘close’) 订阅socket连接的关闭事件。
off(type: ‘close’) 取消订阅socket连接的关闭事件。
on(type: ‘error’) 订阅socket连接的error事件。
off(type: ‘error’) 取消订阅socket连接的error事件。
on(type: ‘listening’) 订阅udpsocket连接的数据包消息事件（仅udp支持）。
off(type: ‘listening’) 取消订阅udpsocket连接的数据包消息事件（仅udp支持）。
on(type: ‘connect’) 订阅tcpsocket的连接事件（仅tcp支持）。
off(type: ‘connect’) 取消订阅tcpsocket的连接事件（仅tcp支持）。
基本例程（参考我之前的家庭医生终端系统）
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);//此处对接受到的数据进行处理});//将接受到的数据转化为文本型 function resolvearraybuffer(message){ if (message instanceof arraybuffer) { let dataview = new dataview(message) let str = for (let i = 0;i { 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与组件同步
在管理组件拥有的状态中，已经定义了如何将组件的状态变量与父组件或祖先组件中的@state装饰的状态变量同步，主要包括@prop、@link、@consume。
本章节定义如何将组件变量与appstorage同步，主要提供@storagelink和@storageprop装饰器。
@storagelink装饰器
组件通过使用@storagelink(key)装饰的状态变量，与appstorage建立双向数据绑定，key为appstorage中的属性键值。当创建包含@storagelink的状态变量的组件时，该状态变量的值将使用appstorage中的值进行初始化。在ui组件中对@storagelink的状态变量所做的更改将同步到appstorage，并从appstorage同步到任何其他绑定实例中，如persistentstorage或其他绑定的ui组件。
@storageprop装饰器
组件通过使用@storageprop(key)装饰的状态变量，将与appstorage建立单向数据绑定，key标识appstorage中的属性键值。当创建包含@stoageprop的状态变量的组件时，该状态变量的值将使用appstorage中的值进行初始化。appstorage中的属性值的更改会导致绑定的ui组件进行状态更新。
let vara = appstorage.link('vara')let envlang = appstorage.prop('languagecode')@entry@componentstruct componenta { @storagelink('vara') vara: number = 2 @storageprop('languagecode') lang: string = 'en' private label: string = 'count' private abouttoappear() { this.label = (this.lang === 'zh') ? '数' : 'count' } build() { row({ space: 20 }) { button(`${this.label}: ${this.vara}`) .onclick(() => { appstorage.set('vara', appstorage.get('vara') + 1) }) button(`lang: ${this.lang}`) .onclick(() => { if (this.lang === 'zh') { appstorage.set('languagecode', 'en') } else { appstorage.set('languagecode', 'zh') } this.label = (this.lang === 'zh') ? '数' : 'count' }) } }} 即通过appstorage.link和 @storagelink的方式，可实现外部动态刷新text组件和image组件（等等之类都可以），方便我们在全局调用时更新数据。
三、ui设计
本项目的基本内容是可以在预览器中看到的，所以先在预览器中简单设计ui
（1）基本界面
以后不会大时间讲解ui了，会直接放成品，且我的源码都在gitee仓上存在，需要的可以自己下载，会着重体现程序部分
（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回调设置
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('rc_message',dat_buff);//appstorage.set('id_1_stata','rgba(0, 109, 229, 0.95)');});
该部分实现聊天框内部的文字刷新
（4）ip设置
这里我是使用的合宙的tcp工具[wstool (luatos.com)](
在此处修改ip和端口
（5）远端模拟器
在模拟器中打开如上
四、实际测试
使用模拟器进行发送
在tcp工具处有接收到内容，此时进行回复
在app端可以接收到并显示（暂时可能只支持英文接受显示）
五、动态图
tcp助手显示如下
HDMI 2.1做了哪些功能升级
新能源滤波器的主要功能和作用有哪些？
运营商该怎么提高5G用户渗透率？
原理图到layout的设计输出
基于接地电极表面及与其接触的土壤之间的接触电阻
深入浅出学习eTs之TCP聊天的功能实现
直流电源滤波器的基本原理与优势
科学家首次实现操控光波和光子信息,标志通信基础设施将大幅提升
中本聪到底持有多少比特币
国产高性能32位M0内核MCU单片机DP32G003
华为为英国5G网络的推出提供了三分之一的基站
MODEM的系统硬件要求/接口类型/芯片组
CAN总线原理，CAN总线的8个特点
碳化硅的挑战与机遇
方案 | ST最新一代高灵敏度 STHS34PF80人体感应检测方案
深度解析工控行业最热门十个关键词
三相桥式逆变电路的原理和工作方式
百度Apollo计划发力广州自动驾驶智能交通新基建项目
BOM如何打通IPD与项目交付过程？
如何使用arduino制作情绪灯