zoukankan      html  css  js  c++  java
  • 用html自己开发自己的串口TCP通讯调试软件

    今天给大家介绍一个通讯工具,可以自己写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>
    

    文档

    完善中。。。

    其他

    下载地址

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

    作者:朱鹏飞 加我个人微信(zhupengfeivip)进入郑州IT微信交流群
    个人博客:https://zhupengfeivip.github.io/
    image.png
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Objective-C-----协议protocol,代码块block,分类category
    iOS-Core Data 详解
    TCP、UDP详解
    springboot+mybatisplus配置多个mapper路径
    django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: No module named MySQLdb的解决方法
    Django笔记——Eclipse+pydev首个django例子helloworld
    eclipse html插件的下载和安装
    sqlserver往字符串里固定位置插入字符
    在文件夹中直接调用命令提示符
    HTML:如何将网页分为上下两个部分
  • 原文地址:https://www.cnblogs.com/zhupengfei/p/14716580.html
Copyright © 2011-2022 走看看