实现手机扫描二维码页面登录,类似web微信-第二篇,关于二维码的自动生成
转自:http://www.cnblogs.com/fengyun99/p/3541251.html
接上一章,我们已经基本把业务逻辑分析清楚了
下面我们第一步,实现二维码的web动态生成。
页面的二维码包含的信息我在上一篇已经解释过,是一个页面的sessionID,这个sessionID主要是标示出哪个页面是哪个页面,例如你打开N个页面,必然每个页面的标示会不一样,只有你用手机扫描了某一个页面(page a)的二维码,将来响应操作的页面只能是page a。
实现二维码的类库非常多,如果你的平台是java的,可以选择zxing这种功能强大且应用广泛的类库,不过我们今天打算采用一个响应高并发无阻塞的服务器端技术:nodejs。
关于nodejs我也没有太多深入的研究,不过该技术是采用事件驱动模型的无阻塞服务。举一个案例,云输入法用nodejs作为服务器,非常的完美。
关于nodejs的安装已经相关的扩展如何安装,请自行去官网学习:http://nodejs.org

本文的例子将使用以下一些扩展:
- QRcode,这个扩展是在nodejs生成二维码的扩展,可以生成客户端和服务器端,为了兼容性考虑,我们只用服务端的功能。由于服务端的功能需要一些额外的lib,例如canvas和colors,需要额外下载和配置。canvas是本地码,需要在不同的OS环境下编译,具体如何操作请查阅canvas的安装指南。
- http和url,这2个扩展是nodejs基本扩展,提供web服务以及对url的分析。
- fs,本地文件访问,这个我们不一定用,但是如果你需要将二维码保存为图片,以及读取,需要使用这个库。
- uuid,生成nodejs服务端的UUID的库。
- 后面的文章我们会不断翻新今天的代码,可能还有一些新的库,例如连接XMPP服务器和redis的库,今天先不介绍。
- var QRCode = require('qrcode');
- var http = require('http');
- var url = require('url');
- var fs = require('fs');
- var UUID = require('uuid-js');
好了,我们来创建web服务:
- http.createServer(function(req, res) {
- var URL = url.parse(req.url);
- var PATH = URL.pathname;
- var uuid4 = UUID.create();
- var sessionID = uuid4.toString();
- if (PATH == "/qrcodeimage") {
- var sessionID = URL.query;
- if (typeof (sessionID) != "undefined") {
- generateQRCode(sessionID, req, res);
- } else {
- console.log("no sessionID");
- }
- } else if (PATH == "/") {
- console.log(sessionID);
- generateIndex(sessionID, req, res);
- }
- }).listen(8888, 'localhost');
在web服务器的代码中,我们监听8888端口,并对/和/qrcodeimage做分析
如果访问的url为/则显示主页面,调用generateIndex方法,这个方法返回欢迎页面。
如果访问的url为/qrcodeimage,则调用generateQRCode方法,这个方法将生成二维码并返回二进制流。
下面是这个2个方法:
- function generateQRCode(sessionID, req, res) {
- res.writeHead(200, {
- 'Content-Type' : 'image/png'
- });
- QRCode.draw(sessionID, function(err, canvas) {
- res.end(canvas.toBuffer());
- });
- }
- function generateIndex(sessionID, req, res) {
- res.writeHead(200, {
- 'Content-Type' : 'text/html; charset=UTF-8'
- });
- res
- .end('<html><body><p align="center">请扫描二维码</p><p align="center"><img src="/qrcodeimage?'
- + sessionID + '"></p></body></html>');
- }
代码非常的短,也不需要做什么解释,实际上就是用户在访问首页的时候,服务器创建sessionID,并将这个ID作为创建二维码图片的参数,而服务器再根据这个参数创建响应的二维码,也就是说页面和二维码是一一关联的。
运行一下:

用任何手机二维码软件扫一下看看,和console里面log出来的uuid一致。
那么今天我们的工作到此结束,本文只是一个简单的例子,仅作测试,没有任何的容错,生产系统绝对不能这样马虎哦。
实现手机扫描二维码页面登录,类似web微信-第二篇,关于二维码的自动生成的更多相关文章
- 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析
转自:http://www.cnblogs.com/fengyun99/p/3541249.html 关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描 ...
- 实现手机扫描二维码页面登录,类似web微信-第四篇,服务器端
转自:http://blog.csdn.net/otangba/article/details/8273952 终于到了服务器端,第三篇的手机客户端如果已经下载了的话,没有服务器是不能正常运行的. 服 ...
- 实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端
转自:http://www.cnblogs.com/fengyun99/p/3541254.html 上一篇,介绍了二维码生成的机制,紧接着,我们就要开发手机客户端来识别这个二维码. 二维码,实际上是 ...
- ExcelReport第二篇:ExcelReport源码解析
导航 目 录:基于NPOI的报表引擎——ExcelReport 上一篇:使用ExcelReport导出Excel 下一篇:扩展元素格式化器 概述 针对上一篇随笔收到的反馈,在展开对ExcelRep ...
- 第二篇:SOUI源码的获取及编译
源代码的获取 SOUI的源码采用SVN管理. SVN:http://code.taobao.org/svn/soui2 这里主要包含两个目录:trunk 及 third-part. trunk目录保存 ...
- 二丶人生苦短,我用python【第二篇】
1 编码 python解释器在加载 .py 文件中的代码时,对内容默认进行ascill编码,因此存在中文会报错,所以需要告诉python解释器,用什么编码来执行源代码.) ASCII码,主要用于显示现 ...
- 工作之余第二篇(看源码自己实现ArrayList和LinkList)
先看源码: 首先看构造器,构造器有三种,一种直接给定初始长度的,如下代码 public ArrayList(int initialCapacity) { if (initialCapacity > ...
- 手机扫描二维码下载APP,根据操作系统不同自动下载
Android和IOS手机扫描二维码下载APP,根据OS不同,自动处理相应下载操作.IOS自动跳转至AppStore应用下载页,Android自动下载应用的apk包. <script type= ...
- asp:手机扫描二维码跳转手机版
如果想手机扫描用pc版网站生成的二维码跳转到对应的手机版的话,请在pc端的首页的<head></head>标签里面加入下面内容: <script src=" ...
随机推荐
- 看门外汉如何实现:C#操作 MongoDB基本CURD的事务控制
第一部分 基本设计 目前最新版本的C#驱动MongoDB-CSharpDriver-2.2.3,比之前的版本更新比较大,在网上很难找到这个版本的相关C#操作资料,以下都是个人自发研究.测试的,如有雷同 ...
- ELK修炼之道
看了ELK大半年了,现在就慢慢的总结一下对ELK的理解 参考资料 ELK stack中文指南 Elasticsearch权威指南 官方文档 Elasticsearch基础篇 此篇用于介绍Elastic ...
- iOS中Block的基础用法
本文简介 本章不会对Block做过多的实现研究.只是讲解基本的用法.纯粹基础知识.结合实际项目怎么去做举例.Block使用场景,可以在两个界面的传值,也可以对代码封装作为参数的传递等.用过GCD就知道 ...
- [课程设计]Scrum 2.7 多鱼点餐系统开发进度(下单一览页面-菜式添加功能的继续实现)
Scrum 2.7 多鱼点餐系统开发进度 (下单一览页面-菜式添加功能的继续实现) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...
- NumberToChineseConverter.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- Codeforces Round #231 (Div. 2) E.Lightbulb for Minister
题意:有n个点,问在一个m边形内哪个点与这n个点的距离平方和最小 题解:(ai-a0)^2=ai*ai+a0*a0-a*ai*a0 合起来就是a1*a1+...+an*an+n*a0*a0-2*a0* ...
- 【noip新手入门向】OpenJudge1.3-14大象喝水
一.写在前面 我也不知道我为什么要写这个鬼畜的东西←_←才不是为了水blog量什么的(划掉),其实是为了明天给学弟学妹们传教准备. 这道题对完全对c语言没有概念的小萌新们极度友好,可以锻炼小萌新们的代 ...
- Unity-Animator深入系列---API详解
回到 Animator深入系列总目录 测试Unity版本为5.2.1 人形动画的接口都有标注 本列表不包含所有标注为过时的方法 1.Vector3 angularVelocity { get; } [ ...
- Android项目开发遇到的问题(64K的错误)的解决之路,从入坑到出坑
自己一个android项目,一直以来进展还算顺利,没有遇到什么严重性的问题,今天准备给同事手机上安装一下玩玩,谁知丢人丢大,无法build apk!报错!my god,我开发没问题啊,我手机连上usb ...
- [bzoj2124]等差子序列(hash+树状数组)
我又来更博啦 2124: 等差子序列 Time Limit: 3 Sec Memory Limit: 259 MBSubmit: 941 Solved: 348[Submit][Statu ...