轉載自:http://blog.csdn.net/otangba/article/details/8247594
關於XMPP組件的文章，先休息兩天，好歹已經完整的寫了一份。
這兩天，先實現一套關於web微信掃描二維碼頁面登錄的試驗，因為這種模式在我們的很多業務場景里大有前途。
首先介紹一下web微信登錄的過程
- 手機必須運行微信，並且合法登錄
- 打開web微信的頁面，展示一個二維碼
- 用手機微信的掃描功能掃描該二維碼
- 頁面立即顯示手機已掃描
- 手機顯示是否確認登錄，點擊確認
- 頁面登錄
這個過程將傳統的web登錄轉到手機上，並且通過掃描二維碼這種流行的形式展現。必須確認，這種方式很好玩也很方便，另外也很安全。
手機，作為一個個人物品，類似密保卡，已經被廣泛應用在生成登錄驗證碼的業務中。
例如暴雪登錄器，如果你玩魔獸世界或者Diablo3的話，應該會買一個戰網密保設備，或者安裝手機版的密令。
淘寶也通過手機密保來實現安全驗證，那么微信web登錄其實也類似，我們相信手機是安全的，這個是前提。
實現手機掃描二維碼頁面登錄，類似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
為了實現整個過程，我們先把整個過程涉及到的業務點分析一下，下面是一張思維導圖
通過分析，我們發現主要需要解決的問題是：
手機掃描之后，頁面怎么能實時顯示，如果我打開多個瀏覽器，手機掃一個，服務器怎么通知哪個瀏覽器
如果你還有其他問題，那么不妨先看下去，說不定你的問題不是問題。
開始我說過，手機客戶端是一個已經登錄的程序，至於這個客戶端怎么登錄，采用什么方式登錄，我們暫且不討論。總之，登錄之后手機必須要獲得登錄成功的憑證，這個憑證我稱為身份token，在服務器端也必須保存這個token已證明用戶手機是登錄的。
手機客戶端通常並不會每次在啟動程序的時候都要求你輸入密碼，例如手機微信或者手機QQ，可能會有過期的機制，但是在短時間內，只要你登錄成功過，下次運行就不再需要登錄了。那么我們假設token在過期之前沒有變化，就算有變化，也一定和服務器是同步的。
那么回到剛才的問題上，服務器怎么通知手機掃描的那個頁面進行相應的展示，例如：已掃描
關鍵問題現在已經找到，其實就是web頁面和服務器之間的通信必須是維持的長連接。
通過對微信的web頁面數據分析，我們發現，在沒有任何操作的時候，web微信維持了一個27秒的request
為什么一個請求會長達27秒呢？難道服務器這么差勁么，當然不是。這個就是我們將要實現的http long polling。
雖然我們有很多種方式實現web和服務器實現長連接，但是除了long polling之外，其他的都或多或少需要一些額外的支持。例如：
客戶端輪詢，這個完全不考慮，因為不能時時刻刻都去輪詢，有時間片差，體驗不夠好，而且對服務器負載造成很大浪費；
利用flash的socket能力，這個是可以的，不過你不能保證所有瀏覽器都支持flash，而且也有可能會有防火牆的限制，不過這種解決方案也可以備選；
利用html5的websocket實現，這個也是可以的，不過你也不能保證所有的瀏覽器都支持html5。
所以我們還是打算使用純js腳本實現long polling，這樣兼容性最好。
下面我來解釋一下整個流程的通信過程：
隨便說一下，在家沒用Mac ，windows上裝了visio 2013，體驗的確不錯，很喜歡。
通過這張圖，我們應該確定實現掃描二維碼登錄頁面是可以實現的，我們只要很好的解決long polling，基本上就沒有瓶頸了。
結合之前我介紹的XMPP相關技術，如果這里不是web server，而是一個XMPPserver。
比如我的手機客戶端就是xmpp客戶端，通過xmpp和服務器通信，也沒有問題，一方面，XMPP服務器提供BOSH的模式，而BOSH本身就是long polling的服務器實現，對於客戶端來說，我們可以選擇基於flash的strophe.js(這貨看起來是js，其實還是用的flash)，或者干脆，我們就用jquery來實現。
為了讓我們的實現更具普遍性，我們將采用nodejs來實現服務器端，web客戶端采用jquery，而手機客戶端就用http協議提交
今天我們先把業務簡單分析一下，下一篇，我就帶着大家一步一步實現這個精彩的例子。