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

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

系列文章

概述

串口基础功能

TCP客户端收发

参数篇

串口快捷命令列表

api

界面

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

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

功能说明

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

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

TCP客户端

  1. <body>
  2.     <div>tcp测试客户端</div>
  4.     <input type="text" id="txtServer" value="127.0.0.1" />
  6.     <input type="text" id="txtPort" value="60000" />
  8.     <button onclick="conn()">连接</button>
  9.     <button onclick="close()">断开</button>
  10.     <button onclick="sendData()">发送</button>
  11.     <button onclick="recvData()">接收</button>
  12. </body>
  13. <script type="text/javascript">
  14.     (async function () {
  15.         await CefSharp.BindObjectAsync("tcpClientHelper");
  17.     })();
  19.     function conn() {
  20.         (async function () {
  21.             await CefSharp.BindObjectAsync("tcpClientHelper");
  22.             var server = document.getElementById("txtServer").value;
  23.             var port = document.getElementById("txtPort").value;
  24.             console.log(server, port);
  25.             await tcpClientHelper.conn(server, parseInt(port));
  27.             //建立连接后发登录
  28.             await tcpClientHelper.sendData("383635333734303530363031353933");
  30.             setTimeout("recvData()", 1000);
  31.         })();
  32.     }
  34.     function close() {
  35.         (async function () {
  36.             await CefSharp.BindObjectAsync("tcpClientHelper");
  38.             await tcpClientHelper.close();
  39.         })();
  40.     }
  42.     function sendData() {
  43.         (async function () {
  44.             await CefSharp.BindObjectAsync("tcpClientHelper");
  46.             await tcpClientHelper.sendData("313233");
  48.             console.log('sendData');
  49.         })();
  50.     }
  52.     function recvData() {
  53.         (async function () {
  54.             await CefSharp.BindObjectAsync("tcpClientHelper");
  56.             let recvString = await tcpClientHelper.recvData();
  57.             console.log('[' + recvString+ ']');
  58.             if (recvString.trim() == '680100010068FFFFFFFFFFFF010100CE16') {
  59.                 console.log('ok 31');
  60.                 await tcpClientHelper.sendData('68 03 00 03 00 68 FF FF FF FF FF FF 81 01 00 01 AA BB B8 16');
  61.             }
  62.             else if (recvString.trim() == '680100010068FFFFFFFFFFFF020000552316') {
  63.                 console.log('ok 32');
  64.                 await tcpClientHelper.sendData('68 01 00 01 00 68 FF FF FF FF FF FF 82 01 00 FF 4E 16');
  65.             }
  67.             setTimeout("recvData()", 1000);
  68.         })();
  69.     }
  70. </script>

串口

  1. <body>
  2.     <div>串口测试</div>
  3. </body>
  4. <script type="text/javascript">
  5.     (async function () {
  6.         await CefSharp.BindObjectAsync("serialPortHelper");
  8.         await serialPortHelper.init();
  10.         //setTimeout("changeState()", 1000);
  11.     })();
  13.     function changeState() {
  14.         (async function () {
  15.             await CefSharp.BindObjectAsync("serialPortHelper");
  17.             let recvString = await serialPortHelper.recvData();
  18.             console.log('-' + recvString+ '-');
  19.             if (recvString.trim() == '11') {
  20.                 console.log('ok');
  21.                 await serialPortHelper.send_data('22');
  22.             }
  24.             setTimeout("changeState()", 1000);
  25.         })();
  26.     }
  27. </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. Using Sqoop to import from db2 to hadoop

    参考 : https://stackoverflow.com/questions/23933481/db2-data-import-into-hadoop         sqoop import - ...

  2. SpringBoot(三):SpringBoot热部署插件

    SpringBoot热部署插件 在实际开发中,我们修改了某些代码逻辑功能或页面都需要重启应用,这无形中降低了开发效率!热部署是指当我们修改代码后,服务能自动启动加载新修改的内容,这样大大提高了我们开发 ...

  3. POJ-1511(Dijkstra+优先队列优化+向前星)

    Invitation Cards POJ-1511 从这道题我还是发现了很多的问题,首先就是快速输入输出,这里的ios::---这一行必须先放在main函数第一行,也就是输入最开始的前面,否则系统疯狂 ...

  4. jquery ajax error 函数的参数及使用

    使用jquery的ajax方法向服务器发送请求的时候,可选的回调函数有success.complete.beforeSend.error函数等.error函数常用来进行错误信息的处理,这里着重提一下e ...

  5. 不用任何框架，Java 就能实现定时任务的 3 种方法！

    是的,不用任何框架,用我们朴素的 Java 编程语言就能实现定时任务. 今天,栈长就介绍 3 种实现方法,教你如何使用 JDK 实现定时任务! 1. sleep 这也是我们最常用的 sleep 休眠大 ...

  6. 【Git】敏感信息保护

    保护Git仓库敏感信息 代码中无可避免有一些敏感信息,包含但不限于,数据库信息,密钥,账号信息等等.通常我们会把这些信息放在配置文件,这些信息若泄露会造成安全问题. 以前我们做法,是把配置文件通过.g ...

  7. 数据库Redis（一）

    Redis数据库的特点: Redis数据库属于nosql数据库的一种,其存储于内存中(非硬盘),修改较为方便. 而Redis数据库的存储方式是使用{key:value}方式存储,类似python基础中 ...

  8. BZOJ_1503 [NOI2004]郁闷的出纳员 【Splay树】

    一 题面 [NOI2004]郁闷的出纳员 二 分析 模板题. 对于全部员工的涨工资和跌工资,可以设一个变量存储起来,然后在进行删除时,利用伸展树能把结点旋转到根的特性,能够很方便的删除那些不符合值的点 ...

  9. arcgis for js 4.6加载本地发布好的2维地图

    我本地发布好的地图服务信息如下图所示: 我们在代码中使用到的url是图中所示的REST URL 加载代码如下: <!DOCTYPE html> <html> <head& ...

  10. polay计数原理

    公式: Burnside引理: 1/|G|*(C(π1)+C(π2)+C(π3)+.....+C(πn)): C(π):指不同置换下的等价类数.例如π=(123)(3)(45)(6)(7),X={1, ...