前端需要引用qrcode.js
<script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<div id="qrcode" style="width:200px;height: 200px;"></div>
页面加载后,前端执行函数getQrcode()获取并画出二维码
getQrcode(){
//创建唯一对应码,此处生成毫秒数
this.nowid=new Date().getTime();
//新建二维码对象
this.qrcode = new QRCode(document.getElementById("qrcode"), {width : 200,height : 200});
//二维码数据
var qcodetext="https://www.shennongfucha.cn/test/#/pages/adminlogin/adminlogin?id="+this.nowid;
绘制、显示二维码
this.qrcode.makeCode(qcodetext);
var src=$("#qrcode img").attr("src");
},
前端执行函数connect(),向服务器端发送对应码,建立webSocket连接,随时等待接收服务器端返回端数据。
connect(){
var that=this;
this.ws = new WebSocket("wss://www.shennongfucha.cn:8080");
this.ws.onopen = function(){
//向后端传递对应码nowid,手机扫码后识别来源 that.ws.send(JSON.stringify([{"froms":"logincheck","type":"service","id":that.nowid}]));
};
//随时等待接收服务器端发回端数据,判断是否为许可账户
this.ws.onmessage = function (evt){
var msg = JSON.parse(evt.data);
that.canlogin=msg.canlogin;
if(that.canlogin=="true"){
that.tip('欢迎-'+msg.data.account_text+'-'+msg.data.username);
that.logindata=msg.data;
that.atype=msg.data.account_type;
sessionStorage.setItem("logindata",JSON.stringify(msg.data));
setTimeout(function(){that.logined=true;that.qrcode.clear();},2500);
}else if(that.canlogin=="false"){that.tip("您的账号不是管理员");}
};
this.ws.onclose = function(){ console.log("连接已关闭...");};
}
服务器端node.js
首先要确保8080端口没有被占用,域名证书和秘钥可用;
var cfg = {
port: 8080,
ssl_key: '././keys/11111_www.example.cn.key',
ssl_cert: '././keys/11111_www.example.cn.pem'
};
var httpServ = require('https');
var WebSocketServer = require('ws').Server; // 引用Server类
// 创建request请求监听器
var processRequest = (req, res) => {
res.writeHead(200);
res.end('厉害了,我的WebSockets!\n');
};
var app = httpServ.createServer({
// 向server传递key和cert参数
key: fs.readFileSync(cfg.ssl_key),
cert: fs.readFileSync(cfg.ssl_cert)
}, processRequest).listen(cfg.port);
// 实例化WebSocket服务器
var wss = new WebSocketServer({
server: app
});
// 如果有WebSocket请求接入,wss对象可以响应connection事件来处理
wss.on('connection', (wsConnect) => {
// console.log('服务器已启动,监听中~');
wsConnect.on('message', (message) => {
var data=JSON.parse(message);
//判断请求类型
if(data[0].froms=="logincheck"){
//判断请求来源为管理后台端
if(data[0].type=="service"){
userlist["id"+data[0].id]=wsConnect;
//判断请求来源为用户扫码端
}else if(data[0].type=="user"){
//将扫码用户id与服务器端管理员库中端管理员id列表进行核对
db.find("otherset",{"id":"admin"},function(err,result){
var admin=result[0].data;
var adminarr=[];
for(let i=0;i<admin.length;i++){adminarr.push(admin[i].unionid);}
var adminindex=adminarr.indexOf(data[0].unionid);
var canlogin=adminindex>=0?"true":"false";
//sendto为发送目标,此处为管理后台
var sendto=userlist["id"+data[0].id];
var admindata=adminindex>=0?admin[adminindex]:{};
var sendinfo=JSON.stringify({"canlogin":canlogin,"data":admindata});
if(sendto){
sendto.send(sendinfo, (err) => {if (err) {console.log(JSON.stringify(err));}});
}
});
}
}
});
wsConnect.on('close', (err) => {
// console.log(data);
// console.log(wsConnect)
if (err) {
// console.log(JSON.stringify(err));
}
});
});