利用长轮询实现微信网页版扫码登录

扫码登录操作过程

• 浏览器输入：https://wx.qq.com/?lang=zh_CN
• 手机登录微信，利用“扫一扫”功能扫描网页上的二维码
• 手机扫描成功后，提示“登录网页版微信”；网页上显示“成功扫描 请在手机点击确认以登录”
• 手机端点击“登录网页版微信”，网页跳转到用户的微信操作界面

整个扫码登录的操作过程还是挺简单的，而且交互地实时性比较好，如果网络不是非常阻塞，整个过程还是非常快的。

 

扫码登录原理

扫码登录大概的思路是：微信手机客户端从网页二维码里面得到一些信息，然后发送给网页微信的服务器，网页服务器验证信息并响应。下面，我们借助火狐浏览器提供的Firebug工具看看，到底是怎么一回事儿吧！

 

1.每次打开微信网页版的时候，都会生成一个含有唯一uid的二维码，而且每次刷新后都会改变。这样可以保证一个uid只可以绑定一个账号和密码，确定登录用户的唯一性。可以通过手机上的UC浏览器提供的扫码功能查看二维码里面的信息，但并不会自动打开该地址。我刷新三次，扫描结果如下，其中最后面那串数字就是uid：

1） https://login.weixin.qq.com/l/48e24d66bdbc4f
2） https://login.weixin.qq.com/l/0787fb4fa7ad4c
3） https://login.weixin.qq.com/l/92781a4a7f1c47

通过查看网页源码，这个页面在加载完毕时，已经把很多登录后才需要的相关资源都预先加载进来了，所以登录用户得到确认后展示用户信息的速度很快。

 

2.除了返回唯一的uid，实际上打开这个页面的时候，浏览器跟服务器还创建了一个长连接，请求uid的扫描记录。如果没有，在特定时长后（目前是27秒左右）会接到状态码408（请求超时），表示应该继续下一次请求；如果接到状态码201（服务器创建新资源成功），表示客户端扫描了该二维码。

 

请求超时：返回408

 

扫码成功：返回201

 

长轮询代码结构：

Js代码  

1. function _poll(_asUUID) {  
2.   // ....  
3.   $.ajax({  
4.     type: "GET",  
5.     url: "https://login." + _sBaseHost + "/cgi-bin/mmwebwx-bin/login?uuid=" + _asUUID + "&tip=" + show_tip,  
6.     dataType: "script",  
7.     cache: false,  
8.     timeout: _nAjaxTimeout,  
9.     success: function(data, textStatus, jqXHR) {  
10.       switch (_aoWin.code) {  
11.       case 200:  
12.         // ....  
13.         break;  
14.       case 201:  
15.         // ....  
16.         break;  
17.       case 408:  
18.         // ....  
19.         break;  
20.       case 400:  
21.       case 500:  
22.         // ....  
23.         break;  
24.       }  
25.     },  
26.     error: function(jqXHR, textStatus, errorThrown) {  
27.         // ....  
28.     }  
29.   });  
30. }  

 

/** 长轮询知识介绍开始 */

Web 通信 之 长连接、长轮询（long polling）

基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。

一、什么是长连接、长轮询？

用通俗易懂的话来说，就是客户端不停的向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的，只是我们人眼无法分辨是否停止，它只是一种快速的停下然后又立即开始连接而已。

二、长连接、长轮询的应用场景

长连接、长轮询一般应用与WebIM、ChatRoom和一些需要及时交互的网站应用中。其真实案例有：WebQQ、Hi网页版、Facebook IM等。

如果你对服务器端的反向Ajax感兴趣，可以参考这篇文章 DWR 反向Ajax 服务器端推的方式：http://www.cnblogs.com/hoojo/category/276235.html

欢迎大家继续支持和关注我的博客：

http://hoojo.cnblogs.com