鸿蒙应用开发：网络通信与数据同步优化（上）——网络通信基础

鸿蒙应用开发网络通信与数据同步优化上——网络通信基础一、章节概述✅学习目标全面掌握鸿蒙网络通信的核心概念网络通信、HTTP请求、WebSocket通信、网络状态监听详细学习鸿蒙网络通信的实现方式HTTP请求、WebSocket通信、网络状态监听提供鸿蒙网络通信的实战案例HTTP请求、WebSocket通信、网络状态监听分析鸿蒙网络通信的常见问题与解决方案核心重点网络通信、HTTP请求、WebSocket通信、网络状态监听、实战案例、常见问题与解决方案⚠️前置基础已完成第1-51章内容具备鸿蒙应用开发的全流程技能了解组件化开发、数据管理、本地存储等二、网络通信的核心概念2.1 网络通信2.1.1 网络通信定义网络通信通过网络协议实现设备之间的数据传输与通信通信类型包括HTTP/HTTPS请求、WebSocket通信、TCP/UDP通信等技术使用鸿蒙网络API实现网络通信功能2.1.2 网络通信架构HTTP/HTTPS请求使用HTTP/HTTPS协议进行数据传输WebSocket通信使用WebSocket协议实现双向通信网络状态监听监听设备的网络状态变化三、HTTP请求的实现方式3.1 HTTP请求3.1.1 HTTP请求定义HTTP请求使用HTTP/HTTPS协议进行数据传输请求类型包括GET、POST、PUT、DELETE等技术使用鸿蒙网络API实现HTTP请求功能3.1.2 HTTP请求实战案例// entry/src/main/ets/utils/HttpRequestManager.ets HTTP请求管理工具 import http from ohos.net.http; import common from ohos.app.ability.common; export class HttpRequestManager { private context: common.UIAbilityContext | null null; private httpClient: http.HttpRequest | null null; private baseUrl: string https://api.example.com; constructor(context: common.UIAbilityContext) { this.context context; this.initializeHttpClient(); } private async initializeHttpClient() { if (!this.context) { throw new Error(HTTP请求管理工具未初始化); } this.httpClient http.createHttp(); } async getT(url: string, headers?: any): PromiseT { if (!this.context || !this.httpClient) { throw new Error(HTTP请求管理工具未初始化); } try { const response await this.httpClient.request(${this.baseUrl}${url}, { method: http.RequestMethod.GET, header: headers || { Content-Type: application/json } }); if (response.responseCode 200) { return JSON.parse(response.result.toString()); } else { console.error(GET请求失败: ${JSON.stringify(response.result)}); throw new Error(GET请求失败); } } catch (err) { console.error(GET请求失败: ${JSON.stringify(err)}); throw new Error(GET请求失败); } } async postT(url: string, data?: any, headers?: any): PromiseT { if (!this.context || !this.httpClient) { throw new Error(HTTP请求管理工具未初始化); } try { const response await this.httpClient.request(${this.baseUrl}${url}, { method: http.RequestMethod.POST, header: headers || { Content-Type: application/json }, extraData: data ? JSON.stringify(data) : }); if (response.responseCode 200 || response.responseCode 201) { return JSON.parse(response.result.toString()); } else { console.error(POST请求失败: ${JSON.stringify(response.result)}); throw new Error(POST请求失败); } } catch (err) { console.error(POST请求失败: ${JSON.stringify(err)}); throw new Error(POST请求失败); } } async putT(url: string, data?: any, headers?: any): PromiseT { if (!this.context || !this.httpClient) { throw new Error(HTTP请求管理工具未初始化); } try { const response await this.httpClient.request(${this.baseUrl}${url}, { method: http.RequestMethod.PUT, header: headers || { Content-Type: application/json }, extraData: data ? JSON.stringify(data) : }); if (response.responseCode 200) { return JSON.parse(response.result.toString()); } else { console.error(PUT请求失败: ${JSON.stringify(response.result)}); throw new Error(PUT请求失败); } } catch (err) { console.error(PUT请求失败: ${JSON.stringify(err)}); throw new Error(PUT请求失败); } } async deleteT(url: string, headers?: any): PromiseT { if (!this.context || !this.httpClient) { throw new Error(HTTP请求管理工具未初始化); } try { const response await this.httpClient.request(${this.baseUrl}${url}, { method: http.RequestMethod.DELETE, header: headers || { Content-Type: application/json } }); if (response.responseCode 200 || response.responseCode 204) { return response.responseCode 204 ? null : JSON.parse(response.result.toString()); } else { console.error(DELETE请求失败: ${JSON.stringify(response.result)}); throw new Error(DELETE请求失败); } } catch (err) { console.error(DELETE请求失败: ${JSON.stringify(err)}); throw new Error(DELETE请求失败); } } } // 导出HTTP请求管理实例 let httpRequestManager: HttpRequestManager | null null; export function getHttpRequestManager(context: common.UIAbilityContext): HttpRequestManager { if (!httpRequestManager) { httpRequestManager new HttpRequestManager(context); } return httpRequestManager; }四、WebSocket通信的实现方式4.1 WebSocket通信4.1.1 WebSocket通信定义WebSocket通信使用WebSocket协议实现双向通信通信类型包括文本消息、二进制消息等技术使用鸿蒙网络API实现WebSocket通信功能4.1.2 WebSocket通信实战案例// entry/src/main/ets/utils/WebSocketManager.ets WebSocket通信管理工具 import webSocket from ohos.net.webSocket; import common from ohos.app.ability.common; export class WebSocketManager { private context: common.UIAbilityContext | null null; private webSocket: webSocket.WebSocket | null null; private url: string wss://api.example.com/ws; private onOpenCallback: () void () {}; private onMessageCallback: (message: string) void () {}; private onCloseCallback: () void () {}; private onErrorCallback: (error: string) void () {}; constructor(context: common.UIAbilityContext) { this.context context; this.initializeWebSocket(); } private async initializeWebSocket() { if (!this.context) { throw new Error(WebSocket通信管理工具未初始化); } this.webSocket webSocket.createWebSocket(); this.webSocket.on(open, () { this.onOpenCallback(); }); this.webSocket.on(message, (message: string) { this.onMessageCallback(message); }); this.webSocket.on(close, () { this.onCloseCallback(); }); this.webSocket.on(error, (error: string) { this.onErrorCallback(error); }); } async connect() { if (!this.context || !this.webSocket) { throw new Error(WebSocket通信管理工具未初始化); } try { await this.webSocket.connect(this.url); } catch (err) { console.error(WebSocket连接失败: ${JSON.stringify(err)}); throw new Error(WebSocket连接失败); } } async sendMessage(message: string) { if (!this.context || !this.webSocket) { throw new Error(WebSocket通信管理工具未初始化); } try { await this.webSocket.send(message); } catch (err) { console.error(WebSocket发送消息失败: ${JSON.stringify(err)}); throw new Error(WebSocket发送消息失败); } } async disconnect() { if (!this.context || !this.webSocket) { throw new Error(WebSocket通信管理工具未初始化); } try { await this.webSocket.close(); } catch (err) { console.error(WebSocket断开连接失败: ${JSON.stringify(err)}); throw new Error(WebSocket断开连接失败); } } setOnOpenCallback(callback: () void) { this.onOpenCallback callback; } setOnMessageCallback(callback: (message: string) void) { this.onMessageCallback callback; } setOnCloseCallback(callback: () void) { this.onCloseCallback callback; } setOnErrorCallback(callback: (error: string) void) { this.onErrorCallback callback; } } // 导出WebSocket通信管理实例 let webSocketManager: WebSocketManager | null null; export function getWebSocketManager(context: common.UIAbilityContext): WebSocketManager { if (!webSocketManager) { webSocketManager new WebSocketManager(context); } return webSocketManager; }五、网络状态监听的实现方式5.1 网络状态监听5.1.1 网络状态监听定义网络状态监听监听设备的网络状态变化状态类型包括网络连接状态、网络类型、网络质量等技术使用鸿蒙网络状态监听API实现网络状态监听功能5.1.2 网络状态监听实战案例// entry/src/main/ets/utils/NetworkStateManager.ets 网络状态管理工具 import network from ohos.net.connection; import common from ohos.app.ability.common; export class NetworkStateManager { private context: common.UIAbilityContext | null null; private networkObserver: network.ConnectionObserver | null null; private onNetworkChangeCallback: (networkState: network.NetworkState) void () {}; constructor(context: common.UIAbilityContext) { this.context context; this.initializeNetworkObserver(); } private async initializeNetworkObserver() { if (!this.context) { throw new Error(网络状态管理工具未初始化); } this.networkObserver { onConnectionChange: (networkState: network.NetworkState) { this.onNetworkChangeCallback(networkState); } }; network.registerObserver(this.networkObserver); } async getCurrentNetworkState(): Promisenetwork.NetworkState { if (!this.context) { throw new Error(网络状态管理工具未初始化); } try { return await network.getConnectionSync(); } catch (err) { console.error(获取当前网络状态失败: ${JSON.stringify(err)}); throw new Error(获取当前网络状态失败); } } async isNetworkAvailable(): Promiseboolean { if (!this.context) { throw new Error(网络状态管理工具未初始化); } try { const networkState await this.getCurrentNetworkState(); return networkState.isConnected; } catch (err) { console.error(检查网络可用性失败: ${JSON.stringify(err)}); return false; } } async getNetworkType(): Promisestring { if (!this.context) { throw new Error(网络状态管理工具未初始化); } try { const networkState await this.getCurrentNetworkState(); return networkState.connectionType; } catch (err) { console.error(获取网络类型失败: ${JSON.stringify(err)}); return UNKNOWN; } } setOnNetworkChangeCallback(callback: (networkState: network.NetworkState) void) { this.onNetworkChangeCallback callback; } async unregisterNetworkObserver() { if (!this.context || !this.networkObserver) { throw new Error(网络状态管理工具未初始化); } try { await network.unregisterObserver(this.networkObserver); } catch (err) { console.error(取消网络状态监听失败: ${JSON.stringify(err)}); } } } // 导出网络状态管理实例 let networkStateManager: NetworkStateManager | null null; export function getNetworkStateManager(context: common.UIAbilityContext): NetworkStateManager { if (!networkStateManager) { networkStateManager new NetworkStateManager(context); } return networkStateManager; }六、网络通信的实战案例6.1 任务管理应用网络通信6.1.1 项目背景需求为任务管理应用添加网络通信功能支持HTTP请求、WebSocket通信、网络状态监听等功能HTTP请求、WebSocket通信、网络状态监听、数据同步技术方舟开发框架、HTTP请求管理工具、WebSocket通信管理工具、网络状态管理工具6.1.2 项目实现// entry/src/main/ets/pages/NetworkCommunicationPage.ets 网络通信页面 import common from ohos.app.ability.common; import { getHttpRequestManager } from ../utils/HttpRequestManager.ets; import { getWebSocketManager } from ../utils/WebSocketManager.ets; import { getNetworkStateManager } from ../utils/NetworkStateManager.ets; Entry Component struct NetworkCommunicationPage { State context: common.UIAbilityContext | null null; State tasks: Arrayany []; State networkState: any null; State networkType: string ; State isNetworkAvailable: boolean false; State showAddDialog: boolean false; State newTaskTitle: string ; aboutToAppear() { const ability getCurrentAbility(); this.context ability.context; const httpRequestManager getHttpRequestManager(this.context); const webSocketManager getWebSocketManager(this.context); const networkStateManager getNetworkStateManager(this.context); httpRequestManager.get(/tasks).then(tasks { this.tasks tasks; }); networkStateManager.getCurrentNetworkState().then(networkState { this.networkState networkState; this.networkType networkState.connectionType; this.isNetworkAvailable networkState.isConnected; }); networkStateManager.setOnNetworkChangeCallback((networkState: any) { this.networkState networkState; this.networkType networkState.connectionType; this.isNetworkAvailable networkState.isConnected; }); webSocketManager.setOnOpenCallback(() { console.log(WebSocket连接成功); }); webSocketManager.setOnMessageCallback((message: string) { console.log(WebSocket收到消息:, message); const data JSON.parse(message); if (data.type taskUpdate) { const index this.tasks.findIndex(task task.id data.task.id); if (index ! -1) { this.tasks[index] data.task; } else { this.tasks.push(data.task); } } }); webSocketManager.connect().then(() { console.log(WebSocket连接成功); }); } private async addNewTask() { if (!this.context) return; const httpRequestManager getHttpRequestManager(this.context); await httpRequestManager.post(/tasks, { title: this.newTaskTitle, description: , completed: false, category: 工作 }); this.tasks await httpRequestManager.get(/tasks); this.showAddDialog false; this.newTaskTitle ; promptAction.showToast({ message: 任务添加成功, duration: 2000 }); } private async deleteTaskHandler(id: number) { if (!this.context) return; const httpRequestManager getHttpRequestManager(this.context); await httpRequestManager.delete(/tasks/${id}); this.tasks await httpRequestManager.get(/tasks); promptAction.showToast({ message: 任务删除成功, duration: 2000 }); } build() { Column({ space: 16 }) { Text(网络通信) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor(Color.Black); // 网络状态信息 Row({ space: 12 }) { Text(网络连接状态:) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.Black); Text(this.isNetworkAvailable ? 已连接 : 未连接) .fontSize(16) .fontColor(this.isNetworkAvailable ? Color.Green : Color.Red); } .width(100%); Row({ space: 12 }) { Text(网络类型:) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.Black); Text(this.networkType) .fontSize(16) .fontColor(Color.Black); } .width(100%); // 任务列表 List({ space: 12 }) { LazyForEach(new TaskDataSource(this.tasks), (item: any) { ListItem() { Stack({ alignContent: Alignment.Center }) { Row({ space: 12 }) { Image($r(app.media.task_icon)) .width(48) .height(48) .borderRadius(24); Column({ space: 4 }) { Text(item.title) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.Black) .layoutWeight(1); Text(item.description) .fontSize(14) .fontColor(Color.Gray); } .layoutWeight(1); Text(item.completed ? 已完成 : 待完成) .fontSize(14) .fontColor(item.completed ? Color.Green : Color.Red); } .width(100%) .height(60) .padding({ left: 12, right: 12 }) .backgroundColor(Color.White) .borderRadius(8) .shadow({ offsetX: 0, offsetY: 2, radius: 4, color: #00000014 }); // 删除按钮 Button(删除) .width(64) .height(36) .backgroundColor(Color.Red) .fontColor(Color.White) .onClick(() { this.deleteTaskHandler(item.id); }); } } }); } .width(100%) .height(100%) .layoutWeight(1); Row({ space: 12 }) { Button(添加任务) .width(50%) .height(48) .backgroundColor(Color.Blue) .fontColor(Color.White) .onClick(() { this.showAddDialog true; }); Button(同步数据) .width(50%) .height(48) .backgroundColor(Color.Green) .fontColor(Color.White) .onClick(() { const httpRequestManager getHttpRequestManager(this.context); httpRequestManager.get(/tasks).then(tasks { this.tasks tasks; }); }); } .width(100%); // 添加任务对话框 if (this.showAddDialog) { Column({ space: 16 }) { Text(添加新任务) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(Color.Black); TextInput({ text: this.newTaskTitle, placeholder: 请输入任务标题 }) .width(100%) .height(48) .backgroundColor(Color.White) .borderRadius(8) .fontColor(Color.Black) .padding({ left: 12, right: 12 }) .onChange((value) { this.newTaskTitle value; }); Row({ space: 12 }) { Button(取消) .width(50%) .height(48) .backgroundColor(Color.Gray) .fontColor(Color.White) .onClick(() { this.showAddDialog false; this.newTaskTitle ; }); Button(添加) .width(50%) .height(48) .backgroundColor(Color.Green) .fontColor(Color.White) .onClick(() { this.addNewTask(); }); } .width(100%); } .width(80%) .padding(24) .backgroundColor(Color.White) .borderRadius(8) .shadow({ offsetX: 0, offsetY: 2, radius: 4, color: #00000014 }) .justifyContent(FlexAlign.Center); } } .width(100%) .height(100%) .padding(24) .backgroundColor(Color.White); } } class TaskDataSource implements IDataSource { private tasks: Arrayany []; constructor(tasks: Arrayany) { this.tasks tasks; } totalCount(): number { return this.tasks.length; } getData(index: number): any { return this.tasks[index]; } notifyDataChanged(): void { // 数据更新时调用 } notifyDataAdd(index: number): void { // 数据添加时调用 } notifyDataChange(index: number): void { // 数据修改时调用 } notifyDataDelete(index: number): void { // 数据删除时调用 } }七、网络通信的常见问题与解决方案7.1 HTTP请求问题问题HTTP请求失败、请求超时、请求数据格式不正确等解决方案使用异步HTTP请求避免阻塞主线程设置合理的超时时间处理超时场景验证请求数据格式确保数据正确性7.2 WebSocket通信问题问题WebSocket连接失败、发送消息失败、收到消息格式不正确等解决方案优化WebSocket连接机制处理连接失败场景使用心跳机制保持WebSocket连接验证消息格式确保数据正确性7.3 网络状态监听问题问题网络状态监听失败、网络状态信息不准确等解决方案使用网络状态监听API及时处理网络状态变化验证网络状态信息确保信息准确性优化网络状态监听逻辑提高监听效率八、总结与建议8.1 核心总结鸿蒙网络通信是鸿蒙应用开发的核心内容通过HTTP请求、WebSocket通信、网络状态监听等技术实现了应用的网络通信功能。8.2 建议深入理解鸿蒙的网络通信机制充分利用鸿蒙的HTTP请求管理工具、WebSocket通信管理工具、网络状态管理工具等网络通信机制遵循网络通信规范遵循HTTP请求、WebSocket通信、网络状态监听等规范优化网络通信功能通过优化HTTP请求、WebSocket通信、网络状态监听等提升应用的网络通信功能的性能持续学习与创新关注鸿蒙网络通信的最新技术动态持续学习与创新通过不断优化与创新开发者可以构建出网络通信功能完善的鸿蒙应用从而提升应用的竞争力与用户满意度。