# UniappCallTcp

**Repository Path**: scenario-samples/uniapp-call-tcp

## Basic Information

- **Project Name**: UniappCallTcp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 场景介绍



通过UDP和TCP协议通信是手机应用开发中常见的场景，当前uni-app框架已经支持HarmonyOS应用开发。

本示例演示了使用\[HarmonyOS的NetworkKit的socket通信能力](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/socket-connection#应用tcpudp协议进行通信)，通过UDP和TCP协议分别连接服务端。



## 效果预览



使用TCP协议连接服务端效果如下图。



![xx\_same\_size.gif](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/50602016-a512-453d-bbb6-9bcf307e3b76.gif)



使用UDP协议连接服务端效果如下图。

![image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/bfc40632-58a2-48fb-863d-ba89c715c173.png) ![image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/869277c5-12bd-4baf-bcde-e555684d7f77.png)



## 实现思路



页面全部使用uni-app渲染层技术绘制，不涉及ArkUI组件和同层渲染。



1. TCP连接实现思路。



当前uni-app未提供该能力的跨端API，因此通过使用\[UTS插件](https://uniapp.dcloud.net.cn/tutorial/harmony/native-api.html)桥接\[HarmonyOS Network kit的TCP socket能力](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/socket-connection#应用tcpudp协议进行通信)实现端云的TCP协议通信。



![image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/14d4e475-3ab2-458e-8efb-226d3fee93df.png)



由于TCP协议涉及建立连接和握手，因此ArkTS层对uni-app层暴露了连接，监听，发送消息，断开4个方法。

![image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/255c8217-fdee-4202-a3b7-f3ca8c464aa8.png)



2. UDP连接实现思路。



UDP协议通信过程无需建立连接，因此在ArkTS层实现略有不同。通过控制重入，ArkTS层只对uni-app暴露1个方法。

!\[image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/2f1fe647-ace3-473a-a2a5-baf6024db9ac.png)



## 外部链接



要求： \*\*上官网以后补充\*\*



## 代码仓链接



## 说明



1. 启动TCP端云示例。

（1）使用node启动TCP服务端`node tcp\_server.js`。

```shell

PS D:\\git\_uniapp\\uniapp\_call\_tcp> node .\\tcp\_server.js

TCP服务端已启动，监听端口：4567

```

（2）使用node启动TCP客户端`node tcp\_client.js`，确保服务端可用。

![image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/3035a269-7972-4e49-a5ce-098de2a53c2c.png)

（3）确保端云在同一个网络内，部署应用到端侧，并在页面上修改默认的服务端IP，服务端Port和客户端IP。



2. 启动UDP端云示例。

（1）使用node启动TCP服务端`node udp\_server.js`。

```shell

PS D:\\git\_uniapp\\uniapp\_call\_tcp> node .\\udp\_server.js

UDP Server 启动成功，监听 0.0.0.0:3000

```

（2）使用node启动UDP客户端`node udp\_client.js`，确保服务端可用。

![image.png](\&\&KNOWLEDGEIMGURLPREFIX\&\&/20260102/689bd651-aab1-4356-a491-f78b67564ae9.png)

（3）确保端云在同一个网络内，部署应用到端侧，并在页面上修改默认的服务端IP，服务端Port和客户端IP。



## 约束与限制



例如：



* 本示例支持API Version 20 Release及以上版本。

* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。

* 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。



## 工程目录



```

│  Readme.md

│  tcp\_client.js

│  tcp\_server.js

│  udp\_client.js

│  udp\_server.js

└─UniappCallTCP

    │  App.vue

    │  index.html

    │  main.js

    │  manifest.json

    │  pages.json

    │  uni.promisify.adaptor.js

    │  uni.scss

    ├─pages

    │  ├─calltcp

    │  │      calltcp.vue

    │  │

    │  ├─calludp

    │  │      calludp.vue

    │  │

    │  └─index

    │          index.vue

    │

    ├─static

    │      logo.png

    │

    └─uni\_modules

        └─hongmeng-calltcp

            │  package.json

            └─utssdk

                └─app-harmony

                        index.uts

                        TcpClient.ets

                        UdpClient.ets

```



\## 参考文档

\[使用socket访问网络](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/socket-connection)