今天给大家介绍一个通讯工具，可以自己写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. Spirng 循环依赖报错：Requested bean is currently in creation: Is there an unresolvable circular reference?

    1:前言 最近在项目中遇到了一次循环依赖报错的问题,虽然解决的很快,但是有些不明白的地方,特此记录. 在此我把 bean 的结构和 注入方式单独拎出来进行演示 1.1:报错提示 1.2:错误日志 Ex ...

  2. python进阶（7）垃圾回收机制

    Python垃圾回收 基于C语言源码底层,让你真正了解垃圾回收机制的实现 引用计数器 标记清除 分代回收 缓存机制 Python的C源码(3.8.2版本) 1.引用计数器 1.1环状双向链表 refc ...

  3. Spring-05 使用注解开发

    Spring-05 使用注解开发 使用注解开发 1.项目准备 在spring4之后,想要使用注解形式,必须得要引入aop的包5 <!-- https://mvnrepository.com/ar ...

  4. POJ-3159（差分约束+Dijikstra算法+Vector优化+向前星优化+java快速输入输出）

    Candies POJ-3159 这里是图论的一个应用,也就是差分约束.通过差分约束变换出一个图,再使用Dijikstra算法的链表优化形式而不是vector形式(否则超时). #include< ...

  5. SEO 在 SPA 站点中的实践

    背景 观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图).这显然是单页应用 (SPA) 站点的通病 -- 不利于文档被搜索引擎搜索 (SEO). 难道 S ...

  6. windows下MySQL如何完全卸载并安装行的版本

    卸载本地mysql之前,请务必要先将需要的数据库备份 停止mysql 服务 windows键-->搜索服务 找到mysql 服务,并停止他 卸载mysql server 在控制面板--程序 找到 ...

  7. springMVC @InitBinder注解

    springMVC @InitBinder注解.setFieldDefaultPrefix则可以在表单用如user.name进行传递属性

  8. golang 微服务以及相关web框架

    golang 中国gocn golang Applicable to all database connection pools xorm是一个简单而强大的Go语言ORM库,通过它可以使数据库操作非常 ...

  9. Nodejs学习笔记（3） 创建服务器：Web 模块(http)与 express 框架

    目录 参考资料 1. 使用 http 模块创建服务器 1.1 实现思路及代码 1.2 HTTP 结构 1.2.1 Request中的重要字段 1.2.2 Response 头信息:文件类型.状态码.连 ...

  10. IntelliJ IDEA安装lombok

    1. 搜索Plugins 点击下方的Browse repositories.. 2.点击安装,重新启动