如何在web浏览器页面使用IC卡读卡器并且兼容所有浏览器
2021-04-19 14:14:06
诺塔斯智能科技
1640
随着H5技术的不断发展与推广,H5技术被广泛用于移动设备,PC终端等众多领域。同时,越来越多的应用都基于B/S(浏览器/服务器)模式,降低开发难度的同时还能更好的普及和应用,突破了硬件设备的兼容性问题。然而,嵌入式开发的设备并没有跟上H5技术的脚步,现在很多嵌入式设备并不支持或者不能友好的支持浏览器应用。举个例子,如何在web浏览器页面使用IC卡读卡器并且兼容所有浏览器?针对这个问题,有人肯定会说利用active X控件就可以了啊!确实如果是基于IE或者IE内核的浏览器使用active X是没有任何问题,但是现在除了使用IE浏览器还有大部分使用Chrome和Firefox等多种内核和版本的浏览器,为了让嵌入式设备更好的兼容所有浏览器,我们提供了一套基于在嵌入式设备中内置WebSocket组件的方案,希望能帮助大家在解决使用浏览器集成嵌入式设备中遇到的难题,一下仅以我司智能卡读写器做详细介绍。
传统的ActiveX组件,通过javascript页面与设备进行信息交互。
<script language="javascript" type="text/javascript"> function getNowFormatDate() { var date = new Date(); var seperator1 = "-" var seperator2 = ":" var month = date.getMonth() + 1; var strDate = date.getDate(); var socket = null; var nCommandIndex = 0; var strIp = "" var strPort = "" var wsUrl = "" if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds() + seperator2 + date.getMilliseconds(); return currentdate; } function ConnectServer(){ try { nCommandIndex = 0; strIp = document.getElementById('strLotusCardDeviceIp').value; strPort = document.getElementById('strLotusCardDevicePort').value; wsUrl = 'ws://'+ strIp +':'+ strPort; socket = new WebSocket(wsUrl); } catch (evt) { document.getElementById('log').innerHTML = '<li><b>'+getNowFormatDate()+'#new WebSocket error:'+ evt.data+'</b><>' + document.getElementById('log').innerHTML; socket = null; if (typeof(connCb) != "undefined" && connCb != null) connCb("-1", "connect error!"); return; } socket.onopen = function () { document.getElementById('log').innerHTML = '<li><b>'+getNowFormatDate()+'#连接服务器成功</b><>' + document.getElementById('log').innerHTML; document.getElementById('status').innerHTML = 'Socket Open' document.getElementById('status').className = 'online' }; socket.onclose = function(event) { document.getElementById('log').innerHTML = '<li><b>'+getNowFormatDate()+'#断开连接:' + event.wasClean + '</b><>' + document.getElementById('log').innerHTML; document.getElementById('status').innerHTML = 'Socket Closed' document.getElementById('status').className = 'offline' }; socket.onmessage = function(event) { var arrString; strLastResult = event.data; document.getElementById('log').innerHTML = '<li><b>'+getNowFormatDate()+'#收到数据:' + event.data + '</b><>' + document.getElementById('log').innerHTML; // arrString = strLastResult.split(','); // if(COMMAND_OPEN_DEVICE == arrString[0]) // { // if(arrString.length>2) m_nHandle = arrString[2]; // document.getElementById('log').innerHTML = '<li><b>#获取设备句柄:' + m_nHandle + '</b><>' + document.getElementById('log').innerHTML; // } //document.getElementById('log').innerHTML = '<li><b>#received:' + arrString[0] + '</b><>' + document.getElementById('log').innerHTML; //document.getElementById('log').innerHTML = '<li><b>#received:' + arrString.length + '</b><>' + document.getElementById('log').innerHTML; }; socket.onerror = function(event) { document.getElementById('log').innerHTML = '<li><b>#disconnected:' + event.message + '</b><>' + document.getElementById('log').innerHTML; document.getElementById('status').innerHTML = 'Socket Error' document.getElementById('status').className = 'error' }; } function ExecStringCommand(strCommand) { strLastResult = '' nCommandIndex++; if (socket.readyState == WebSocket.OPEN) { socket.send(strCommand+','+nCommandIndex); } else { document.getElementById('log').innerHTML = '<li><b>#send failed. websocket not open. please check.</b><>' + document.getElementById('log').innerHTML; } } function GetSocketStatus() { if(null == socket) return "socket is null" switch (socket.readyState) { case socket.CONNECTING: return "connecting" break; case socket.OPEN: return "open" break; case socket.CLOSING: return "closing" break; case socket.CLOSED: return "closed" break; default: return "undefined" break } }; </script>
LotusCard WEB Socket 演示页面
读卡器IP: | |
读卡器PORT: | |
状态 | |
通信函数:1、连接服务器 2、执行字符串函数并解析结果 3、断开连接 | |
连接服务器: | |
关闭连接: | |
获取连接状态: | |
获取MCU序列号: | |
蜂鸣: | |
获取M1卡号: | |
装载密码: | |
验证密码: | |
读数据扇区0块1: | |
写数据扇区0块1: | |
中止M1卡片: | |
清除日志: | |
日志 | |