html页面自己写js脚本收发数据，支持串口和TCP通讯（一）串口基础功能

最新推荐文章于 2022-11-22 13:38:40 发布

大鹏展翅888

最新推荐文章于 2022-11-22 13:38:40 发布

阅读量1.3k

点赞数

分类专栏： html 免费开源

本文链接：https://blog.csdn.net/zhupengfei/article/details/115309094

版权

开源同时被 3 个专栏收录

10 篇文章 1 订阅

订阅专栏

免费

9 篇文章 0 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

实现基础的串口数据收发。

效果图

在这里插入图片描述

完整示例：

<body>
    <div>串口测试</div>
    <input type="text" id="txtPort" value="COM2" /><br />
    波特率:<input type="text" id="txtBaudRate" value="57600" />
    数据位:<input type="text" id="txtDataBits" value="8" />
    停止位:<input type="text" id="txtStopBits" value="1" />
    校验位:<input type="text" id="txtParity" value="0" />
    <button onclick="testOpen()">open</button>
    <button onclick="testClose()">close</button>
    <button onclick="sendData()">发送</button>
    <button onclick="recvData()">接收</button>
    <button onclick="startCyclicRecvData()">循环接收</button>
    <button onclick="stopCyclicRecvData()">取消循环接收</button>
</body>
<script type="text/javascript">

    var cyclicTimeId;
    (async function () {
        await CefSharp.BindObjectAsync("serialPortHelper");

        var portName = document.getElementById("txtPort").value;
        var baudRate = parseInt(document.getElementById("txtBaudRate").value);
        var dataBits = parseInt(document.getElementById("txtDataBits").value);
        var stopBits = parseInt(document.getElementById("txtStopBits").value);
        var parity = parseInt(document.getElementById("txtParity").value);
        await serialPortHelper.init(portName, baudRate, dataBits, stopBits, parity);
    })();

    function testOpen() {
        return (async function () {
            console.log('open');

            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.open();
        })();
    }

    function testClose() {
        console.log('close');
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.close();
        })();
    }

    function sendData() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.sendData("313233");
        })();
    }

    function recvData() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            let recvString = await serialPortHelper.recvData();
            console.log('[' + recvString + ']');
        })();
    }

    function startCyclicRecvData() {
        cyclicRecvData();
    }

    function stopCyclicRecvData() {
        clearTimeout(cyclicTimeId);
    }

    function cyclicRecvData() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            let recvString = await serialPortHelper.recvData();
            console.log('-' + recvString + '-');
            if (recvString.trim() == '11') {
                console.log('ok');
                await serialPortHelper.sendData('22');
            }

            cyclicTimeId = setTimeout("cyclicRecvData()", 1000);
        })();
    }


</script>

解说

上面的参数的设置，下面是串品的打开，关闭和收发。所有功能都有。

大鹏展翅888

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
4
评论
html页面自己写js脚本收发数据，支持串口和TCP通讯（一）串口基础功能

实现基础的串口数据收发。完整示例：<body> <div>串口测试</div> <input type="text" id="txtPort" value="COM2" /><br /> 波特率:<input type="text" id="txtBaudRate" value="57600" /> 数据位:<input type="text" id="txtDataBits" value="8
复制链接

扫一扫