作者:bankie
 

  工业时代生产了五花八门的电器,颠覆了人们的日常生活方式。随之而来的是五花八门的遥控器。相信每个人都有找遥控器的经历,每个人都有用错遥控器的经历,每个人都有拿着遥控器不会用的经历。


  数字时代带着形形色色的数码产品来了,再一次颠覆了人们的日常生活方式。这个时代最优秀的硬件,叫鼠标。但不是所有的数码产品都可以用同一个鼠标控制。设想一下,以后所有的数码设备,都可以用手机——这个每天你都会装在裤兜里的鼠标,来控制,爽不爽?


  这次项目我们前端同学使用JS和flash通过手机和PC端互相通信,并互相监听状态,从而达到手机做为一个智能遥控器来控制PC的效果。


  先简单介绍一下我们这个活动的交互过程:

  其次跟随我们进入项目界面。PC页面引导手机扫描二维码:
 

 
  用户扫描登陆后,手机就可以显示操控页面:
 

 
  提示用户看电脑:
 

 

 
  由于版面空间问题,详细神奇体验请猛戳活动页面

  完成这些功能效果需要前台密切配合完成,下面我们从技术角度分析、分享实现方式。首先从前端入手,流程如下:用户通过flash从本地或用户空间相册拉取一张图片与模板图片合成一张图片后上传到空间。

  流程图:
 

 

  前端完成所有图片处理过程,flash完成图片与图片模板合成,通过JS脚本上传获得合成上传后的图片。PC获得PICURL后进入双屏交互阶段。


  进入PC与phone交互阶。


  为了达到手机实时摇控PC的效果,PC通过以下几步:


1,使用JS工具生成phone端url


2,生成用户唯一标识k(为了标示PC和phone为同一用户),生成有url和k及二维码


3,PC启动监听,通过ajax轮询监听手机的发射命令


4,PC根据命令字发出行为指令


5,phone监听PC的动作执行命令,触发下一阶段行为


6,PC动画上传图片,phone模拟传递文件过程


7,完成交互过程


  指令监听如下:

  分开来看,前端技术现实原理,当用户打开phone页面时会发送信号到server端,PC开始监听phone状态,phone端发送命令信号到server,当PC监听行为动作后执行相应动作。完成后发送完成状态到server,phone监听到完成信号后进行后续处理过程。


  服务器端需要保存命令信号,而也是唯一信号,PC和phone使用相同命令源,神十项目使用cache保存、命令字。


  后台实现原理,为了配合好双屏交互效果,后台缓存命令字,不需持久化,先期项目使用cookie/session记录命令字,但是遇到跨域问题无法解决,进而采用memcache进行缓存。遇到的其他说明:在chrome下直接后台设置header为:

  前台JS不需要跨域脚本支持即可。注意:上边代码为“*” 不安全,最好设置为需要跨域URL,但是兼容IE等浏览器时,就要需要前台跨域脚本的支持(JSONP),为什么IE不可能直接使用ajax的问题至今也没找到原因。


  后台存储用户唯一k值,以k为关键字,命令字和其他信息为值一个序列,当监听接口时,返回序列中的命令字,(这个地方遇到特殊处理命令字,返回是其他信息)PC和phone也是根据k值监听到命令字。整个过程用同一个接口完成,既:无论PC还是phone同监听同一个接口,返回命令字也是同一个,只是各自执行自己命令字行为。这个需要PC和phone约定命令字。


  前端技术优化点:


  优化PC端监听1000次用户无动作既停止监听。同理用户操作会重新起动监听。