uniapp+vue3实现CK通信协议（基于jjc-tcpTools）

1. TCP 服务封装 (tcpService.js)

export class TcpService {constructor() {this.connections = uni.requireNativePlugin('jjc-tcpTools')this.clients = new Map() // 存储客户端连接this.servers = new Map() // 存储服务端实例}// 创建 TCP 服务端 (字符串模式)createStringServer(port, onCreated, onData, onConnect) {this.connections.createTcpServer(port,(res) => {console.log('Server created:', res)this.servers.set(port, { type: 'string' })onCreated?.(res)},(res) => {console.log('Received data:', res)this._addClient(res.ip, res.port)onData?.(res)},(res) => {console.log('New connection:', res)this._addClient(res.ip, res.port)onConnect?.(res)})}// 创建 TCP 服务端 (字节数组模式)createByteServer(port, onCreated, onData) {this.connections.createByteTcpServer(port,(res) => {console.log('Byte server created:', res)this.servers.set(port, { type: 'byte' })onCreated?.(res)},(res) => {console.log('Received byte data:', res)this._addClient(res.ip, res.port)onData?.(res)})}// 创建 TCP 客户端 (字符串模式)createStringClient(ip, port, onCreated, onData) {this.connections.createTcpClient(ip,port,(res) => {console.log('Client connected:', res)this.clients.set(`${ip}:${port}`, { type: 'string' })onCreated?.(res)},(res) => {console.log('Client received:', res)onData?.(res)})}// 创建 TCP 客户端 (字节数组模式)createByteClient(ip, port, onCreated, onData) {this.connections.createByteTcpClient(ip,port,(res) => {console.log('Byte client connected:', res)this.clients.set(`${ip}:${port}`, { type: 'byte' })onCreated?.(res)},(res) => {console.log('Byte client received:', res)onData?.(res)})}// 发送数据 (服务端群发字符串)sendToAllClients(port, message, callback) {this.connections.sendTcpMSG2Client(port,message,(res) => {console.log('Send to all:', res)callback?.(res)})}// 发送数据 (服务端指定客户端发字符串)sendToClients(port, clients, message, callback) {this.connections.sendTcpMSG2Clients(port,JSON.stringify(clients),message,(res) => {console.log('Send to clients:', res)callback?.(res)})}// 发送数据 (客户端发字符串)sendToServer(ip, port, message, callback) {this.connections.sendTcpMSG2Server(ip,port,message,(res) => {console.log('Send to server:', res)callback?.(res)})}// 发送字节数据 (服务端群发)sendBytesToAllClients(port, byteArray, callback) {this.connections.sendTcpByteMSG2Client(port,byteArray,(res) => {console.log('Send bytes to all:', res)callback?.(res)})}// 发送字节数据 (服务端指定客户端发)sendBytesToClients(port, clients, byteArray, callback) {this.connections.sendTcpByteMSG2Clients(port,JSON.stringify(clients),byteArray,(res) => {console.log('Send bytes to clients:', res)callback?.(res)})}// 发送字节数据 (客户端发)sendBytesToServer(ip, port, byteArray, callback) {this.connections.sendTcpMSGByte2Server(ip,port,byteArray,(res) => {console.log('Send bytes to server:', res)callback?.(res)})}// 设置客户端重连时间setReconnectTime(ip, port, interval, callback) {this.connections.setReConnectTime(ip,port,interval,(res) => {console.log('Set reconnect time:', res)callback?.(res)})}// 关闭客户端closeClient(ip, port, callback) {this.connections.closeTcpClient(ip,port,(res) => {console.log('Client closed:', res)this.clients.delete(`${ip}:${port}`)callback?.(res)})}// 关闭服务端closeServer(port, callback) {this.connections.closeTcpServer(port,(res) => {console.log('Server closed:', res)this.servers.delete(port)callback?.(res)})}// 私有方法：添加客户端记录_addClient(ip, port) {const key = `${ip}:${port}`if (!this.clients.has(key)) {this.clients.set(key, { ip, port })}}
}// 单例模式导出
export const tcpService = new TcpService()

2. CK协议适配器 (ckProtocol.js)

import { tcpService } from './tcpService'
import { crc16 } from './crc16'// 命令类型枚举
const CMD_TYPE = {LOCK_CONTROL: 0x01,// ...其他命令类型
}export class CKProtocol {constructor() {this.cabinetNo = 0 // 默认柜号this.serialNo = 0 // 序列号计数器}// 初始化连接init(ip, port = 5460) {this.serverIp = ipthis.serverPort = port// 创建字节数组模式的客户端连接tcpService.createByteClient(ip,port,(res) => {console.log('Connected to CK device:', res)this.isConnected = res.result === 'success'},(res) => {this.handleDeviceResponse(res)})}// 构建协议帧buildFrame(cmdType, cmdTag, data = null) {const magic = 0x1799 // 上位机→主板通信const dataLength = data ? data.length : 0const buffer = new ArrayBuffer(11 + dataLength)const view = new DataView(buffer)// 填充帧头view.setUint16(0, magic, false)view.setUint8(2, this.cabinetNo)view.setUint32(3, this.serialNo++, false)view.setUint8(7, cmdType)view.setUint8(8, cmdTag)view.setUint16(9, dataLength, false)// 填充数据区if (data && dataLength > 0) {for (let i = 0; i < dataLength; i++) {view.setUint8(11 + i, data[i])}}// 计算CRC16const crc = crc16(new Uint8Array(buffer.slice(0, 11 + dataLength)))// 创建最终字节数组const fullFrame = new Uint8Array(13 + dataLength)fullFrame.set(new Uint8Array(buffer), 0)fullFrame.set([crc >> 8, crc & 0xFF], 11 + dataLength)return fullFrame}// 发送命令sendCommand(cmdType, cmdTag, data = null) {if (!this.isConnected) {console.error('Not connected to device')return false}const frame = this.buildFrame(cmdType, cmdTag, data)tcpService.sendBytesToServer(this.serverIp,this.serverPort,Array.from(frame),(res) => {console.log('Command sent:', res)})return true}// 处理设备响应handleDeviceResponse(response) {try {// 将响应数据转换为Uint8Arrayconst data = new Uint8Array(response.msg.split(',').map(Number))// 解析响应帧if (data.length < 12) {throw new Error('Invalid response length')}const view = new DataView(data.buffer)const magic = view.getUint16(0, false)const cabinetNo = view.getUint8(2)const serialNo = view.getUint32(3, false)const cmdType = view.getUint8(7)const cmdTag = view.getUint8(8)const result = view.getUint8(9)const dataLength = view.getUint16(10, false)// 验证CRCconst receivedCrc = view.getUint16(12 + dataLength, false)const calculatedCrc = crc16(data.slice(0, 12 + dataLength))if (receivedCrc !== calculatedCrc) {throw new Error('CRC check failed')}// 提取数据区let responseData = nullif (dataLength > 0) {responseData = data.slice(12, 12 + dataLength)}// 返回解析结果return {magic,cabinetNo,serialNo,cmdType,cmdTag,result,dataLength,data: responseData}} catch (error) {console.error('Failed to parse device response:', error)return null}}// 锁控命令controlLock(lockNo, action) {const tagMap = {open: 0x01,close: 0x03,status: 0x02,openAll: 0x06}const tag = tagMap[action]if (tag === undefined) return falseconst data = action === 'openAll' ? null : new Uint8Array([lockNo])return this.sendCommand(CMD_TYPE.LOCK_CONTROL, tag, data)}// 查询设备信息queryDeviceInfo(infoType) {const tagMap = {mac: 0x01,hardwareVersion: 0x02,softwareVersion: 0x03,firmwareTime: 0x04,uptime: 0x05}const tag = tagMap[infoType]if (tag === undefined) return falsereturn this.sendCommand(CMD_TYPE.QUERY_INFO, tag)}// 其他协议命令...
}// 单例模式导出
export const ckProtocol = new CKProtocol()

3. Vue组件中使用 (DeviceControl.vue)

<template><view class="device-control"><view class="connection-section"><input v-model="serverIp" placeholder="设备IP" /><input v-model="serverPort" placeholder="端口号" type="number" /><button @click="connectDevice" :disabled="isConnected">连接</button><button @click="disconnectDevice" :disabled="!isConnected">断开</button></view><view class="command-section"><view class="command-group"><text class="group-title">锁控制</text><button @click="openLock(1)">开锁1</button><button @click="closeLock(1)">关锁1</button><button @click="openAllLocks">开所有锁</button></view><view class="command-group"><text class="group-title">设备查询</text><button @click="queryMac">查询MAC</button><button @click="queryVersion">查询版本</button></view></view><view class="log-section"><text class="section-title">通信日志</text><scroll-view class="log-content" scroll-y><view v-for="(log, index) in logs" :key="index" class="log-item">{{ log }}</view></scroll-view></view></view>
</template><script setup>
import { ref } from 'vue'
import { ckProtocol } from '@/api/ckProtocol'const serverIp = ref('192.168.1.100')
const serverPort = ref('5460')
const isConnected = ref(false)
const logs = ref([])// 连接设备
const connectDevice = () => {addLog(`正在连接 ${serverIp.value}:${serverPort.value}...`)ckProtocol.init(serverIp.value, parseInt(serverPort.value))// 模拟连接成功 (实际应该通过回调事件)setTimeout(() => {isConnected.value = trueaddLog('连接成功')}, 1000)
}// 断开连接
const disconnectDevice = () => {tcpService.closeClient(serverIp.value, serverPort.value, (res) => {isConnected.value = falseaddLog('已断开连接')})
}// 锁控制命令
const openLock = (lockNo) => {addLog(`发送开锁命令: 锁${lockNo}`)ckProtocol.controlLock(lockNo, 'open')
}const closeLock = (lockNo) => {addLog(`发送关锁命令: 锁${lockNo}`)ckProtocol.controlLock(lockNo, 'close')
}const openAllLocks = () => {addLog('发送开所有锁命令')ckProtocol.controlLock(null, 'openAll')
}// 查询命令
const queryMac = () => {addLog('发送查询MAC地址命令')ckProtocol.queryDeviceInfo('mac')
}const queryVersion = () => {addLog('发送查询版本命令')ckProtocol.queryDeviceInfo('softwareVersion')
}// 添加日志
const addLog = (message) => {const timestamp = new Date().toLocaleTimeString()logs.value.unshift(`[${timestamp}] ${message}`)if (logs.value.length > 100) {logs.value.pop()}
}
</script><style>
.device-control {padding: 20px;
}.connection-section {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;
}.connection-section input {flex: 1;min-width: 120px;padding: 8px;border: 1px solid #ddd;border-radius: 4px;
}.connection-section button {min-width: 80px;
}.command-section {margin-bottom: 20px;
}.command-group {margin-bottom: 15px;padding: 10px;background-color: #f5f5f5;border-radius: 8px;
}.group-title {display: block;font-weight: bold;margin-bottom: 8px;
}.command-group button {margin-right: 10px;margin-bottom: 8px;
}.log-section {margin-top: 20px;
}.section-title {font-weight: bold;margin-bottom: 8px;
}.log-content {height: 200px;padding: 10px;background-color: #f0f0f0;border-radius: 4px;font-family: monospace;font-size: 12px;
}.log-item {margin-bottom: 4px;padding-bottom: 4px;border-bottom: 1px solid #e0e0e0;
}
</style>

4. CRC16工具 (crc16.js)

// CRC-16/XMODEM (x16 + x12 + x5 + 1)
export function crc16(data) {let crc = 0x0000for (let i = 0; i < data.length; i++) {crc ^= data[i] << 8for (let j = 0; j < 8; j++) {if (crc & 0x8000) {crc = (crc << 1) ^ 0x1021} else {crc <<= 1}}}return crc & 0xFFFF
}

关键点说明

  1. 完全适配 jjc-tcpTools 插件：

    • 严格按照插件提供的 API 进行封装
    • 支持字符串和字节数组两种通信模式
    • 实现了服务端和客户端的所有基本操作

  2. CK 协议实现：

    • 按照文档规范构建协议帧
    • 实现了 CRC16 校验
    • 封装了常用命令如锁控制、设备查询等

  3. 组件集成：

    • 提供直观的设备控制界面
    • 显示通信日志
    • 管理连接状态

  4. 错误处理：

    • 基本的错误检测和日志记录
    • CRC 校验确保数据完整性

  5. 扩展性：

    • 可以轻松添加更多协议命令
    • 支持多设备管理

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/pingmian/83761.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

学习设计模式《十二》——命令模式

学习设计模式《十二》——命令模式

一、基础概念 命令模式的本质是【封装请求】命令模式的关键是把请求封装成为命令对象&#xff0c;然后就可以对这个命令对象进行一系列的处理&#xff08;如&#xff1a;参数化配置、可撤销操作、宏命令、队列请求、日志请求等&#xff09;。 命令模式的定义&#xff1a;将一个…
阅读更多...
Webpack的基本使用 - babel

Webpack的基本使用 - babel

Mode配置 Mode配置选项可以告知Webpack使用相应模式的内置优化 默认值是production&#xff08;什么都不设置的情况下&#xff09; 可选值有&#xff1a;none | development | production; 这几个选项有什么区别呢&#xff1f; 认识source-map 我们的代码通常运行在浏览器…
阅读更多...
「基于连续小波变换（CWT）和卷积神经网络（CNN）的心律失常分类算法——ECG信号处理-第十五课」2025年6月6日

「基于连续小波变换（CWT）和卷积神经网络（CNN）的心律失常分类算法——ECG信号处理-第十五课」2025年6月6日

一、引言 心律失常是心血管疾病的重要表现形式&#xff0c;其准确分类对临床诊断具有关键意义。传统的心律失常分类方法主要依赖于人工特征提取和经典机器学习算法&#xff0c;但这些方法往往受限于特征选择的主观性和模型的泛化能力。 随着深度学习技术的发展&#xff0c;基于…
阅读更多...
C++.OpenGL （11/64）材质（Materials）

C++.OpenGL （11/64）材质（Materials）

材质（Materials） 真实感材质系统 #mermaid-svg-NjBjrmlcpHupHCFQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-NjBjrmlcpHupHCFQ .error-icon{fill:#552222;}#mermaid-svg-NjBjrmlcpHupHCFQ .error-text{fill:…
阅读更多...
P1345 [USACO5.4] 奶牛的电信Telecowmunication

P1345 [USACO5.4] 奶牛的电信Telecowmunication

P1345 [USACO5.4] 奶牛的电信Telecowmunication 突然发现 USACO 好喜欢玩谐音梗。 题意就是给定一个无向图&#xff0c;问你要删多少点才能使 s , t s,t s,t 不连通。 注意是删点而不是删边&#xff0c;所以不能直接使用最小割来求。所以考虑变换一下题目模型。 经典 tric…
阅读更多...
EXCEL如何快速批量给两字姓名中间加空格

EXCEL如何快速批量给两字姓名中间加空格

EXCEL如何快速批量给姓名中间加空格 优点&#xff1a;不会导致排版混乱 缺点&#xff1a;无法输出在原有单元格上&#xff0c;若需要保留原始数据&#xff0c;可将公式结果复制后“选择性粘贴为值” 使用场景&#xff1a;在EXCEL中想要快速批量给两字姓名中间加入空格使姓名对…
阅读更多...
使用vtk8.2.0加载dicom图像

使用vtk8.2.0加载dicom图像

1 上一篇文章我们已经编译好了VTK的dll&#xff0c;下面我们就来加载他。 2 在Pro里面加载dll #------------------------------------------------- # # Project created by QtCreator 2024-02-04T14:39:07 # #-------------------------------------------------QT …
阅读更多...
使用vsftpd搭建FTP服务器（TLS/SSL显式加密）

使用vsftpd搭建FTP服务器（TLS/SSL显式加密）

安装vsftpd服务 使用vsftpd RPM安装包安装即可&#xff0c;如果可以访问YUM镜像源&#xff0c;通过dnf或者yum工具更加方便。 yum -y install vsftpd 启动vsftpd、查看服务状态 systemctl enable vsftpd systemctl start vsftpd systemctl status vsftpd 备份配置文件并进…
阅读更多...
鸿蒙OSUniApp集成WebGL：打造跨平台3D视觉盛宴#三方框架 #Uniapp

鸿蒙OSUniApp集成WebGL：打造跨平台3D视觉盛宴#三方框架 #Uniapp

UniApp集成WebGL&#xff1a;打造跨平台3D视觉盛宴 在移动应用开发日新月异的今天&#xff0c;3D视觉效果已经成为提升用户体验的重要手段。本文将深入探讨如何在UniApp中集成WebGL技术&#xff0c;实现炫酷的3D特效&#xff0c;并特别关注鸿蒙系统(HarmonyOS)的适配与优化。 …
阅读更多...
前端文件下载常用方式详解

前端文件下载常用方式详解

在前端开发中&#xff0c;实现文件下载是常见的需求。根据不同的场景&#xff0c;我们可以选择不同的方法来实现文件流的下载。本文介绍三种常用的文件下载方式&#xff1a; 使用 axios 发送 JSON 请求下载文件流使用 axios 发送 FormData 请求下载文件流使用原生 form 表单提…
阅读更多...
MacOS解决局域网“没有到达主机的路由 no route to host“

MacOS解决局域网“没有到达主机的路由 no route to host“

可能原因&#xff1a;MacOS 15新增了"本地网络"访问权限&#xff0c;在 APP 第一次尝试访问本地网络的时候会请求权限&#xff0c;可能顺手选择了关闭。 解决办法&#xff1a;给想要访问本地网络的 APP &#xff08;例如 terminal、Navicat、Ftp&#xff09;添加访问…
阅读更多...
中英文实习证明模板：一键生成标准化实习证明，助力实习生职场发展

中英文实习证明模板：一键生成标准化实习证明，助力实习生职场发展

中英文实习证明模板&#xff1a;一键生成标准化实习证明&#xff0c;助力实习生职场发展 【下载地址】中英文实习证明模板 这份中英文实习证明模板专为实习生设计&#xff0c;内容简洁专业&#xff0c;适用于多种场景。模板采用中英文对照格式&#xff0c;方便国际交流与使用。…
阅读更多...
RocketMQ运行架构和消息模型

RocketMQ运行架构和消息模型

运⾏架构 nameServer 命名服务 NameServer 是 RocketMQ 的 轻量级注册中心&#xff0c;负责管理集群的路由信息&#xff08;Broker 地址、Topic 队列分布等&#xff09;&#xff0c;其核心作用是解耦 Broker 与客户端&#xff0c;实现动态服务发现。broker 核⼼服务 RocketMQ最…
阅读更多...
C++学习-入门到精通【11】输入/输出流的深入剖析

C++学习-入门到精通【11】输入/输出流的深入剖析

C学习-入门到精通【11】输入/输出流的深入剖析 目录 C学习-入门到精通【11】输入/输出流的深入剖析一、流1.传统流和标准流2.iostream库的头文件3.输入/输出流的类的对象 二、输出流1.char* 变量的输出2.使用成员函数put进行字符输出 三、输入流1.get和getline成员函数2.istrea…
阅读更多...
OpenCV 图像像素的逻辑操作

OpenCV 图像像素的逻辑操作

一、知识点 1、图像像素的逻辑操作&#xff0c;指的是位操作bitwise&#xff0c;与、或、非、异或等。 2、位操作简介: 位1 位2 与and 或or 异或xor0 0 0 0 00 1 0 1 11 0 0 …
阅读更多...
【AAOS】【源码分析】用户管理（二）-- 整体架构

【AAOS】【源码分析】用户管理（二）-- 整体架构

整体介绍 Android多用户功能作为 Android Automotive 的重要组成部分，为不同驾驶员和乘客提供了一个更加定制化、隐私保护的使用环境。Android 多用户的存在，它可以让多个用户使用同一台设备，同时保持彼此的数据、应用和设置分隔开来。 各用户类型的权限 能力SystemAdminS…
阅读更多...
Redis最佳实践——电商应用的性能监控与告警体系设计详解

Redis最佳实践——电商应用的性能监控与告警体系设计详解

Redis 在电商应用的性能监控与告警体系设计 一、原子级监控指标深度拆解 1. 内存维度监控 核心指标&#xff1a; # 实时内存组成分析&#xff08;单位字节&#xff09; used_memory: 物理内存总量 used_memory_dataset: 数据集占用量 used_memory_overhead: 管理开销内存 us…
阅读更多...
多模态大语言模型arxiv论文略读（109）

多模态大语言模型arxiv论文略读（109）

Math-PUMA: Progressive Upward Multimodal Alignment to Enhance Mathematical Reasoning ➡️ 论文标题&#xff1a;Math-PUMA: Progressive Upward Multimodal Alignment to Enhance Mathematical Reasoning ➡️ 论文作者&#xff1a;Wenwen Zhuang, Xin Huang, Xiantao Z…
阅读更多...
web3-以太坊智能合约基础（理解智能合约Solidity）

web3-以太坊智能合约基础（理解智能合约Solidity）

以太坊智能合约基础&#xff08;理解智能合约/Solidity&#xff09; 无需编程经验&#xff0c;也可以帮助你了解Solidity独特的部分&#xff1b;如果本身就有相应的编程经验如java&#xff0c;python等那么学起来也会非常的轻松 一、Solidity和EVM字节码 实际上以太坊链上储存…
阅读更多...
D2-基于本地Ollama模型的多轮问答系统

D2-基于本地Ollama模型的多轮问答系统

本程序是一个基于 Gradio 和 Ollama API 构建的支持多轮对话的写作助手。相较于上一版本&#xff0c;本版本新增了对话历史记录、Token 计数、参数调节和清空对话功能&#xff0c;显著提升了用户体验和交互灵活性。 程序通过抽象基类 LLMAgent 实现模块化设计&#xff0c;当前…
阅读更多...
最新文章

Copyright @ 2022~2023