鸿蒙上实现简单的聊天功能

　　需求分析：连接指定 IP 和端口 显示接收的内容 具有发送的功能
　　控件介绍 ①Socket 连接场景介绍：应用通过 Socket 进行数据传输，支持 TCP 和 UDP 两种协议。接口说明：Socket 连接主要由 socket 模块提供。具体接口说明如下表。
　　基本例程（参考我之前的家庭医生终端系统）： 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 < dataView.byteLength; ++i) {       let c = String.fromCharCode(dataView.getUint8(i))       if (c !== ＂ ＂) {         str += c       }     }     return str;   } } //数据的发送函数 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＂);     })   } }②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 @Component struct 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。 ①基本界面
　　以后不会大时间讲解 UI 了，会直接放成品，且我的源码都在 Gitee 仓上存在，需要的可以自己下载，会着重体现程序部分。 ②接口绑定
　　首先是接收框处的变量绑定： 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)
　　③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)＂); });
　　该部分实现聊天框内部的文字刷新。 ④IP 设置​
　　这里我是使用的合宙的 TCP 工具[wstool (luatos.com)](
　　在此处修改 IP 和端口：
　　⑤远端模拟器
　　在模拟器中打开如上。
　　实际测试
　　使用模拟器进行发送：
　　在 TCP 工具处有接收到内容，此时进行回复。
　　在 APP 端可以接收到并显示（暂时可能只支持英文接受显示）。
　　动态图
　　TCP 助手显示如下：
　　本项目 Gitee 仓地址：https://gitee.com/lalhan/eTs_Study