研究成功：利用MQTT技术实现扫码签到大屏时时显示姓名

hanbaohong

浏览: 388230 次
性别:
来自: 广州

最近访客更多访客>>

342729684

geqiaoyu

xiamizai

a2624989

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

MQTT

一、功能需求：

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>

分享到：