Web浏览器通过串口读取RFID卡号js JavaScript

Deer鹿

于 2024-07-16 04:41:13 发布

阅读量150

点赞数

文章标签：前端 javascript 开发语言 ecmascript

Web浏览器通过串口读取RFID卡号js JavaScript_JS

本示例使用的读卡器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Web Serial Api RFID串口读卡器主动读卡示例 </title>
	<script>		
		window.onload = function() {
   			document.getElementById('butt_openserial').hidden=true;
			document.getElementById('butt_closeserial').hidden=true;
		}
		
		if ('serial' in navigator){
			
		}else{
			alert('您的浏览器不支持 Web Serial API,暂无法使用以下功能！');
		}		
		
		navigator.serial.onconnect =function event(){
			console.log("Serial port connected: ", event.target);
		}
		
		navigator.serial.ondisconnect =function event(){
			console.log("Serial port disconnected: ", event.target);
		}				
						
		var port = null;
        var reader = null;
        var reading = false;
        const getdata=new Uint8Array(1000);     //接收串口返回的数据
        var DataPoint=0;                        //接收数据指针        

        function isUIntNum(val) {
            var testval = /^\d+$/; // 非负整数
            return (testval.test(val));
        }

        function isHex(val) {
            var testval = /^(\d|[A-F]|[a-f])+$/; // 十六进制数判断
            return (testval.test(val));
        }
		
		function dispchange(){
		    ReceiveData.value="";
		    DataPoint=0;
		}
		
		
		async function SelectSerial(){
			try{
				port =await navigator.serial.requestPort();  // 弹出系统串口列表对话框，选择一个串口进行连接
				ports =await navigator.serial.getPorts();    // 获取已连接的授权过的设备列表
				document.getElementById('butt_openserial').hidden=false;				
			}
			catch (e)
			{
				console.log(e);
			}
		}
		
		function updateInputData(data) {
            let array = new Uint8Array(data); // event.data.buffer就是接收到的inputreport包数据了
			for (const data of array) {
				getdata[DataPoint]=data;
                DataPoint=DataPoint+1;
			}

		    if(DataPoint>=3){
		        if(getdata[DataPoint-1]==3 && getdata[DataPoint-2]==10 && getdata[DataPoint-3]==13){  //用 回车换行符+后缀码 来判断一条数据串口已全部接收到，防止串口数据分包上传
		            let listdatastr = "";
		            if (disp_hexstr.checked){        //16进制显示全部串口接收到的数据，首字为前缀码+卡号+回车换行符+后缀码
		                for (i=0;i<DataPoint;i++){
		                    listdatastr=listdatastr+getdata[i].toString(16).padStart(2, '0').toUpperCase()+" ";
		                }
		            }else{
		                for (i=1;i<DataPoint-3;i++){  //转换成只显示卡号，首字节前缀码、回车、换行、后缀码不显示出来
		                    listdatastr=listdatastr+String.fromCharCode(getdata[i]);
		                }
		            }
		            ReceiveData.value += listdatastr+"\n";
		            DataPoint=0;
		        }
		    }		    
        }		
		
		async function listenReceived(){
			if (reading){
				console.log("On reading.");
                return;
			}
			reading=true;
			
			while (port.readable && reading) {
                reader = port.readable.getReader();
                try {
                    while (true) {
                        const { value, done } = await reader.read();
                        if (done) {
                            // |reader| has been canceled.
                            break;
                        }
                        // 需要特别注意的是：实际使用中即使对端是按一个个包发送的串口数据，接收时收到的也可能是分多段收到的
                        updateInputData(value);
                    }
                } catch (e) {
                    alert(e);
                } finally {
                    reader.releaseLock();
                }
            }
			
			await port.close(); // 关闭串口
            port = null;
            alert("串口已关闭！");
		}
				 
		async function OpenSerial(){
			if (port==null){
				alert('请先选择要操作的串口号！');
				return;
			}else{
				document.getElementById('butt_closeserial').hidden=false;	
				var baudSelected = parseInt(document.getElementById("select_btn").value);
				await port.open({
					baudRate: baudSelected,					
					});	
				listenReceived();	
				alert('串口打开成功！');							
			}			
		}
		
		async function CloseSerial(){
			if ((port == null) || (!port.writable)) {
                alert("请选择并打开与发卡器相连的串口！");
       			return;
            }
			
			if (reading) {
				reading = false;
				reader?.cancel();
			}		
			document.getElementById('butt_openserial').hidden=true;
			document.getElementById('butt_closeserial').hidden=true;		
		}
				
				
	</script>
    
	<style>
		th {
		  font-family:楷体;
		  background-color:#F6FAFF;		
		  color:blue;
		}
		td {
		  font-family:楷体;
		  background-color:#F6FAFF;		
		}  
    </style>    
    
</head>

<body>
<table width="900" height="423"  align="center">
  <tr>
    <td width="120" height="50">    
      <input  name="btnSelect"  type="submit" id="btnSelect" style="width:100%" onclick="SelectSerial()" value="选择串口" />
    </td>
    <td width="750">波特率:<label for="select_btn"></label>
        <select name="select_btn" id="select_btn">
          <option>1200</option>
          <option>4800</option>
          <option selected="selected">9600</option>
          <option>14400</option>
          <option>19200</option>
          <option>38400</option>
          <option>43000</option>
          <option>57600</option>
          <option>115200</option>
          <option>128000</option>
          <option>230400</option>
		  <option>256000</option>
		  <option>460800</option>
		  <option>921600</option>
		  <option>1382400</option>
        </select>
         数据位:
        <select name="select_btn2" id="select_data">
          <option>8</option>
          <option>7</option>
          <option>6</option>
          <option>5</option>
        </select>
         停止位:
        <select name="select_btn3" id="select_stop">
          <option>1</option>
          <option>1.5</option>
          <option>2</option>
        </select>
         校验位:
      <select name="select_btn4" id="select_mark">
          <option>None  无</option>
          <option>Odd   奇</option>
		  <option>Even  偶</option>
		  <option>Mask  常1</option>
		  <option>Space 常0</option>
        </select>
         <input  name="butt_openserial"  type="submit" id="butt_openserial" style="width:80px" onclick="OpenSerial()" value="打开串口" />
        <input  name="butt_closeserial"  type="submit" id="butt_closeserial" style="width:80px" onclick="CloseSerial()" value="关闭串口" />
	</td>
  </tr>
  
  <tr>
     <td height="36">
         <input name="btncleardisp" type="submit" id="btncleardisp" style="width:100%" onclick="dispchange()" value="清空接收数据" />
     </td>
    
     <td>
         <input name="radio" type="radio" id="disp_ascstr" onchange="dispchange()" value="disp_ascstr" checked="checked" />
       <label for="asc">只显示卡号</label>
         <input type="radio" name="radio" id="disp_hexstr" onchange="dispchange()" value="disp_hexstr" />
       <label for="hex">十六进制显示全部接收数据</label>
       <label style="color:red;">       本示例适用于主动读卡、串口输出卡号的读卡器。</label>
     </td>
  </tr>
        
  
  <tr>
    <td height="200" scope="row"><p align="center">接收的数据</p></td>
    <td><textarea style="width:750px" name="ReceiveData" id="ReceiveData" cols="100" rows="20" ></textarea></td>
  </tr>
</table>

</body>
</html>