Web Serial API浏览器前端通过串口读取RFID卡号js JavaScript

本文链接：https://blog.csdn.net/zhangjin7422/article/details/140285265

出于信息安全的原因，以往浏览器是无法直接控制电脑上的设备的，所以，很多黑客为了控制其他电脑，一般就是做一段木马程序，通过各种办法引诱上网小白们通过浏览器下载安装一堆堆的垃圾软件，其中很有可能就有一段木马病毒通过这种方式植入到了电脑。中了木马病毒的设备就象一只待宰的羔羊，黑客们可以通过木马病毒控制电脑，偷取电脑内的数据、破坏电脑系统。在这种情况下，浏览器做为上网的窗口，如果它可以直接控制电脑上的设备是一件很有安全隐患的事情。

然而，随着互联网的发展，以B/S结构开发程序越来越占主流，B/S结构的软件都通过浏览器与操作人员交互数据，这又使得通过浏览器来控制本电脑的设备变得越来越有需求。

你看，这是不是非常矛盾的一种状态？

但是，需求一定是占主导地位的，需求推动整个世界的前进，所以，通过许多大神的辛勤、努力，开发了一些由浏览器控制电脑设备的工具，Web Serial Api就是其中的一个，它可以通过浏览器直接向电脑上的串口设备发送指令，从而控制通过串口连接的电脑外设。

出于安全考虑，浏览器连接串口前，都会跳出提示窗口让使用者确认授权连接指定的串口。

以下Javascript代码展示了通过 Web Serial Api ，浏览器打开指定串口获取RFID读卡器推送过来的卡号。

本示例使用的读卡器：USB转RS232COM虚拟串口RFID读卡器主动读卡Web浏览器Andro、Linux-淘宝网 (taobao.com)

<!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;                        //接收数据指针        
        var connecting=false;                   //是否正在通讯中
        var getdatadelay=25;                    //通讯超时
        var time1;                              


        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;
		}
		
		function ChangeDelayTime(){               //修改了通讯超时时间
			getdatadelay=parseInt(document.getElementById('delaytime').value);
		}
		
		function ConnTimeout(){                   //通讯超时，显示本次上传的数据
		    clearInterval(time1);
		    if( DataPoint>0){
		        let listdatastr = "";
		        if (disp_hexstr.checked){        //16进制显示全部串口接收到的数据，首字为前缀码+卡号+回车换行符+后缀码
		            for (i=0;i<DataPoint;i++){
		                listdatastr=listdatastr+getdata[i].toString(16).padStart(2, '0').toUpperCase()+" ";
		            }
		            ReceiveData.value = listdatastr+"\n"+ReceiveData.value;
		            //ReceiveData.value += listdatastr+"\n";
		        }else{
		            for (i=0;i<DataPoint;i++){  //转换成只显示卡号，
		                listdatastr=listdatastr+String.fromCharCode(getdata[i]);
		            }
		            ReceiveData.value = listdatastr+ReceiveData.value;
		        }
		        DataPoint=0;
		        connecting=false;		        
		    }
		}

		
		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(!connecting){
		        connecting=true;
		        time1 = setInterval("ConnTimeout()", getdatadelay);  //开启通讯超时
		    }		    		    
        }		
		
		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>
        &nbsp;数据位:
        <select name="select_btn2" id="select_data">
          <option>8</option>
          <option>7</option>
          <option>6</option>
          <option>5</option>
        </select>
        &nbsp;停止位:
        <select name="select_btn3" id="select_stop">
          <option>1</option>
          <option>1.5</option>
          <option>2</option>
        </select>
        &nbsp;校验位:
      <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>
        &nbsp;<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;">&nbsp;&nbsp;&nbsp;适用于主动读卡串口输出卡号的读卡器,通讯超时:</label>
       <input name="delaytime" type="text" id="delaytime" style="color:blue;text-align:center;" onchange="ChangeDelayTime()" onkeyup="this.value=this.value.replace(/\D/g,'')" value="25" size="5" maxlength="3" /> 毫秒
     </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>