web串口调试助手,浏览器控制串口设备

打开串口时查找可用串口供选择

通过javascript调用activex控制串口收发数据,可以通过轮询每个串口状态找到指定的设备,简化用户操作

选择并打开串口

function selcomport(){
if ($("#btnOpen").val() == "关闭串口") {
                closeCom();
                $("#btnOpen").val("打开串口");
                return;
            }
	var comNo=tcom.SelectComm(); //alert(tcom.ComList);获取串口列表
	tcom.DataType=$("#ssjt").val();CUR_SJT=$("#ssjt").val();
	var comSet = $("#sbtl").val()+","+$("#sjyw").val()+","+$("#ssjw").val()+","+$("#stzw").val();//串口设置格式:9600,8,N,1
	if(comNo>0 && tcom.InitCom(comNo,comSet)){ //打开串口
		$("#btnSend").attr("disabled",false);$("#btnOpen").val("关闭串口");
		autoRead();
	}else{
		alert("打开端口失败!")
	}
}


串口返回数据回调

tcom.onDataIn=function(dat){ //接收串口返回数据
	 $("#t_dataIn").val($("#t_dataIn").val() + dat);   //dat 返回数据内容
}

向串口发送数据

tcom.SendData($("#t_sdata").val());//往端口发送数据<span style="font-size:18px;">
</span>

 需要支持火狐浏览器或chrome浏览器可与我联系 QQ:19937243,E-Mail:nxiaoping@163.com

在线示例:

http://d.iyanhong.com/demos/TComm/commt.html

以下是一个简单的Web串口调试助手的Java后端代码和前端代码。 Java后端代码: ```java import gnu.io.CommPortIdentifier; import gnu.io.SerialPort; import java.io.InputStream; import java.io.OutputStream; import java.util.Enumeration; public class SerialCommunication { private static SerialPort serialPort; private static OutputStream outputStream; private static InputStream inputStream; public static void init(String portName) throws Exception { CommPortIdentifier portIdentifier = CommPortIdentifier.getPortIdentifier(portName); if (portIdentifier.isCurrentlyOwned()) { System.err.println("Error: Port is currently in use"); } else { serialPort = (SerialPort) portIdentifier.open("SerialCommunication", 2000); serialPort.setSerialPortParams(9600, SerialPort.DATABITS_8, SerialPort.STOPBITS_1, SerialPort.PARITY_NONE); outputStream = serialPort.getOutputStream(); inputStream = serialPort.getInputStream(); } } public static void write(String data) throws Exception { outputStream.write(data.getBytes()); outputStream.flush(); } public static String read() throws Exception { byte[] buffer = new byte[1024]; int len = -1; len = inputStream.read(buffer); if (len > 0) { return new String(buffer, 0, len); } return null; } public static void close() { if (serialPort != null) { serialPort.close(); } } public static void main(String[] args) throws Exception { Enumeration portList = CommPortIdentifier.getPortIdentifiers(); while (portList.hasMoreElements()) { CommPortIdentifier portId = (CommPortIdentifier) portList.nextElement(); if (portId.getPortType() == CommPortIdentifier.PORT_SERIAL) { System.out.println(portId.getName()); } } init("COM3"); write("Hello World!"); String result = read(); System.out.println(result); close(); } } ``` 前端代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Serial Communication</title> <style> #message { width: 100%; height: 500px; font-size: 14px; } #input { width: 100%; height: 30px; font-size: 14px; } </style> </head> <body onload="init()"> <h1>Web Serial Communication</h1> <select id="port"></select> <button onclick="connect()">Connect</button> <button onclick="disconnect()">Disconnect</button> <hr> <textarea id="message" readonly></textarea> <hr> <input type="text" id="input"> <button onclick="send()">Send</button> </body> <script> var portSelect = document.getElementById('port'); var messageTextarea = document.getElementById('message'); var inputText = document.getElementById('input'); var reader = null; var writer = null; async function init() { let ports = await navigator.serial.getPorts(); for (let port of ports) { let option = document.createElement("option"); option.text = port.name; portSelect.add(option); } } async function connect() { let portName = portSelect.options[portSelect.selectedIndex].value; let port = await navigator.serial.requestPort({serialNumber: portName}); await port.open({baudRate: 9600}); let {reader, writer} = await port.readable.getWriter(); this.reader = reader; this.writer = writer; readLoop(); } async function readLoop() { while (true) { let result = await reader.read(); if (result.done) { console.log('EOF'); return; } messageTextarea.value += new TextDecoder().decode(result.value); } } async function disconnect() { if (reader) { reader.cancel(); reader.releaseLock(); reader = null; } if (writer) { writer.close(); writer = null; } } async function send() { let data = inputText.value; writer.write(new TextEncoder().encode(data)); inputText.value = ''; } </script> </html> ``` 注意,这里使用的是Web Serial API,需要在Chrome浏览器中开启实验性功能才能正常使用。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值