隨著H5技術(shù)的不斷發(fā)展與推廣，H5技術(shù)被廣泛用于移動(dòng)設(shè)備，PC終端等眾多領(lǐng)域。同時(shí)，越來(lái)越多的應(yīng)用都基于B/S（瀏覽器/服務(wù)器）模式，降低開(kāi)發(fā)難度的同時(shí)還能更好的普及和應(yīng)用，突破了硬件設(shè)備的兼容性問(wèn)題。然而，嵌入式開(kāi)發(fā)的設(shè)備并沒(méi)有跟上H5技術(shù)的腳步，現(xiàn)在很多嵌入式設(shè)備并不支持或者不能友好的支持瀏覽器應(yīng)用。舉個(gè)例子，如何在web瀏覽器頁(yè)面使用IC卡讀卡器并且兼容所有瀏覽器？針對(duì)這個(gè)問(wèn)題，有人肯定會(huì)說(shuō)利用active X控件就可以了??！確實(shí)如果是基于IE或者IE內(nèi)核的瀏覽器使用active X是沒(méi)有任何問(wèn)題，但是現(xiàn)在除了使用IE瀏覽器還有大部分使用Chrome和Firefox等多種內(nèi)核和版本的瀏覽器，為了讓嵌入式設(shè)備更好的兼容所有瀏覽器，我們提供了一套基于在嵌入式設(shè)備中內(nèi)置WebSocket組件的方案，希望能幫助大家在解決使用瀏覽器集成嵌入式設(shè)備中遇到的難題，一下僅以我司智能卡讀寫(xiě)器做詳細(xì)介紹。

傳統(tǒng)的ActiveX組件，通過(guò)javascript頁(yè)面與設(shè)備進(jìn)行信息交互。

<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()+'#連接服務(wù)器成功</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()+'#斷開(kāi)連接:' + 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()+'#收到數(shù)據(jù):' + 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>#獲取設(shè)備句柄:' + 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 演示頁(yè)面