本示例使用的读卡器：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; //接收数据指针
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>
