今天给大家介绍一个通讯工具，可以自己写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. keras环境搭建

    操作系统 : CentOS7.5.1804_x64 Python 版本 : 3.6.8 keras + tensorflow 环境搭建,使用cpu,安装命令如下: virtualenv -p /usr ...

  2. LeetCode674. 最长连续递增序列

    原题链接 1 class Solution: 2 def findLengthOfLCIS(self, nums: List[int]) -> int: 3 ans = begin = 0 4 ...

  3. 《C++ Primer》笔记 第5章 语句

    空块的作用等价于空语句. case标签必须是整型常量表达式,default也是一种特殊的case标签. 标签不应该孤零零地出现,它后面必须跟上一条语句或者另外一个case标签. 如果在某处一个带有初值 ...

  4. 《进击吧！Blazor！》系列入门教程 第一章 6.安全

    <进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...

  5. webstorm2020.3安装破解教程

    免责声明:本教程及相关附件仅限于学术交流,不能用于商业以及违法用途,请于下载后24小时内删除!如产生法律纠纷,一切与本人无关,呼吁各位小伙伴支持下正版软件.本文如有侵权,请联系小编删除之. 该操作是用 ...

  6. C#扩展方法的一分钟小例子

    扩展方法是静态方法,是类的一部分,但没有在类的源代码中,就像一个补丁 首先创建一个静态类,然后创建一个静态方法,重点是静态方法的参数 public static class xExtension { ...

  7. python爬虫（正则取数据）读取表格内的基金代码后爬取基金最新净值，同时写到对应的表格中，基于最近一次购买净值计算出涨跌幅（名字有点长）

    最近基金跌的真够猛,虽说是定投,但大幅度下跌,有时候适当的增加定投数也是降低平均成本的一种方式 每天去看去算太费时间,写了个爬虫,让他自动抓数据后自动计算出来吧 实现逻辑: 1.创建了一个excel表 ...

  8. 漫漫Java路1—基础知识3—数据类型和变量作用域以及常量

    强类型语言 所有变量定义后才能使用,区别于js等弱类型语言 数据类型分类 基本类型(primitive type) 引用类型(reference type) 整数类 byte:占1字节 short:占 ...

  9. WS1008网络损伤测试仪

    WS1008网络损伤测试仪具备高性能的网络损伤仿真功能.冗余链路测试功能和线速流量生成功能,提供了综合性的网络系统测试方案,可充分测试.验证网络系统的抗损伤能力.链路切换能力及数据转发能力.为高可靠性 ...

  10. 用实战玩转pandas数据分析（一）——用户消费行为分析（python）

      CD商品订单数据的分析总结.根据订单数据(用户的消费记录),从时间维度和用户维度,分析该网站用户的消费行为.通过此案例,总结订单数据的一些共性,能通过用户的消费记录挖掘出对业务有用的信息.对其他产 ...