使用Reveal.js创建多用户演示

创建令人印象深刻的演示文稿是一门艺术。 长期以来，PowerPoint一直是创建演示文稿的事实上的工具。

现在，情况已经发生了变化，因为Web已成为所有企业的焦点，并且浏览器功能得到了极大的改善。 现在，现代浏览器能够像在任何其他本机应用程序中一样呈现3D图形和动画。

然后出现了一些基于HTML5和CSS3的很棒的演示库。 Reveal.js是一个非常受欢迎的库，用于创建精美的演示文稿。

Websockets是HTML5规范的一部分，它定义了一个新的标准，可以在浏览器中进行双向全双工通信。 有许多JavaScript库使使用Websockets更加容易，其中Socket.IO是其中的佼佼者。

在本文中，我们将讨论如何创建可以由多个用户控制的Reveal.js演示文稿。 我们将利用Socket.IO实时发送和接收幻灯片更改事件。 Reveal.js已经带有一个多路复用器插件，但是设置起来有点困难，因此我们暂时将其忽略。 让我们专注于如何编写适合我们目的的Socket.IO服务器。

先决条件

本文假定您已安装并且可以使用以下库：

• Node.js
• 约曼
• 咕unt声
• 凉亭

初步步骤

首先，我们将建立一个express.js服务器。 Yeoman借助生成器使安装和运行express.js服务器变得容易。 因此，我们将首先使用npm安装yeoman express-generator。

$ npm install –g generator-express

这将在全局范围内安装express-generator。 现在，我们来设置服务器。

$ yo express

这将询问您应该安装哪种类型的快递。 您可以选择基本或MVC。 在我们的情况下，我们仅需要基本设置。 然后它将安装一堆npm模块以及bower.json和Gruntfile.js文件。 有了唯一必要的文件，app目录将类似于：

├──Gruntfile.js
├──app.js
├──bower.json
├──node_modules
│├──快递
│├──咕unt
│├──grunt-contrib-watch
│├──发牢骚
│├──玉
│└──要求
├──package.json
├──公众
│├──零件
│├──CSS
│├──img
│└──js
└──意见

现在，让我们使用grunt启动快速服务器。

$ grunt
Running "develop:server" (develop) task
>> started application "app.js".

Running "watch" task
Express server listening on port 3000

Yeoman为我们创建了一个默认的app.js文件，其中包含运行服务器所需的设置。 另外，请注意，它带有“ watch”库，该库将跟踪代码中的更改并自动重新加载服务器，因此我们不需要手动进行操作。 在继续之前，我们将使用Bower安装和设置manifest.js库。 安装manifest.js非常简单明了。 只需在终端中发出以下命令。

$ bower install reveal.js --save

这将从Github获取最新稳定版本的reveal.js库，并将安装在public / components目录下。 --save选项会使用reveal.js自动更新bower.json文件的依赖项部分。

现在，我们拥有创建演示服务器所需的一切。 我们将从创建演示文稿的第一张幻灯片开始。 为此，在views文件夹内创建一个HTML文件。

    
        
        
        
        
        
    
    
        

            

                

                    
Revealer
                    
Reveal.js multiplexer
                
            
        
        
        
    

这是我们开始使用reveal.js所需的最基本的HTML。 在这里，我们包含了Reveal.js CSS和JavaScript文件。 Reveal.initialize()将使上面的HTML看起来很漂亮。 div中包含类slides任何部分都将充当幻灯片。

在开始演示之前，我们需要设置服务器以根据请求提供此文件。 因此，我们将使用下面给出的代码更新app.js。

var express = require('express')
  , http = require('http')
  , path = require('path')
  , app = express();

app.configure(function(){
  app.use(express.static(path.join(__dirname, 'public')));
});

app.get('/', function(req, res){
  res.sendfile(__dirname + '/views/index.html');
});

var server = http.createServer(app).listen(3000, function(){
  console.log("Express server listening on port 3000");
});

前几行要求服务器具有必要的依赖关系，然后创建一个express对象。 下一行将公用文件夹配置为静态目录，服务器将在该目录中查找对静态文件的请求。 然后，我们添加一条路径来服务index.html文件并启动服务器。

现在，我们可以使用http：// localhost：3000 / url在浏览器中查看演示。 但这不是我们真正需要的。 我们需要将该演示文稿多路复用，以便当一个用户更改幻灯片时，它应该反映在另一用户的浏览器上。

接下来，我们将安装并设置Socket.io模块，以使用Websockets启用双向通信。

$ npm install socket.io --save

安装完成后，我们准备在演示服务器中启用Websocket。 首先，通过在变量声明部分中添加以下行，在app.js文件中需要socket.io库。

var io = require(“socket.io”);

现在，我们需要将先前创建的快速服务器传递给socket.io，然后在连接新客户端时告诉服务器发送欢迎消息。

io.listen(server);
io.sockets.on('connection', function (socket) {
  socket.emit("message", "Welcome to Revealer");
});

连接客户端后，服务器可以响应客户端。 在上面的代码中，连接事件的回调函数将客户端的套接字作为参数，并将欢迎消息发送回客户端。

让我们继续将要连接到该服务器的客户端JavaScript。 首先，我们需要在HTML中包含socket.io客户端库。

接下来，我们将连接到我们创建的Websocket服务器。

var socket = io.connect("http://localhost:3000");
socket.on("message", function(data){
    console.log(data);
});

io.connect将使用给定的URL连接到服务器。 建立连接后，我们知道服务器将以欢迎消息响应，该消息已登录到控制台。

现在我们的客户端和服务器已经准备就绪，我们可以继续进行实际工作了。 演示者更改幻灯片时，应通知服务器更新所有其他客户端。

notifyServer = function(event){
    data = {
      indexv : Reveal.getIndices().v,
      indexh : Reveal.getIndices().h,
      indexf : Reveal.getIndices().f || 0
    }
    socket.emit("slidechanged" , data);
  }

  Reveal.addEventListener("slidechanged", notifyServer);

  Reveal.addEventListener("fragmentshown", notifyServer);

  Reveal.addEventListener("fragmenthidden", notifyServer);

发生幻灯片更改时，Reveal.js调度一个slidechanged事件。 对于幻灯片片段，它将创建fragmentshown或fragmenthidden事件。 我们在这里处理所有这些情况，当此类事件发生时，它将调用notifyServer回调函数。 在任何时间点， Reveal.getIndices()返回当前幻灯片位置-水平，垂直和片段索引。 调用notifyServer函数时，它将把幻灯片位置放入数据对象中。 然后，客户端将把slidechanged事件与创建的数据一起发送给服务器。

在服务器端，我们需要能够处理客户端发出的slidechanged事件，该事件应该更新所有连接的客户端。 为此，请在连接处理程序中添加以下代码。

socket.on("slidechanged", function(data){
   socket.broadcast.emit("slidechanged", data);
 });

socket.broadcast.emit会将数据发送到除发送方以外的所有客户端。 因此，在这里，当服务器收到slidechanged事件时，它将简单地将幻灯片数据转发给所有其他客户端。

客户端还应通过移至相应的幻灯片或片段来处理服务器转发的此已slidechanged事件。 为此，在客户端添加

socket.on('slidechanged', function (data) {
    Reveal.slide(data.indexh, data.indexv, data.indexf);
  });

Reveal.slide()接受三个参数，水平索引，垂直索引和片段索引，在fragmentshown或fragmenthidden Reveal.slide()事件的情况下它们将具有值。

增加安全性

现在，我们创建了一个简单的多用户Reveal.js演示文稿。 但这是一个严重的问题，因为任何用户都可以控制演示。 我们可以通过在服务器端代码中添加基本身份验证来克服此问题，并为未经身份验证的用户提供备用路由。

var masterUser = 'username'
      , masterPass = 'password';

// Authentication
var auth = express.basicAuth(masterUser, masterPass);

app.get('/', auth, function(req, res){
  res.sendfile(__dirname + '/views/master.html');
});

app.get('/client', function(req, res){
  res.sendfile(__dirname + '/views/client.html');
});

现在，当用户请求“ /”路由时，浏览器将要求提供身份验证凭据。 express.basicAuth创建一个基本的身份验证中间件，我们已将其传递到“ /”路由中。 如果登录成功，它将发送master.html。 其他用户可以使用“ / client”路由来查看演示，在该演示中我们不会将任何幻灯片更改事件发送到服务器。

现在，完整的代码将如下所示。

// server
var express = require('express')
  , http = require('http')
  , path = require('path')
  , ioServer = require('socket.io')
  , app = express()
  , masterUser = 'username'
  , masterPass = 'password';


app.configure(function(){
  app.use(express.static(path.join(__dirname, 'public')));
});

// Authentication
var auth = express.basicAuth(masterUser, masterPass);

app.get('/', auth, function(req, res){
  res.sendfile(__dirname + '/views/presentation.html');
});

app.get('/client', function(req, res){
  res.sendfile(__dirname + '/views/client.html');
});

var server = http.createServer(app).listen(3000, function(){
  console.log("Express server listening on port 3000");
});

var io = ioServer.listen(server);
io.sockets.on('connection', function (socket) {
  socket.emit("message", "Welcome to Revealer");
  socket.on("slidechanged", function(data){
    socket.broadcast.emit("slidechanged", data);
  });
});


//client
(function(){
  var host = 'http://localhost:3000',
    , socket = io.connect(host);
  Reveal.initialize({
    history: true
  });

  /** start - only in master.js **/
  notifyServer = function(event){
    data = {
      indexv : Reveal.getIndices().v,
      indexh : Reveal.getIndices().h,
      indexf : Reveal.getIndices().f || 0
    }
    socket.emit("slidechanged" , data);
  }
  // listeners for slide change/ fragment change events
  Reveal.addEventListener("slidechanged", notifyServer);
  Reveal.addEventListener("fragmentshown", notifyServer);
  Reveal.addEventListener("fragmenthidden", notifyServer);
  /** end - only in master.js **/

  // Move to corresponding slide/ frament on receiving 
  // slidechanged event from server
  socket.on('slidechanged', function (data) {
    Reveal.slide(data.indexh, data.indexv, data.indexf);
  });
  
})();

您可以在Github上找到所有源代码。

摘要

在本文中，我们看到了如何构建一个可以由多个用户控制的简单Reveal.js演示文稿。 在这里，我们使用Socket.IO库实时更新所有连接的客户端。 我们还添加了基本安全性，可防止未经授权的用户控制演示文稿。

您可以添加更多功能并使用WebRTC之类的技术来使其变得无处不在，所以希望您可以看到本文仅仅是开始。

From: https://www.sitepoint.com/create-multi-user-presentation-reveal-js/