随着H5技术的不断发展与推广，H5技术被广泛用于移动设备，PC终端等众多领域。同时，越来越多的应用都基于B/S(浏览器/服务器)模式，降低开发难度的同时还能更好的普及和应用，突破了硬件设备的兼容性问题。然而，嵌入式开发的设备并没有跟上H5技术的脚步，现在很多嵌入式设备并不支持或者不能友好的支持浏览器应用。举个例子，如何在web浏览器页面使用IC卡读卡器并且兼容所有浏览器？针对这个问题，有人肯定会说利用active X控件就可以了啊！确实如果是基于IE或者IE内核的浏览器使用active X是没有任何问题，但是现在除了使用IE浏览器还有大部分使用Chrome和Firefox等多种内核和版本的浏览器，为了让嵌入式设备更好的兼容所有浏览器，我们提供了一套基于在嵌入式设备中内置WebSocket组件的方案，希望能帮助大家在解决使用浏览器集成嵌入式设备中遇到的难题，一下仅以我司智能卡读写器做详细介绍。

传统的ActiveX组件，通过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 = '

'+getNowFormatDate()+'#new WebSocket error:'+ evt.data+'<>' + document.getElementById('log').innerHTML;

socket = null;

if (typeof(connCb) != "undefined" && connCb != null)

connCb("-1", "connect error!");

return;

}

socket.onopen = function ()

{

document.getElementById('log').innerHTML = '

'+getNowFormatDate()+'#连接服务器成功<>' + document.getElementById('log').innerHTML;

document.getElementById('status').innerHTML = 'Socket Open';

document.getElementById('status').className = 'online';

};

socket.onclose =  function(event)

{

document.getElementById('log').innerHTML = '

'+getNowFormatDate()+'#断开连接:' + event.wasClean + '<>' + 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 = '

'+getNowFormatDate()+'#收到数据:' + event.data + '<>' + 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 = '

#获取设备句柄:' + m_nHandle + '<>' + document.getElementById('log').innerHTML;

//    }

//document.getElementById('log').innerHTML = '

#received:' + arrString[0] + '<>' + document.getElementById('log').innerHTML;

//document.getElementById('log').innerHTML = '

#received:' + arrString.length + '<>' + document.getElementById('log').innerHTML;

};

socket.onerror = function(event)

{

document.getElementById('log').innerHTML = '

#disconnected:' + event.message + '<>' + 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 = '

#send failed. websocket not open. please check.<>' + 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

}

};

LotusCard WEB Socket 演示页面读卡器IP:

读卡器PORT:

状态

通信函数:1、连接服务器 2、执行字符串函数并解析结果 3、断开连接

连接服务器:

关闭连接:

获取连接状态:

获取MCU序列号:

蜂鸣:

获取M1卡号:

装载密码:

验证密码:

读数据扇区0块1:

写数据扇区0块1:

中止M1卡片:

清除日志:

日志