印象的なプレゼンテーションを作成するのは芸術です.長い間、PowerPointはプレゼンテーションを作成するための実際のツールでした.
Webがすべての企業の焦点となり、ブラウザ機能が大幅に改善されたため、状況は変わりました.現在、現代のブラウザでは、他のネイティブアプリケーションと同様に3 Dグラフィックスとアニメーションを表示できます.
その後、HTML 5とCSS 3に基づく素晴らしいプレゼンテーションライブラリがいくつか登場しました.Reveal.jsは、美しいプレゼンテーションを作成するために非常に人気のあるライブラリです.
WebsocketsはHTML 5仕様の一部であり、ブラウザで双方向のフルデュプレクス通信が可能な新しい規格を定義しています.多くのJavaScriptライブラリによりWebsocketsの使用が容易になります.ここでSocket.IOはその中のトップです.
本稿では、複数のユーザによって制御可能なRevealを作成する方法について説明する.jsプレゼンテーション.Socket.を利用しますIOスライド変更イベントをリアルタイムで送受信する.Reveal.jsにはマルチプレクサプラグインが付いていますが、設定が少し難しいので、しばらく無視します.私たちの目的に合ったSocketをどのように書くかに集中しましょう.IOサーバ.
前提条件
この文書では、インストール済みで、次のライブラリを使用できると仮定します.

Node.js

ヨーマン

グーン音

あずまや

イニシャルステップ
まず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ライブラリ.インストールjsはとても簡単明瞭です.端末で以下のコマンドを発行するだけです.

$ bower install reveal.js --save

これはGithubから最新の安定バージョンのrevealを取得します.jsライブラリがpublic/componentsディレクトリにインストールされます.--saveのオプションはrevealを使用します.js自動更新bower.jsonファイルの依存項目セクション.
これで、プレゼンテーションサーバの作成に必要なすべてのものが作成されます.プレゼンテーションを作成する最初のスライドから始めます.このため、viewsフォルダ内にHTMLファイルを作成します.

    
        
        
        
        
        
    
    
        

            

                

                    
Revealer
                    
Reveal.js multiplexer
                
            
        
        
        
            Reveal.initialize({history: true});
        
    

これは私たちが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()は、3つのパラメータ、 インデックス、 インデックス、およびセグメントインデックスを け れ、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/