• 如何在web瀏覽器頁面使用IC卡讀卡器并且兼容所有瀏覽器

    2021-04-19 14:14:06 諾塔斯智能科技

    隨著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卡片:
    清除日志:

    日志

      长龙助手