今天给大家介绍一个通讯工具，可以自己写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. LeetCode-层数最深叶子结点的和

    层数最深叶子结点的和 LeetCode-1302 这里可以采用上一题中求解二叉树的深度的方法. 因为需要记录最深结点的值的和,所以这里可以边求和,如果遇到不符合最深结点时再将和sum=0. /** * ...

  2. 开发过程中遇到的js知识点总结，面试题等，持续更新

     1.Object.freeze() 方法用于冻结一个对象,即将对象设置为不可扩展.将对象的所有自有的属性和方法(包括Symbol值的属性和方法)配置为不可配置,不可写. Object.freeze( ...

  3. Linux速通05 文件处理与编辑

    使用 cat 命令进行文件的纵向合并 # 例:使用 cat 命令将 baby.age.baby.weight.baby.sex 这三个文件纵向合并为 baby文件 * cat baby.age bab ...

  4. PowerShell的使用

                一:基于winserver2008版本powershell2.0的升级(至4.0) (1)首先:查看各版本的Powershell版本,如下所示: (2)打开虚拟机winserv ...

  5. MySQL深入研究--学习总结（4）

    前言 接上文,继续学习后续章节.细心的同学已经发现,我整理的并不一定是作者讲的内容,更多是结合自己的理解,加以阐述,所以建议结合原文一起理解. 第13章<为什么表数据删除一般,表文件大小不变?& ...

  6. vue之better-scroll详解及封装

    在我们的h5或移动端网页开发中,常常会需要实现滚动加载数据,等需求,而在开发中原生开发往往会带来意想不到的问题,因此我们引入better-scroll来帮我们实现流畅的滚动效果. 什么是better- ...

  7. ACM常用的C++ && STL

    内容 c++输入输出 c++ string vector:不定长数组 map:映射 queue:队列 sort:排序 priority_queue:优先队列 c++输入输出 1 #include &l ...

  8. 10、字典dict

    字典(dict) 字典是有序,键不重复,元素只能是键值对的可变的容器 dict = {'k1':'v1','k2':'v2'} 容器 元素必须键值对 键不重复,重复则会被覆盖 data = {'k1' ...

  9. Python-tkinter-window

    示例代码讲解 1.加载tkinter模块 2.创建一个窗口 3.设置窗口的主题 4.开始窗口的事件循环 import tkinter 2 win = tkinter.Tk() 3 win.title( ...

  10. C#控制鼠标自动连续点（DEMO）

    ---------------------------界面---------------------------------------------------- ------------------ ...