网站导航
> 技术文档 > 详解 TCPServer、Client 通讯工具的使用与代码实现

详解 TCPServer、Client 通讯工具的使用与代码实现

网友: 技术文档 2025-09-03 13:01:11

在与硬件进行通讯的开发过程中，TCP协议是一种常用的可靠传输方式。本文将详细介绍一款TCPServer、Client 通讯工具插件的使用方法，通过具体的代码示例，分解步骤，帮助读者正确理解，如何使用该工具实现通讯功能，包括接收消息、发送消息灯操作。

一、插件介绍与通用使用流程

1.1插件功能

       这款TCPServer、Client 通讯工具插件（插件路径：https://ext.dcloud.net.cn/plugin?id=17492）可以实现TCP服务器（Server）和客户端（Client）之间的通讯，支持字符串和16进制byte数组两种手法模式，能满足与硬件通讯的基本需求，可实现节后消息和发送消息等功能。

1.2通用使用流程

  1.  购买插件，选择该插件绑定的项目。
  2. 在 HBuilderX 里找到项目，在 manifest 的 app 原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包。
  6. 注意事项：付费原生插件目前不支持离线打包。Android 和 iOS 离线打包原生插件另见相应文档；使用 HBuilderX2.7.14 以下版本，如果同一插件且同一 appid 下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在 HBuilderX 项目中 manifest.json->“App 原生插件配置”->” 云端插件 “列表中删除该插件重新选择。

二、项目初始化与插件引入

2.1 页面结构搭建

        首先，我们来看一下页面的基本结构。在 template 中，我们划分了多个功能区域，分别对应 TCP Server 的字符串通讯、16 进制 byte 数组通讯，TCP Client 的字符串模式、16 进制 byte 数组模式，以及消息显示区域等。每个区域都有相应的按钮用于触发不同的功能，还有输入框用于设置服务器地址等参数。

2.2 插件引入

        在页面的 script 部分，通过uni.requireNativePlugin(\'jjc-tcpTools\')引入插件，具体代码如下：

onLoad() { var that = this that.$data.connections = uni.requireNativePlugin(\'jjc-tcpTools\')}

        这样就可以在页面中使用该插件提供的各种方法来实现 TCP 通讯功能了。

三、TCP Server 功能实现

3.1 创建字符串通讯的 TCP Server

  • 功能说明：创建一个基于字符串收发模式的 TCP 服务器，指定端口号，设置创建结果和接收数据的回调函数。
  • 代码实现： 
    createTcpServer() { var that = this that.$data.msgs.push(\"click\") that.$data.connections.createTcpServer(5460, function(res) { console.log(res) that.$data.msgs.push(res.result) }, function(res) { console.log(res) that.$data.msgs.push(res) })}
  • 步骤解析：

        a. 调用插件的createTcpServer方法，传入端口号 5460。​

        b. 第一个回调函数用于接收创建服务器的结果信息，并将结果添加到消息列表中显示。​

        c. 第二个回调函数用于接收客户端发送的数据，并将数据添加到消息列表中显示。

3.2 TCP Server 发送字符串测

  • 功能说明：向连接到该 TCP 服务器的所有客户端发送字符串数据。
  • 代码实现： 
    sendTcpMSG2Client() { var that = this that.$data.connections.sendTcpMSG2Client(5460, \"来自服务器\", function(res) { console.log(res) that.$data.msgs.push(res) })}
  • 步骤解析：

         a.调用插件的 sendTcpMSG2Client 方法，传入服务器端口号 5460 和要发送的字符串 “来自服务器”。

        b. 回调函数接收发送结果，并将结果添加到消息列表中显示。

3.3 创建 16 进制 byte 数组通讯的 TCP Server

  • 功能说明：创建一个基于 16 进制 byte 数组收发模式的 TCP 服务器，指定端口号，设置创建结果和接收数据的回调函数。
  • 代码实现： 
    createByteTcpServer() { var that = this that.$data.connections.createByteTcpServer(5460, function(res) { console.log(res) that.$data.msgs.push(res.result) }, function(res) { console.log(res) that.ip = res.ip that.port = res.port that.$data.msgs.push(JSON.stringify(res)) })}
  • 步骤解析：​

        a. 调用插件的createByteTcpServer方法，传入端口号 5460。​

        b. 第一个回调函数用于接收创建服务器的结果信息，并将结果添加到消息列表中显示。​

        c. 第二个回调函数用于接收客户端发送的 16 进制 byte 数组数据，记录客户端的 IP 和端口，并将数据转换为 JSON 字符串添加到消息列表中显示。

3.4 TCP Server 发送 16 进制 byte 数组测试

  • 功能说明：向连接到该 TCP 服务器的所有客户端发送 16 进制 byte 数组数据。
  • 代码实现：
sendTcpByteMSG2Client() { var that = this let msg = [Number(0x55), Number(0x55), Number(0x55), Number(0x55), Number(0x55), Number(0x55)] that.$data.connections.sendTcpByteMSG2Client(5460, msg, function(res) { console.log(res) that.$data.msgs.push(res) })}
  • 步骤解析：

        a. 定义一个 16 进制 byte 数组msg，这里是 6 个 0x55。​

        b. 调用插件的sendTcpByteMSG2Client方法，传入服务器端口号 5460 和要发送的 byte 数组。

        c. 回调函数接收发送结果，并将结果添加到消息列表中显示。

3.5 向指定客户端发送 16 进制 byte 数组命令

  • 功能说明：向指定 IP 和端口的客户端发送特定的 16 进制 byte 数组指令。
  • 代码实现：
Frames() { var that = this let arr = [{\"ip\":this.ip,\"port\":this.port}] console.log(\'arr\',arr) let msg = [Number(0x17), Number(0x99), Number(0x02), Number(0x02), Number(0x00), Number(0x00), Number(0x00), Number(0x01), Number(0x01), Number(0x00), Number(0x00), Number(0x21), Number(0x69)] that.$data.connections.sendTcpByteMSG2Clients(5460,JSON.stringify(arr), msg, function(res) { console.log(res) that.$data.msgs.push(res) })}
  • 步骤解析：

 a. 定义一个包含客户端 IP 和端口的数组arr，这里的 IP 和端口是之前接收数据时记录的客户端信息。​

 b. 定义要发送的 16 进制 byte 数组指令msg。

 c. 调用插件的sendTcpByteMSG2Clients方法，传入服务器端口号 5460、客户端信息的 JSON 字符串和要发送的 byte 数组。

d. 回调函数接收发送结果，并将结果添加到消息列表中显示。

3.6 关闭 TCP Server

  • 功能说明：向指定 IP 和端口的客户端发送特定的 16 进制 byte 数组指令。
  • 代码实现： 
    closeServer() { var that = this that.$data.connections.closeTcpServer(5460, function(res) { console.log(res) that.$data.msgs.push(res.result) })}
  • 步骤解析：

         a. 调用插件的 closeTcpServer 方法，传入服务器端口号 5460。

         b. 回调函数接收关闭服务器的结果信息，并将结果添加到消息列表中显示。

四、TCP Client 功能实现

4.1 创建字符串模式的 TCP Client

  • 功能说明：创建一个基于字符串收发模式的 TCP 客户端，连接到指定的服务器，设置创建结果和接收数据的回调函数。
  • 代码实现：
createTcpClient() { var that = this that.$data.connections.createTcpClient(that.$data.tcpServerIP, 10203, function(res) { console.log(res) that.$data.msgs.push(res.result) }, (e) => { console.log(\"客户端接收：\", e) that.$data.msgs.push(e) })}
  • 步骤解析：

a. 调用插件的createTcpClient方法，传入服务器地址that.$data.tcpServerIP和端口号 10203。​

b. 第一个回调函数用于接收创建客户端的结果信息，并将结果添加到消息列表中显示。​

c. 第二个回调函数用于接收服务器发送的数据，并将数据添加到消息列表中显示。

4.2 TCP Client 发送字符串测试

  • 功能说明：向连接的 TCP 服务器发送字符串数据。
  • 代码实现：
sendTcpMSG2Server() { var that = this that.$data.connections.sendTcpMSG2Server(that.$data.tcpServerIP, 10203, \"客户端发送\", function(res) { console.log(res) that.$data.msgs.push(res.result) }, (e) => { console.log(\"客户端接收：\", e) that.$data.msgs.push(e) })}
  • 步骤解析：

a. 调用插件的sendTcpMSG2Server方法，传入服务器地址、端口号 10203 和要发送的字符串 “客户端发送”。​

b. 第一个回调函数接收发送结果，并将结果添加到消息列表中显示。​

c. 第二个回调函数用于接收服务器发送的响应数据，并将数据添加到消息列表中显示。

4.3 创建 16 进制 byte 数组模式的 TCP Client

  • 功能说明：创建一个基于 16 进制 byte 数组收发模式的 TCP 客户端，连接到指定的服务器，设置创建结果和接收数据的回调函数。
  • 代码实现：
createTcpClient_byte() { var that = this that.$data.connections.createByteTcpClient(that.$data.tcpServerIP, 10203, function(res) { console.log(res) that.$data.msgs.push(res.result) }, (e) => { console.log(\"客户端接收：\", e) that.$data.msgs.push(e) })}
  • 步骤解析：

a. 调用插件的createByteTcpClient方法，传入服务器地址that.$data.tcpServerIP和端口号 10203。​

b. 第一个回调函数用于接收创建客户端的结果信息，并将结果添加到消息列表中显示。​

c. 第二个回调函数用于接收服务器发送的 16 进制 byte 数组数据，并将数据添加到消息列表中显示。

4.4 TCP Client 发送 16 进制 byte 数组测试

  • 功能说明：向连接的 TCP 服务器发送 16 进制 byte 数组数据。
  • 代码实现：
sendTcpMSGByte2Server() { var that = this let msg = [Number(0x55), Number(0x55), Number(0x55), Number(0x55), Number(0x55), Number(0x55)] that.$data.connections.sendTcpMSGByte2Server(that.$data.tcpServerIP, 10203, msg, function(res) { console.log(res) that.$data.msgs.push(res.result) }, (e) => { console.log(\"客户端接收：\", e) that.$data.msgs.push(e) })}
  • 步骤解析：​

a. 定义一个 16 进制 byte 数组msg，这里是 6 个 0x55。​

b. 调用插件的sendTcpMSGByte2Server方法，传入服务器地址、端口号 10203 和要发送的 byte 数组。​

c. 第一个回调函数接收发送结果，并将结果添加到消息列表中显示。​

d. 第二个回调函数用于接收服务器发送的响应数据，并将数据添加到消息列表中显示。

4.5 关闭 TCP Client

  • 功能说明：关闭创建的 TCP 客户端。
  • 代码实现： 
    closeClient() { var that = this that.$data.connections.closeTcpClient(that.$data.tcpServerIP, 10203, function(res) { console.log(res) that.$data.msgs.push(res.result) })}
  • 步骤解析：​

a. 调用插件的closeTcpClient方法，传入服务器地址和端口号 10203。​

b. 回调函数接收关闭客户端的结果信息，并将结果添加到消息列表中显示。

五、日志查看与清除

5.1 日志显示

在页面中，有一个专门的区域用于显示接收和发送的消息日志，代码如下：

 接收消息显示   来自：{{msg.ip}}:{{msg.port}},消息：{{msg.msg}}   来自：{{msg.ip}}:{{msg.port}},消息：  {{s}},    {{msg}}
  • 当消息类型为 0 时，显示字符串消息，包括发送方的 IP、端口和消息内容。​
  • 当消息类型为 1 时，显示 16 进制 byte 数组消息，包括发送方的 IP、端口和每个字节的内容。​
  • 其他类型的消息则直接显示消息内容。

5.2 日志清除

虽然在提供的代码中没有专门的清除日志按钮，但我们可以很容易地添加一个。例如，在页面中添加一个按钮：

然后在 methods 中添加对应的方法：

clearLogs() { this.msgs = [\"接收数据\"]}

这样，点击 “清除日志” 按钮后，消息列表就会被重置为初始状态。​

通过以上步骤，我们详细介绍了如何使用这款 TCPServer、Client 通讯工具插件实现 TCP 通讯功能，包括服务器和客户端的创建、数据的发送与接收以及日志的查看与清除。希望本文能帮助读者更好地理解和使用该工具进行与硬件的通讯开发。

网络标签：

相关问题