用html自己開發自己的串口TCP通訊調試軟體
- 2021 年 4 月 29 日
- 筆記
今天給大家介紹一個通訊工具，可以自己寫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>
文檔
完善中。。。
其他
有其他需求或者使用上的問題，請加群討論。
