达到的目的:

在H5页面直接使用JS调用websocket客户端,客户端找到本地搭建的服务端,服务端中使用vue serialport进行串口通讯,回传信息到H5面。(啰嗦的描述:H5页面创建一个nodejs-websocket  客户端,然后搭建nodejs-websocket 以js服务端(使用forever启动),服务端里面使用serialport   来打开本地串口进行通讯。通讯收到串口返回信息后传给socket服务端,服务端在传递给nodejs-websocket客户端。描述比较长...)
以下为步骤:先启动第2步,在启动第1步。

第一步.H5页面,websocket客户端
 var   ws1 = new WebSocket('ws://localhost:5001');
        ws1.onopen = function () {
             oUl.innerHTML += "<li>人脸设备客户端已连接</li>";
        }
        ws1.onmessage = function (evt) {
            //该evt为回传数据,使用evt.data获取;
            //收到消息在去调用您页面上的具体业务逻辑如收到串口返回的消息就去调用支付方法,长连接。如果串口不回消息就一直等待。直到获取到信息。该处很关键。省去在用js方法轮询接口有没有返回数据。

            oUl.innerHTML += "<li>" + evt.data + "</li>";
        }
        ws1.onclose = function () {
            oUl.innerHTML += "<li>人脸设备客户端已断开连接</li>";
        };
        ws1.onerror = function (evt) {
            oUl.innerHTML += "<li>" + evt.data + "</li>";
        };

第二步.本地搭建的websocket服务端,直接贴代码(完整代码),该文件可以直接启动,本地安装nodejs,forever。启动方式:进入该文件目录,执行forever  socketServer.js  您本机COM3串口必须有,连接成功后会提示:IsOpen:true

let facestr="";
let value;
var wsface=require('nodejs-websocket');  
var SerialPort = require('serialport')
var serialPort = new SerialPort("COM3", {
   baudRate: 9600,   
   dataBits: 8,     
   parity: 'none',    
   stopBits: 1,   
   flowControl: false,
   autoOpen:false
}, false);

serialPort.open(function (err) {
    console.log('IsOpen:',serialPort.isOpen)
})
serialPort.on('error',function (error) {
    console.log('error: '+error)
        facestr=error;
}) 
var server = wsface.createServer(function (conn, res) {
    conn.on("text",function(str1){
            facestr="";
            const str11 = new Buffer("11","hex").toString('utf8');
            serialPort.write(str11, function (error, result) { })
        // conn.sendText(facestr);
    });
    conn.on("close",function(code,reason){
        console.log('connection closed');
        facestr="close";
    })
    //处理错误事件信息
    conn.on('error',function(err){
        console.log('throw err',err);
        facestr=err;
    })
}).listen(5001);
serialPort.on('data', function (data) {
    facestr= new Buffer(data, 'hex').toString('utf8');
     console.log("facestr conn="+facestr);
     server.connections.forEach(function (conn) {
              conn.sendText(facestr);   facestr="";
     })
});
 
以上是在开发中遇到的通过H5页面直接调用串口进行通讯的实例。

 

Logo

前往低代码交流专区

更多推荐