自從諾塔斯智能科技發(fā)布L6-E智能卡讀寫器以來，我們在用戶反饋的功能需求中，了解到客戶在web瀏覽器上對(duì)智能卡讀寫器進(jìn)行二次開發(fā)需要支持https協(xié)議，首先我們來回顧一下L6-E智能卡讀寫器功能，它是一款支持TCP/IP通信可以通過USB接口進(jìn)行自定義IP地址，內(nèi)置了websocket組件的智能卡讀寫器。隨著越來越多的web應(yīng)用比較重視安全性，大多數(shù)web應(yīng)用已經(jīng)升級(jí)到https協(xié)議了。因此，我們需要將內(nèi)置的websocket組件功能進(jìn)行升級(jí)，從而更好的配合客戶在web瀏覽器應(yīng)用。

     首先，我們來了解一下，什么是WebSocket協(xié)議，它是html5的一種通信協(xié)議，該協(xié)議兼容我們常用的瀏覽器。例如Chrome、 Firefox、IE等。它可以使客戶端和服務(wù)端雙向數(shù)據(jù)傳輸更加簡單快捷，并且在TCP連接進(jìn)行一次握手后，就可以持久性連接，同時(shí)允許服務(wù)端對(duì)客戶端推送數(shù)據(jù)。外加傳統(tǒng)模式的協(xié)議一般HTTP請(qǐng)求可能會(huì)包含較長的頭部，但真正有效的可能只有小部分，從而就占用了很多資源和帶寬。因此WebSocket協(xié)議不僅可以實(shí)時(shí)通訊，支持?jǐn)U展；也可以壓縮節(jié)省服務(wù)器資源和帶寬。 WS協(xié)議和WSS協(xié)議兩個(gè)均是WebSocket協(xié)議的SCHEM，兩者一個(gè)是非安全的，一個(gè)是安全的。也是統(tǒng)一的資源標(biāo)志符。就好比HTTP協(xié)議和HTTPS協(xié)議的差別。非安全的沒有證書，安全的需要SSL證書。（SSL是Netscape所研發(fā)，用來保障網(wǎng)絡(luò)中數(shù)據(jù)傳輸?shù)陌踩裕饕沁\(yùn)用數(shù)據(jù)加密的技術(shù)，能夠避免數(shù)據(jù)在傳輸過程被不被竊取或者監(jiān)聽。）其中WSS表示在TLS之上的WebSocket。WS一般默認(rèn)是80端口，而WSS默認(rèn)是443端口，大多數(shù)網(wǎng)站用的就是80和433端口。WS和WSS的體現(xiàn)形式分別是TCP+WS AS WS ，TCP+TLS+WS AS WS。服務(wù)器網(wǎng)址就是 URL。最后再說下WebSocket協(xié)議的特點(diǎn)：建立在 TCP 協(xié)議之上，服務(wù)端實(shí)現(xiàn)容易；與 HTTP 協(xié)議有良好的兼容性，握手時(shí)不容易被屏蔽，可以通過各種 HTTP 代理服務(wù)器；數(shù)據(jù)輕量，實(shí)時(shí)通訊；可以發(fā)送文本和二進(jìn)制數(shù)據(jù)。不限制同源，客戶端可以與任意服務(wù)器端進(jìn)行通訊。因此WebSocket協(xié)議的出現(xiàn)，為很多人解決了關(guān)于擴(kuò)展以及兼容性協(xié)議的煩惱問題。

    說一千道一萬，目的就是解決瀏覽器兼容問題。于是，諾塔斯L9-E-POE智能卡讀寫器一款瀏覽器全兼容智能卡讀寫器誕生了。它滿足了智能卡讀寫器二次開發(fā)支持https協(xié)議 客戶的需求，采用標(biāo)準(zhǔn)POE交換機(jī)供電，無需其它外部供電設(shè)備，從而有效的解決了既要部署網(wǎng)絡(luò)傳輸線纜，又要額外增加電源適配器的麻煩。設(shè)備可以自定義IP地址，區(qū)別于傳統(tǒng)智能卡讀寫器通過USB、RS232等接口通信，不會(huì)受到上位機(jī)硬件接口數(shù)量限制，用戶可以根據(jù)自己需求靈活的進(jìn)行網(wǎng)絡(luò)擴(kuò)展。

諾塔斯L9-E-POE智能卡讀寫器配置如下：

電氣特征

諾塔斯L9-E-POE智能卡讀寫器瀏覽器開發(fā)部分范例代碼

function ConnectServer(){
			var protocolStr = document.location.protocol;
			document.getElementById('log').innerHTML = '<li><b>'+ protocolStr +'</b></li>' + document.getElementById('log').innerHTML;
			try {
				nCommandIndex = 0;
				strIp = document.getElementById('strLotusCardDeviceIp').value;
				strPort = document.getElementById('strLotusCardDevicePort').value;
				if(protocolStr == "https:")
				{
					wsUrl = 'wss://'+ strIp +':'+  strPort;
				}
				else
				{
					wsUrl = 'ws://'+ strIp +':'+  strPort;
				}
				socket = new WebSocket(wsUrl); 
      } catch (evt) {
         document.getElementById('log').innerHTML = '<li><b>'+getNowFormatDate()+'#new WebSocket error:'+ evt.data+'</b></li>' + 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></li>' + 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></li>' + document.getElementById('log').innerHTML;
					document.getElementById('status').innerHTML = 'Socket Closed';
					document.getElementById('status').className = 'offline';
				};

<table width="100%">
	<tr style="width:100px; height:40px;">
		<td>
			讀卡器IP:
		</td>		
		<td>
			<input type="text" value="wss.lotussmart.cc" id="strLotusCardDeviceIp" style="width:150px; height:30px;" />
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			讀卡器PORT:
		</td>		
		<td>
			<input type="text" value="31213" id="strLotusCardDevicePort" style="width:150px; height:30px;" />
		</td>
	</tr>
	
	<tr style="width:100px; height:40px;">
		<td>
			狀態(tài)
		</td>
		<td>
			<p id="status"></p>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td colspan="2">
			<h3>通信函數(shù):1、連接服務(wù)器 2、執(zhí)行字符串函數(shù)并解析結(jié)果 3、斷開連接</h3>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			連接服務(wù)器:
		</td>
		<td>
			<INPUT id = "ConnectServer"  type=button value="ConnectServer" onclick="javascript:ConnectServer();" style="width:150px; height:30px;"/>			
		</td>
		
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			關(guān)閉連接:
		</td>		
		<td>
			<INPUT id = "CloseConnection"  type=button value="CloseConnection" onclick="javascript:socket.close();" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			獲取連接狀態(tài):
		</td>
		<td>
			<INPUT id = "ConnectionStatus"  type=button value="ConnectionStatus" onclick="javascript:document.getElementById('log').innerHTML = '<li><b>#status:' + GetSocketStatus() + '</b></li>' + document.getElementById('log').innerHTML;"
			 style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			獲取MCU序列號(hào):
		</td>		
		<td>
			<INPUT id = "OpenDevice"  type=button value="GetMcuSerailNo" onclick="javascript:ExecStringCommand('GetMcuSerailNo')" style="width:150px; height:30px;"/>
		</td>
	</tr>
	
	<tr style="width:100px; height:40px;">
		<td>
			蜂鳴:
		</td>		
		<td>
			<INPUT id = "Beep"  type=button value="Beep" onclick="javascript:ExecStringCommand('Beep,10');" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			獲取M1卡號(hào):
		</td>		
		<td>
			<INPUT id = "GetCardNo"  type=button value="GetCardNo" onclick="javascript:ExecStringCommand('GetCardNo,38');" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			裝載密碼:
		</td>		
		<td>
			<INPUT id = "LoadKey"  type=button value="LoadKey" onclick="javascript:ExecStringCommand('LoadKey,96,0,FFFFFFFFFFFF');" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			驗(yàn)證密碼:
		</td>		
		<td>
			<INPUT id = "Authentication"  type=button value="Authentication" onclick="javascript:ExecStringCommand('Authentication,96,0');" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			讀數(shù)據(jù)扇區(qū)0塊1:
		</td>		
		<td>
			<INPUT id = "M1Read"  type=button value="M1Read" onclick="javascript:ExecStringCommand('Read,1');" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			寫數(shù)據(jù)扇區(qū)0塊1:
		</td>		
		<td>
			<INPUT id = "M1Write"  type=button value="M1Write" onclick="javascript:ExecStringCommand('Write,1,0123456789abcdef0123456789abcdef');" style="width:150px; height:30px;"/>
		</td>
	</tr>	
	<tr style="width:100px; height:40px;">
		<td>
			讀數(shù)據(jù)扇區(qū)0塊1:
		</td>		
		<td>
			<INPUT id = "NtagRead"  type=button value="NTAGRead" onclick="javascript:ExecStringCommand('Read,4');" style="width:150px; height:30px;"/>
		</td>
	</tr>
	<tr style="width:100px; height:40px;">
		<td>
			寫數(shù)據(jù)NTAG4PAGE:
		</td>		
		<td>
			<INPUT id = "NtagWrite"  type=button value="NtagWrite" onclick="javascript:ExecStringCommand('NtagWrite,4,012345678');" style="width:150px; height:30px;"/>
		</td>
	</tr>	
	<tr style="width:100px; height:40px;">
		<td>
			中止M1卡片:
		</td>		
		<td>
			<INPUT id = "M1Halt"  type=button value="M1Halt" onclick="javascript:ExecStringCommand('Halt');" style="width:150px; height:30px;"/>
		</td>
	</tr>		
	<tr style="width:100px; height:40px;">
		<td>
			清除日志:
		</td>		
		<td>
			<INPUT id = "ClearLog"  type=button value="ClearLog" onclick="javascript:document.getElementById('log').innerHTML = '';" style="width:150px; height:30px;"/>
		</td>
	</tr>		
	<tr>
		<td colspan="2">
			<h3>日志</h3>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<ul id="log" style="overflow: auto; list-style: none; padding:0; background:#ffffff; font-size:small; border-style:solid; border-color:#c0c0c0"></ul>
		</td>
	</tr>  </table>