socket.io,远程控制你的幻灯片
原文:http://www.cnblogs.com/xiezhengcai/p/3964455.html
中秋休息了几天,今天又开始捣鼓socket.io了。今天的任务是通过socket.io控制你的Reveal幻灯片
工具&原料:socket.io nodejs Reveal.js
Reveal.js 是使用html5和css3实现的通过浏览器播放的幻灯片工具,不熟悉的请go http://lab.hakim.se/reveal-js/
完成今天的任务我们得知道几个方法:
滚动右边的显示页
Reveal.right();
滚动左边的显示页
Reveal.left();
滚动上边的显示页
Reveal.up();
滚动下边的显示页
Reveal.down();
前一页
Reveal.prev();
后一页
Reveal.next();
思路:pc页面与移动设备页面均通过socket连接到node,用户点击移动设备上的 前进后退 按钮, 设备向node发送相应的信息,node通过socket将信息转发给pc页面,页面根据该信息做出幻灯片的切换。
node端核心代码
var Server = require('socket.io'); var io = new Server(5555); io.on('connection', function (socket) { socket.emit('msg',{data:'connection'}); socket.on('msg', function (data) { if(data.directive =="phone"){ if (typeof pcSocket != 'undefined') { pcSocket.emit(data); } }else if(data.directive == "pc"){ pcSocket = socket; } }); });
上述代码将pc端的socket保存在pcSocket变量里,如果接收到一个移动设备发来的信息(data.directive == "phone"),则将该信息转发给pcSocket。
pc端的代码
var socket = io("ws://103.31.201.154:5555"); socket.on('msg',function(data){ if(data.data == 'connection') { socket.emit('msg', {directive:"pc"}); } else { console.log(data); Reveal.right(); } });
当连接上node服务器之后,pc端会给服务器发送一条指令,告诉服务器该连接是pc端的连接,当收到其它信息之后,直接切换幻灯片(可根据收到的信息选择切换的页面),
移动端的代码
var socket = io("ws://103.31.201.154:5555"); socket.on('msg',function(data){ if(data.data = 'connection') { socket.emit('msg', {directive:"phone"}); $().ready(function(){ $("#top").click(function(){ socket.emit('msg', {directive:"top"}); }); $("#bottom").click(function(){ socket.emit('msg', {directive:"bottom"}); }); $("#left").click(function(){ socket.emit('msg', {directive:"left"}); }); $("#right").click(function(){ socket.emit('msg', {directive:"right"}); }); }); } });
移动端根据用户点击的按钮,向服务器发送相应的信息,
以上基本实现了移动设备控制幻灯片的播放效果,当然如果要做成产品化,那代码需要规划并考虑别的一些边缘情况。另外有一点,在实际测试中,出现了丢包现象。所以可能需要向服务器发送每一次请求的唯一id,当丢包或许一定间隔之后,重新向服务器发送数据。
posted on 2014-09-10 15:04 xiezhengcai 阅读(2611) 评论(1) 编辑 收藏 举报