原文: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,当丢包或许一定间隔之后,重新向服务器发送数据。

socket.io,远程控制你的幻灯片的更多相关文章

  1. Socket.IO学习之基础入门

    原文:http://blog.csdn.net/weichuang_1/article/details/48831957 这里贴出Socket.IO官网 一.Socket.IO的介绍 Socket.I ...

  2. 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  3. Node学习笔记(三):基于socket.io web版你画我猜(二)

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  4. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

  5. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  6. socket.io简单入门(一.实现简单的图表推送)

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  7. websocket与socket.io

    什么是Websocket? Websocket是一个独立于http的实时通信协议,最初是在HTML5中被引用进来的,在HTML5规范中作为浏览器与服务器的核心通信技术被嵌入到浏览器中.WebSocke ...

  8. socket.io安装部署

    需要node.js环境 创建package.json npm init 下载相关依赖 npm install --save express@4.10.2npm会在当前目录下载所需要的依赖到node_m ...

  9. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

随机推荐

  1. iOS-数据持久化-属性列表

    属性列表 属性列表文件是一种XML文件,Foundation框架中的数组和字典等都可以于属性列表文件相互转换. NSArray类常用读写属性列表文件的方法: +arrayWithContentsOfF ...

  2. Jquery 选择器 详解

    在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools.net/ 一.基本选择器 $( ...

  3. Unity3D 为什么保存Transform等引用效率会更高

    正常来说,大部分同学一般get transform都直接gameobject.transform使用.但往往,你会发现有些人会将transform引用保存起来,例如:   private Transf ...

  4. OpenCascade Ray Tracing Rendering

    OpenCascade Ray Tracing Rendering eryar@163.com 摘要Abstract:OpenCascade6.7.0中引入了光线跟踪算法的实现.使用光线跟踪算法可实现 ...

  5. 移动web开发之视口viewport

    × 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...

  6. Cwinux源码解析(四)

    我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. Cwinux源码解析(四)

  7. VS2010项目缺少组件

    遇到的问题是解决方案中部分项目无法加载, 提示需要缺少的web组件才能加载该项目,是否通过WEB安装组件来网络安装, 点击确定以后就什么也没有了. 网上查阅了一番,结合自己的使用情况(在家里用的是vs ...

  8. Chrome 控制台指南

    转自:http://blog.jobbole.com/76985/ Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更 ...

  9. [译]对 AngularJS 模板的A/B测试

    编者按:本文翻译自 Andrei Bondarev 在 Medium 上发布的"A/B Testing your AngularJS Templates ",Andrei 是一名工 ...

  10. Mybatis之Oracle增删查改示例--转

    http://blog.csdn.net/bingjie1217/article/details/21088431?utm_source=tuicool&utm_medium=referral ...