转自：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的库，今天先不介绍。
有了这些扩展，我们第一步，引用
 
  1. var QRCode = require('qrcode');
  2. var http = require('http');
  3. var url = require('url');
  4. var fs = require('fs');
  5. var UUID = require('uuid-js');

好了，我们来创建web服务：

  1. http.createServer(function(req, res) {
  2. var URL = url.parse(req.url);
  3. var PATH = URL.pathname;
  4. var uuid4 = UUID.create();
  5. var sessionID = uuid4.toString();
  6. if (PATH == "/qrcodeimage") {
  7. var sessionID = URL.query;
  8. if (typeof (sessionID) != "undefined") {
  9. generateQRCode(sessionID, req, res);
  10. } else {
  11. console.log("no sessionID");
  12. }
  13. } else if (PATH == "/") {
  14. console.log(sessionID);
  15. generateIndex(sessionID, req, res);
  16. }
  17. }).listen(8888, 'localhost');

在web服务器的代码中，我们监听8888端口，并对/和/qrcodeimage做分析

如果访问的url为/则显示主页面，调用generateIndex方法，这个方法返回欢迎页面。

如果访问的url为/qrcodeimage，则调用generateQRCode方法，这个方法将生成二维码并返回二进制流。

下面是这个2个方法：

  1. function generateQRCode(sessionID, req, res) {
  2. res.writeHead(200, {
  3. 'Content-Type' : 'image/png'
  4. });
  5. QRCode.draw(sessionID, function(err, canvas) {
  6. res.end(canvas.toBuffer());
  7. });
  8. }
  9. function generateIndex(sessionID, req, res) {
  10. res.writeHead(200, {
  11. 'Content-Type' : 'text/html; charset=UTF-8'
  12. });
  13. res
  14. .end('<html><body><p align="center">请扫描二维码</p><p align="center"><img src="/qrcodeimage?'
  15. + sessionID + '"></p></body></html>');
  16. }

代码非常的短，也不需要做什么解释，实际上就是用户在访问首页的时候，服务器创建sessionID，并将这个ID作为创建二维码图片的参数，而服务器再根据这个参数创建响应的二维码，也就是说页面和二维码是一一关联的。

运行一下：

用任何手机二维码软件扫一下看看，和console里面log出来的uuid一致。

那么今天我们的工作到此结束，本文只是一个简单的例子，仅作测试，没有任何的容错，生产系统绝对不能这样马虎哦。

实现手机扫描二维码页面登录，类似web微信-第二篇，关于二维码的自动生成的更多相关文章

  1. 实现手机扫描二维码页面登录，类似web微信-第一篇，业务分析

    转自:http://www.cnblogs.com/fengyun99/p/3541249.html 关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描 ...

  2. 实现手机扫描二维码页面登录，类似web微信-第四篇，服务器端

    转自:http://blog.csdn.net/otangba/article/details/8273952 终于到了服务器端,第三篇的手机客户端如果已经下载了的话,没有服务器是不能正常运行的. 服 ...

  3. 实现手机扫描二维码页面登录，类似web微信-第三篇，手机客户端

    转自:http://www.cnblogs.com/fengyun99/p/3541254.html 上一篇,介绍了二维码生成的机制,紧接着,我们就要开发手机客户端来识别这个二维码. 二维码,实际上是 ...

  4. ExcelReport第二篇：ExcelReport源码解析

    导航 目   录:基于NPOI的报表引擎——ExcelReport 上一篇:使用ExcelReport导出Excel 下一篇:扩展元素格式化器 概述 针对上一篇随笔收到的反馈,在展开对ExcelRep ...

  5. 第二篇：SOUI源码的获取及编译

    源代码的获取 SOUI的源码采用SVN管理. SVN:http://code.taobao.org/svn/soui2 这里主要包含两个目录:trunk 及 third-part. trunk目录保存 ...

  6. 二丶人生苦短，我用python【第二篇】

    1 编码 python解释器在加载 .py 文件中的代码时,对内容默认进行ascill编码,因此存在中文会报错,所以需要告诉python解释器,用什么编码来执行源代码.) ASCII码,主要用于显示现 ...

  7. 工作之余第二篇（看源码自己实现ArrayList和LinkList）

    先看源码: 首先看构造器,构造器有三种,一种直接给定初始长度的,如下代码 public ArrayList(int initialCapacity) { if (initialCapacity > ...

  8. 手机扫描二维码下载APP，根据操作系统不同自动下载

    Android和IOS手机扫描二维码下载APP,根据OS不同,自动处理相应下载操作.IOS自动跳转至AppStore应用下载页,Android自动下载应用的apk包. <script type= ...

  9. asp：手机扫描二维码跳转手机版

    如果想手机扫描用pc版网站生成的二维码跳转到对应的手机版的话,请在pc端的首页的<head></head>标签里面加入下面内容:   <script src=" ...

随机推荐

  1. php调用一个c语言写的接口问题

    用php调用一个c语言写的soap接口时,遇到一个问题:不管提交的数据正确与否,都无法请求到接口 1.用php标准的soap接口去请求 2.拼接xml数据去请求 以上两种方式都不正确 解决办法:php ...

  2. Failed to execute request because the App-Domain could not be created.

    原错误信息: 服务器应用程序不可用 您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误 ...

  3. Fragment的隐藏与显示

    package com.bwie.helpdemo; import com.bwie.fragment.BillFrag; import com.bwie.fragment.IndexFrag; im ...

  4. 匹配所有不可见元素，或者type为hidden的元素

    查找隐藏的 tr HTML 代码: <table> <tr style="display:none"><td>Value 1</td> ...

  5. pageX，clientX，screenX，offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

  6. 【转】Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If

    转载地址:http://fanshuyao.iteye.com/blog/1695482 在eclipse启动tomcat时遇到超时45秒的问题: Server Tomcat v7.0 Server ...

  7. hibernate的二级缓存

    缓存(Cache): 计算机领域非常通用的概念.它介于应用程序和永久性数据存储源(如硬盘上的文件或者数据库)之间,其作用是降低应用程序直接读写永久性数据存储源的频率,从而提高应用的运行性能.缓存中的数 ...

  8. javascript 设计模式2----策略模式

    1.定义:定义一系类的算法,把它们一个个封装起来,并且使它们可以相互替换 2.解释:就是把算法和一个规则单独分封,在使用时单独调用. 简单例子: var strategies = { "S& ...

  9. 【MySQL】MySQL快速插入大量数据

    起源 在公司优化SQL遇到一个索引的问题,晚上回家想继续验证,无奈没有较多数据的表,于是,想造一些随机的数据,用于验证. 于是 于是动手写.由于自己不是MySQL能手,写得也不好.最后,插入的速度也不 ...

  10. linux环境下安装mysql数据库遇到的问题

    总结一句话: 安装完mysql数据库记得授权远程登录.   坑的现象: ERROR 1045 (28000): Access denied for user 'guoxp'@'localhost' ( ...