今天给大家介绍一个通讯工具，可以自己写html页面，自己写Js脚本实现数据收发。

本程序在不断完善中，请大家不要喷，多多理解，有意见只管提。

系列文章

概述

串口基础功能

TCP客户端收发

参数篇

串口快捷命令列表

api

界面

客户端，本程序模拟客户端

模拟服务端（这个是第三方的，后期本程序也会加入服务端功能）

功能说明

在html页面中，也就是在网页中开发串口或者TCP通讯工具，网页不需要编译，修改后刷新就可以显示，所以非常方便。定制性特别强，使用者完全可以根据自己的需要定制自己的调试工具。

支持串口数据收发，TCP客户端数据收发等。

TCP客户端

<body>

    <div>tcp测试客户端</div>

    <input type="text" id="txtServer" value="127.0.0.1" />

    <input type="text" id="txtPort" value="60000" />

    <button onclick="conn()">连接</button>

    <button onclick="close()">断开</button>

    <button onclick="sendData()">发送</button>

    <button onclick="recvData()">接收</button>

</body>

<script type="text/javascript">

    (async function () {

        await CefSharp.BindObjectAsync("tcpClientHelper");

    })();

    function conn() {

        (async function () {

            await CefSharp.BindObjectAsync("tcpClientHelper");

            var server = document.getElementById("txtServer").value;

            var port = document.getElementById("txtPort").value;

            console.log(server, port);

            await tcpClientHelper.conn(server, parseInt(port));

            //建立连接后发登录

            await tcpClientHelper.sendData("383635333734303530363031353933");

            setTimeout("recvData()", 1000);

        })();

    }

    function close() {

        (async function () {

            await CefSharp.BindObjectAsync("tcpClientHelper");

            await tcpClientHelper.close();

        })();

    }

    function sendData() {

        (async function () {

            await CefSharp.BindObjectAsync("tcpClientHelper");

            await tcpClientHelper.sendData("313233");

            console.log('sendData');

        })();

    }

    function recvData() {

        (async function () {

            await CefSharp.BindObjectAsync("tcpClientHelper");

            let recvString = await tcpClientHelper.recvData();

            console.log('[' + recvString+ ']');

            if (recvString.trim() == '680100010068FFFFFFFFFFFF010100CE16') {

                console.log('ok 31');

                await tcpClientHelper.sendData('68 03 00 03 00 68 FF FF FF FF FF FF 81 01 00 01 AA BB B8 16');

            }

            else if (recvString.trim() == '680100010068FFFFFFFFFFFF020000552316') {

                console.log('ok 32');

                await tcpClientHelper.sendData('68 01 00 01 00 68 FF FF FF FF FF FF 82 01 00 FF 4E 16');

            }

            setTimeout("recvData()", 1000);

        })();

    }

</script>

串口

<body>

    <div>串口测试</div>

</body>

<script type="text/javascript">

    (async function () {

        await CefSharp.BindObjectAsync("serialPortHelper");

        await serialPortHelper.init();

        //setTimeout("changeState()", 1000);

    })();

    function changeState() {

        (async function () {

            await CefSharp.BindObjectAsync("serialPortHelper");

            let recvString = await serialPortHelper.recvData();

            console.log('-' + recvString+ '-');

            if (recvString.trim() == '11') {

                console.log('ok');

                await serialPortHelper.send_data('22');

            }

            setTimeout("changeState()", 1000);

        })();

    }

</script>

文档

完善中。。。

其他

下载地址

有其他需求或者使用上的问题，请加群讨论。

用html自己开发自己的串口TCP通讯调试软件的更多相关文章

  1. 关于网页实现串口或者TCP通讯的说明

    概述 最近经常有网页联系我,反馈为什么他按我说的方法,写的HTML代码,无法在chrome网页中运行.这里我统一做一个解释,我发现好多网页并没有理解我的意思. 其实,要实现在HTML中进行串口或者TC ...

  2. 配置开发支持高并发TCP连接的Linux应用程序全攻略

    http://blog.chinaunix.net/uid-20733992-id-3447120.html http://blog.chinaunix.net/space.php?uid=16480 ...

  3. .Net开发笔记（十五） 基于“泵”的TCP通讯（接上篇）

    上一篇博客中说了基于“泵”的UDP通讯,附上了一个Demo,模拟飞鸽传书的功能,功能不太完善,主要是为了说明“泵”在编程中的应用.本篇文章我再附上一个关于TCP通讯的两个Demo,也都采用了“泵”模式 ...

  4. C#TCP通讯框架

    开源的C#TCP通讯框架 原来收费的TCP通讯框架开源了,这是一款国外的开源TCP通信框架,使用了一段时间,感觉不错,介绍给大家 框架名称是networkcomms 作者开发了5年多,目前已经停止开发 ...

  5. 推荐一款开源的C#TCP通讯框架

    原来收费的TCP通讯框架开源了,这是一款国外的开源TCP通信框架,使用了一段时间,感觉不错,介绍给大家 框架名称是networkcomms 作者开发了5年多,目前已经停止开发,对于中小型的应用场景,够 ...

  6. 基于QTcpSocket和QTcpServer的Tcp通讯以及QDataStream序列化数据

    最近要在QT下开发Tcp通讯,发送序列化数据以便于接收. 这里涉及到几个问题: 1.QTcpSocket.QTcpServer的通讯 2.QDataStream序列化数据 多的不说,直接上干货!!! ...

  7. wp8使用Beetle.NetPackage实现基于TCP通讯的订单查询

    在新版本的Beetle.NetPackage中提供了对Protobuf和Controller的支持,所以在WP8下使用Beetle.NetPackage进行基于TCP的数据交互则一件非常简单事情.下面 ...

  8. 异常和TCP通讯

    第七章 异常处理 * 异常处理机制中的try-catch * 语法: * try{ * 代码片段 * }catch(XXXException e){ * 当try中的代码片段出现了XXXExcepti ...

  9. GCDAsyncSocket类库，IOS下TCP通讯使用心得

    关于在IOS下使用Socket进行通讯的技术文章也许诺很久了,今日又是一个还债的日子,网上虽然很多介绍过AsyncSocket或GCDAsyncSocket的文章,但其实就那么一两篇大部分都是转载,于 ...

随机推荐

  1. Go中的if-else判断

    目录 go中的if-else判断 一.语法 go中的if-else判断 一.语法 if 条件 { //符合上面条件的执行 } else if 条件{ //符合上面条件的执行 } else { // 不 ...

  2. C++Template 模版的本质

    我想知道上帝的構思,其他的都祇是細節.                                                                                  ...

  3. Git 提交获取项目与提交项目 记录

    首先去git官网下载版本安装:https://git-scm.com/downloads 在自己生产免密令牌,安装后用git程序导出. 1.自己在桌面或者某盘创建一个文件夹,在文件夹右键找到 GIt ...

  4. 【图像处理】使用OpenCV+Python进行图像处理入门教程（三）色彩空间

    这篇随笔介绍使用OpenCV进行图像处理的第三章 色彩空间. 3  色彩空间 之前的介绍,大多是基于BGR色彩空间进行的,但针对不同的实际情况,研究人员提出了许多色彩空间,它们都有各自擅长处理的领域. ...

  5. IDEA中部署servlet

    配置和不是servlet 第一种方法:(两种方法不能混用,使用第一种方法后,尽量删除第二种方法的注解方式) 使用xml文件配置: name没有什么特别的,就是需要统一即可.url-pattern中的地 ...

  6. CCF(除法)：线段树区间修改（50分）+线段树点修改（100分）+线段树（100分）

    除法 201709-5 这道题有很多种方法来做,最常用的就是线段树和树状数组. 如果使用线段树来做,就会想到区间修改的update函数.但是这里可能会涉及到v是1或者a[j]是0的情况,所以用这种方法 ...

  7. pytorch（11）模型创建步骤与nn.Module

    模型创建与nn.Module 网络模型创建步骤 nn.Module graph LR 模型 --> 模型创建 模型创建 --> 构建网络层 构建网络层 --> id[卷积层,池化层, ...

  8. FPGA的开发板

    板卡架构 板载FPGA(K7-325T)处理24端口10/100/1000M以太网数据: FPGA外挂4Gbit的DDR3颗粒,最大支持800MHz: 板载CPU进行系统配置.管理,并与客户端软件通信 ...

  9. apk签名、包名

    //通过各手机管理软件,如如360.豌豆荚等查看 //使用命令行,可以查看到permission.packagename.title.versionCode等 aapt dump badging ~/ ...

  10. 从RocketMQ的Broker源码层面验证一下这两个点

    本篇博客会从源码层面,验证在RocketMQ基础概念剖析,并分析一下Producer的底层源码中提到的结论,分别是: Broker在启动时,会将自己注册到所有的NameServer上 Broker在启 ...