写点什么

即时通信的应用小实例——扫码签到小系统

作者:为自己带盐
  • 2022 年 7 月 14 日
  • 本文字数:2699 字

    阅读完需:约 9 分钟

即时通信的应用小实例——扫码签到小系统

小实例?小系统?

是的,小实例,小系统,或者说是子系统。

因为签到本身的业务逻辑并不复杂,属于整个大的业务系统中的一个小环节,,至于签到的前置和后置操作,这里不做考虑,所以就是小实例,小系统。


模块拆解

一个简单签到系统,应该包含至少两个部分

  • 一个是签到用户的部分,也就是来签到的用户

  • 另一个是管理签到的部分,比如是用户自己扫码完成签到,还是管理人员或者设备来扫描签到人员的二维码,还是人脸识别等方式。

这里,我介绍的场景是第二种方式,其中刷脸签到的场景,我在之前的一篇博文里也有介绍过,大伙感兴趣的可以去翻一下,👉传送门

来看下我这边涉及到的基本流程



其中即时消息的模块,应用在了管理人员扫码完成签到后,即时推送给用户签到结果。

客户端(签到人员)

因为这里主要是介绍即时通信在系统中的使用场景,其他的部分我觉得在代码甚至业务上并没有太大的通用性,所以就主要介绍即时消息的使用。

在即时消息的选型上,我们最开始也是用的 signalr,后来该到了腾讯的 IM SDK 上。

注册腾讯云,开通 IM 服务的流程也不多说了,之前也介绍过,在这里👉传送门

来看下客户端的继承代码

function TimInit(){  axios.post("后端接口地址", {"请求参数"})    .then(function(data){             console.log(data);    let json = data.data;    let ret = JSON.parse(json.data.ret);    if(ret.ActionStatus=="OK"){      TT.info("消息中心连接成功");      let options = {        SDKAppID: 1400441609,        userID: getCookie("username")      };      options.userSig = json.data.usersig;      console.log(options);      let tim = TIM.create(options);      // 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明      tim.setLogLevel(1);      tim.on(TIM.EVENT.MESSAGE_RECEIVED, function (event) {        // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面                                    console.log(event.data);        if(event.data){          let from = event.data[0].from;          let content = event.data[0].payload.text;          if(from=="tony" || from =="administrator"){            TT.note("消息中心:" + content);          }        }      });      tim.login(options);    }  })}
复制代码

这一个函数,包含了导入当前用户,监听消息提醒,登录。

集成好后,浏览器控制台打印出如下消息,代表接入成功

到这里,我们就可以写我们的生成签到码的逻辑了,具体形式就是根据登陆后获取到的个人信息和时间戳,生成一个唯一的签到码,时间戳的做用是标识这个签到码的有效时间。

//生成个人签到二维码function makeCode() {  var qrcode = new QRCode(document.getElementById("myCode"), {    width: 260,    height: 260,    correctLevel: QRCode.CorrectLevel.Q  });  let content = {    "userId": userId,    "timeStamp": new Date().getTime()  };  qrcode.makeCode(JSON.stringify(content));}
复制代码


到这里,客户端的主要流程就完成了,其他就是一些记录签到时间,次数等后置操作


服务端(扫码人员)

服务端的流程也不困难,只是流程相对多一些,包含了很多数据管理的功能项,这里还是着重说一下扫码人员扫码之后的一些操作。

既然是扫码,得解决怎么扫码的问题。因为我们这是一个轻量级的小系统,所以就直接用微信的扫码接口

。这个接口的使用门槛很低,即便是个人主体账号,也可以使用。

axios.get("@Url.Action("getWxConfig")", {          params: {          "url": curr_href          }}).then(function (data) {  console.log(data);  var json = data.data;
wx.config({ debug: false, appId: '*******', // 必填,公众号的唯一标识 timestamp: json.data.timeStamp, // 必填,生成签名的时间戳 nonceStr: json.data.nonce, // 必填,生成签名的随机串 signature: json.data.signature,// 必填,签名 jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表 });})$("#btnScan").click(function () { wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { let params = JSON.parse(res.resultStr); params.__RequestVerificationToken = token; params.adminId = adminId; params.trainId = trainId; params.columnId = columnId; scan(params); } });})
复制代码

配置好后,绑定到按钮点击事件上,就可以调起微信扫一扫接口了,非常方便。

扫码之后,就是像服务端发送扫码结果的消息了,扫码会识别出用户 id 和时间戳,以及扫码人员自身所绑定的场次信息,将这些数据封装成 json 提交到后台在完成一系列验证操作之后,返回用户签到成功与否的消息。

签到流程结束,后台代码就是接受消息,像 IM 服务中心发送请求,基本都是业务代码,没啥可贴的了。

/// <summary>/// 请求hub中心,发送消息/// </summary>/// <param name="toAccount"></param>/// <param name="msg"></param>/// <returns></returns>public async Task<dynamic> RequestImHub(string toAccount,string msg){  var item = "{\"SyncOtherMachine\":2,\"To_Account\":\"" + toAccount + "\",\"MsgLifeTime\":60,\"MsgBody\":[{\"MsgType\":\"TIMTextElem\",\"MsgContent\":{\"Text\":\"" + msg + "\"}}],\"CloudCustomData\":\"\"}";  return await RequestHelper.HttpPostAsync($"{CipAssistant.ConfigurationHelper.GetSectionValue("imHub")}/send", item, "application/json");}
复制代码

IM 中心的代码在这里有,就不再贴了。


好了,其实代码根本就不重要,主要就是继承的过程,来看下效果

为了方便管理人员扫码,这里还设置了一个自动扫码的开关,开启后,设备就可以定时循环扫描了,可以节省一定的人力成本。


这个图里一直提示签到失败,是因为我在上面已经完成当前场次的签到了,主要演示的是它循环定时扫码的功能。

介绍这篇,其实就是想多展示一些小众场景的即时通信 IM 的使用案例,除了常见的聊天,客服,实时音视频等这些常见场景,在很多地方 IM 都可以发挥重要功能,就像是给系统插上了翅膀一样,灵活多变。当然了,也看成本,毕竟第三方的都是收费的,自己搞的话连接数多了要考虑负载问题,说到底还是权衡成本啦。

好了,今天基本就这样了。晚安~

发布于: 刚刚阅读数: 3
用户头像

学着码代码,学着码人生。 2019.04.11 加入

狂奔的小码农

评论

发布
暂无评论
即时通信的应用小实例——扫码签到小系统_即时通信_为自己带盐_InfoQ写作社区