WebSocket简单使用(五) 模拟微信 连接键盘 功能

背景：

前几天老大突然发现微信有个链接键盘的功能，我仔细想了下或许是使用WebSocket来实现的，又加上最近HTML5的呼声愈来愈高，觉得有必要研究下HTML5了。

什么是”连接键盘“功能

”连接键盘“功能其实就是开通了网页版的微信，利用键盘可以快速录入文字聊天。

连接方法很简单，用手机打开微信点击右上角魔术棒，会弹出三个选项，只用选择连接键盘就可以了，这时用浏览器打开wx.qq.com然后用手机扫描网页中的二维码即可打开网页版微信，而这时也就可以直接利用电脑键盘实现快速聊天了。

下载Demo源码

真不愧是把妹利器，创意很有点意思。本文就来模拟下，其实有点类似远程控制，下载DEMO代码，解压后目录如下：

WebSocket-Server里项目含义如下：

• Mobile：手机模拟器，与手机通讯服务器进行UDP通讯，负责提示打开的页面地址，并输入GUID(相当于二维码)与页面进行绑定；
• MobileServer：手机通讯服务器，负责接收手机信息(比如微信的账户信息以及二维码信息)，此处接收GUID。并转发至WebSocket通讯服务器；
• WebSocket：WebSocket通讯服务器，与手机通讯服务器和页面的WebSocket进行通讯；

WebSocket-Client里项目含义如下：

• test.html：测试的web页面(类似微信的wx.qq.com)；
• jquery-1.8.0.min.js：jquery框架；

实现原理

页面test.html生成GUID并存储在WebSocket，手机模拟器输入GUID并传至WebSocket服务器，在WebSocket服务器检索页面Socket信息并通讯。

运行DEMO步骤

1. 使用IIS本地部署WebSocket-Client站点，端口为8075；
2. 启动手机通讯服务器、WebSocket通讯服务器；
3. 启动手机模拟器，按提示使用Google Chorme打开地址：http://localhost:8075/test.html；
4. 打开上一步骤页面地址，页面地址会生成GUID，并通过WebSocket传至WebSocket通讯服务器存储；
5. 在手机模拟器属于该GUID，手机模拟器依次传入手机通讯服务器、WebSocket通讯服务器，在WebSocket通讯服务器中根据GUID检索WebSocket信息并发送信息至页面；
6. 页面接收到信息，此处只传了GUID，把GUID当做get参数传递，演示OVER；

注意事项

1. 如果自己测试请根据上述步骤先启动手机通讯服务器和WebSocket通讯服务器；
2. 把所有是“10.9.146.31”的字符串更换为自己的IP；