轉載自：http://blog.csdn.net/otangba/article/details/8253822
接上一章，我們已經基本把業務邏輯分析清楚了
下面我們第一步，實現二維碼的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微信-第四篇，服務器端
http://www.cnblogs.com/fengyun99/p/3541256.html
實現手機掃描二維碼頁面登錄，類似web微信-第三篇，手機客戶端
http://www.cnblogs.com/fengyun99/p/3541254.html
實現手機掃描二維碼頁面登錄，類似web微信-第二篇，關於二維碼的自動生成
http://www.cnblogs.com/fengyun99/p/3541251.html
實現手機掃描二維碼頁面登錄，類似web微信-第一篇，業務分析
http://www.cnblogs.com/fengyun99/p/3541249.html