一、功能需求:
1、用手机扫一扫大屏上的动态二维码完成签到。
2、能按会场座位图自动分配所有人员的座位。
3、大屏上能时时显示已签到人姓名、未签到人姓名、未签到总人数。
二、实现方法:
1、大屏电脑端利用mqtt.js建立即时通讯连接,等待手机扫码发来签到信息。
2、大屏电脑端用JS调用后端API接口获取所有人员的姓名和ID,并按会场座位图在大屏上显示每个姓名的指定座位。
3、大屏电脑端用qrcode.js动态生成签到二维码并显示在大屏上。
4、人员到会场时用手机扫大屏二维码后自动把本人的姓名和ID发送到大屏电脑端。
5、大屏电脑端接收到手机端发来的签到人员信息,在大屏上时时显示已签到人姓名、未签到人姓名、未签到总人数。
三、部份代码:
1、大屏电脑端的代码:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>教师例会签到系统</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> * {font-size: 16px;padding: 0;margin: 0;} .tbmingdan td {border: 1px solid #333;} .tbmingdan span {border: 1px solid #333;width: 70px;margin: 3px 1px;padding: 5px 0px;float: left;text-align: center;} #boxCenter {width: 822px;} .boxLeftRight {width: 448px;} .box {border: 1px solid #333;text-align: center;margin: 3px 1px;padding: 5px 0px;} </style> </head> <body> <div id="tisi" style="color: red;"></div> <table border="0" cellspacing="15" cellpadding="1" v-scope> <tr align="center"> <td id="showewm"></td> <td colspan="2"><img src="gssyxx400.jpg" /> <H1 style="font-size: 38px; margin: 9px;">教师例会签到系统</H1><br><br> <P style="font-size: 24px;" v-scope>请用手机“企业微信”扫一扫左面的二维码,即可完成签到,签到后按下图中指定位置就坐,谢谢!<br><br> 签到成功显示蓝色姓名,未签到显示黑色姓名({{store.wqdRenshu}}人)</P> </td> </tr> <tr class="tbmingdan"> <td valign="top"> <div class="box">从第二排开始:四五六年级副班主任座位</div> <div class="boxLeftRight"> <div> <span v-for="js in store.fbzr2Arr" v-bind:id="'jsid'+js.jsid">{{js.jsname}}</span> </div> </div> </td> <td valign="top"> <div class="box">第一排:行政座位</div> <div class="box">第二排:助理座位,从第三排开始是班主任座位</div> <div id="boxCenter"> <span v-for="js in store.bzrArr" v-bind:id="'jsid'+js.jsid">{{js.jsname}}</span> </div> </td> <td valign="top"> <div class="box">从第二排开始:一二三年级副班主任座位</div> <div class="boxLeftRight"> <div> <span v-for="js in store.fbzr1Arr" v-bind:id="'jsid'+js.jsid">{{js.jsname}}</span> </div> </div> </td> </tr> </table> <script src="js/jquery.min.js"></script> <script src="js/qrcode.min.js"></script> <script src="js/mqtt.min.4.1.0.js"></script> <script src="js/petite-vue.min.js"></script> <script> const store = PetiteVue.reactive({ bzrArr: [], fbzr1Arr: [], fbzr2Arr: [], jsids: "", wqdRenshu: 0, linkok: 0 }) PetiteVue.createApp({ store }).mount(); function getById(id) { return document.getElementById(id) } const topic = "GssyXXX" + new Date().getTime(); const connectUrl = "ws://broker-cn.emqx.io:8083/mqtt"; getById("tisi").innerText = "正在连接MQTT服务器,请等待..." const client = mqtt.connect(connectUrl, { clean: false, connectTimeout: 4000, reconnectPeriod: 1000, keepalive: 30, clientId: topic }) client.on('connect', () => { client.subscribe(topic, () => { getById("tisi").innerText = "" if (store.linkok == 0) { makeCode(); getdata(); store.linkok = 1; } }) }); client.on('reconnect', function (error) { getById("tisi").innerText = "正在重连MQTT服务器..." }) client.on('message', function (topic, message) { var tmpArr = message.toString().split('_'); var toTopic = tmpArr[0]; var jsid = tmpArr[1]; $("#jsid" + jsid).css("color", "blue"); store.jsids = store.jsids.replace(',' + jsid + ',', ','); store.wqdRenshu = store.jsids.split(',').length - 2; client.publish(toTopic, jsid.toString(), { qos: 1 }); }); client.on("close", function () { getById("tisi").innerText = "已断开连接" }); function makeCode() { var qrcode = new QRCode(getById("showewm"), { width: 300, height: 300 }); qrcode.makeCode("http://xxx.xxx.xxx/xxxxx?topic=" + topic); } function getdata() { $.get("/xxx/xxxxx", function (res) { store.bzrArr = res.bzr; store.fbzr1Arr = res.fbzr1; store.fbzr2Arr = res.fbzr2; store.jsids = res.jsids; store.wqdRenshu = res.jsids.split(',').length - 2; }, "json") } </script> </body> </html>
2、手机扫码后发送签到信息的代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教师例会签到</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <script src="js/mqtt.min.4.1.0.js"></script> </head> <body> <div id="tisi" style="color:red;"></div> <script> var getUrl = location.search.substr(1); var tmpArr = getUrl.split("_"); var topic = tmpArr[0]; var jsId = tmpArr[1]; if (topic == "" || jsId == "") { getById("tisi").innerText = "扫码有误,请重新扫码签到!"; } else { var jsname = decodeURI(tmpArr[2]); var dyTopic = "GssyJslh"; var myclientId = "GssyXXX" + jsId; function getById(id) { return document.getElementById(id) } const connectUrl = "ws://broker-cn.emqx.io:8083/mqtt"; const client = mqtt.connect(connectUrl, { connectTimeout: 4000, reconnectPeriod: 1000, clientId: myclientId }) client.on('reconnect', function (error) { getById("tisi").innerText = myclientId + "重连MQTT服务器" + getUrl; }) client.on('connect', () => { getById("tisi").innerText = "MQTT服务器连接成功!" var toMsg = dyTopic + '_' + jsId; client.publish(topic, toMsg.toString(), { qos: 1 }); client.subscribe(dyTopic, () => { var toMsg = dyTopic + '_' + jsId; getById("tisi").innerText = "正在提交扫码签到信息‘" + toMsg + "’,请等待反馈..."; client.publish(topic, toMsg.toString(), { qos: 1 }); }) }) client.on('message', function (topic, message) {if (message == jsId){location.href = "qiandao_ok.html?" + jsname}}); client.on("close", function () {getById("tisi").innerText = "已断开连接"}); } </script> </body> </html>
相关推荐
C++实现mqtt协议:官网的mqtt c++实现,个觉得写得非常棒!
毕业设计:基于MQTT的物联网设备接入平台。使用Flink流处理框架.zip
mqtt-代理该项目旨在解决通过单个面向公众的主机/端口组合将单个客户端与特定代理匹配的问题。 用法: 节点 mqtt-proxy <[host:]port> <map> IE 节点 mqtt-proxy localhost:1883 map.json 地图格式: 编辑 map....
智能汽车充电桩运营商平台,本项目采用mqtt技术实现消息推送,用Vue+Springboot+Mybatis。调用百度地图api。本人负责前端的开发以及后端的开发。 智能汽车充电桩运营商平台,本项目采用mqtt技术实现消息推送,用Vue+...
MQTT通信:利用ESP8266模块通过Wi-Fi连接到MQTT服务器,将脉搏数据以JSON格式发布到指定的主题。 OLED屏幕显示:使用STM32的I2C接口连接OLED屏幕,实时显示脉搏数据、心率等相关信息。 项目特点: 硬件平台:基于...
Mqtt: MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议。它是一种发布/订阅,极其简单和轻量级的消息传递协议,专为受限设备和低带宽,高延迟或不可靠的网络而设计。它...
MQTTnet .NET库实现的MQTT 客户端和服务端代码,源程序。可以执行。
xust: 基于QT实现MQTT客户端,实现与服务器连接、订阅与发布消息。 1)借助于QT开发环境实现一个MQTT客户端; 2) 具备输入服务器地址、端口号及连接功能; 3)具备发布、订阅消息功能。 注:借助“通信猫”作为...
该资源是基于MQTTnet实现Mqtt通信的demo MQTTnet 是一个用于基于 MQTT 的通信的高性能 .NET 库。它提供 MQTT 客户机和 MQTT 服务器(代理),并支持版本 5 之前的 MQTT 协议。
该demo主要围绕mqtt如何实现前后端实时通信及如何设计优雅的主题(topic),适用于物联网mqtt通信集成方案或实时性较强的通信功能。
功能:实现MQTT基本功能,包括连接、登录、定阅、发布、收报解析 仅有基本功能。其他待完善后上传。 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ MQTT(消息队列遥测传输)是ISO 标准(ISO/...
此Demo对应本人博客文章《MQTT(一)C#使用 MQTTnet 快速实现 MQTT 通信》 开发环境Win7 + vs2017
在Android Studio实现MQTT对主题的订阅和数据的收发,以及将数据封装成对象传回MainActivity,方便进行数据处理,其操作信息在TextView中展示相关的数据。对相关的数据一目了然,同时,在页面中为物联网的开发提供了...
HiveMQ MQTT客户端 MQTT 5.0和3.1.1兼容且功能丰富的高性能Java客户端库,具有不同的API风格和背压支持。 文档: : 社区论坛: : HiveMQ网站: ://www.hivemq.com/ 贡献准则: 执照: MQTT资源: 特征MQTT 3.1.1和...
mqtt.js库,下载后可以用找我要源码和压缩文件(mqtt.min.js),有问题随时请教
mqtt:Tarantool MQTT客户端
经典的MQTT客户端:MQTT.fx
基于Delphi的MQTT协议实现(使用INDY无三方控件)使用方法参考: http://blog.tdiot.cc/?p=10&preview=true
开发语言VB.net 使用库:MQTTnet 4.0.1.184 功能:mqtt客户端,连接、发布、订阅等等功能。 开发环境:VS2017
配置文件将读取以下配置数据:MQTT: 托管MQTT服务器的主机名或IP地址端口,要使用的服务器端口client_id,未设置的客户端ID,则将生成随机uuid keepalive,TCP / TLS连接保持活动状态安全: cacerts,证书文件的...