Node.js + Socket.IOでリアルタイムスライドコントローラーを作ってみた

正確にはNodejs + express + Socket.IOを使って作った。
社内LTで発表してみて反応がよかったのでメモっておこう。そもそもNode.js勉強し始めたのもこういうソケット通信を実装してみたかったわけで

※まずは注意
Node.jsおよびnpmのパッケージはまだまだ開発中のようで内部仕様、APIの使用方法はブログとかのソースコードを参考してコピペしても動かない可能性がある。もちろんこの記事もそうだ。

スライドコントローラーとは？
LTとか何かスライドを使って発表するときにプロジェクターに映っているスライドを別の環境（webページ、ブラウザーなど）から次へ、前への操作をする。

考え方はこうだ（ブラウザー上のスライドの場合のみ）
Node.js + Socket.IOでリアルタイムスライドコントローラーを作ってみた

そうするとこんなこともできると考え
Node.js + Socket.IOでリアルタイムスライドコントローラーを作ってみた

パソコンからだけではなくスマートフォン端末からも操作できるように

本当はこういう構造、真ん中にサーバー通信している。
Node.js + Socket.IOでリアルタイムスライドコントローラーを作ってみた

サーバー側(app.js)

var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
server.listen(8000);
var io = require('socket.io').listen(server, {log:false});

io.on("connection", function(socket){
    //controllerから受け取ったとき
    socket.on("slide",function(data){
        //メッセージ送信元以外へ送る
        socket.broadcast.emit("receive", {slide:data});
    });
});

スライドはHTMLプレゼンツール「slippy」というjQueryプラグインを使ってるため簡単にjavascriptでスライドを操作できる。
slide.html

（略）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io-client/dist/socket.io.js"></script>
...
（略）
<script type="text/javascript">
$(function() {
    //slippyプラグイン実装
    var mySlide = $(".slide").slippy({
    });
    SyntaxHighlighter.all();

    // Socket.IO Serverに接続する
    var socket = io.connect('http://xxxx.oooo:8000');

    // 接続時のイベント
    socket.on("connect", function () {
    });

    //サーバーから受け取り
    socket.on("receive", function(data){
        //スライドの操作
        if (data.slide.type === "next") {
            //次へ
            mySlide.nextSlide();
        } else if (data.slide.type === "prev") {
            //前へ
            mySlide.prevSlide();
        }
    });
});
</script>
</head>
<body>
    <!-- slide1// -->
    <div class="slide">
        <div class="vcenter">
            <br />
            <h1 class="title">xxxxxxxxxxxxxxxxxxxxxx</h1>
        </div>
        <div style="clear:both;"></div>
    </div>
    <!-- //slide1 -->

    <!-- slide2// -->
    <div class="slide">
        ....
    </div>
    <!-- //slide2 -->

    <!-- slide3// -->
（略）

コントローラーからスライド操作する controller.html

（略）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io-client/dist/socket.io.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
    // Socket.IO Serverに接続する
    var socket = io.connect('http://xxxx.oooo:8000');
    socket.on("connect", function () {
    });

    //次への操作送信
    $('.goNext').click(function(){
        sendSlide({type:"next"});
    });

    //前への操作送信
    $('.goPrev').click(function(){
        sendSlide({type:"prev"});
    });
    
    function sendSlide(slide){
        socket.emit("slide", slide);
    }
});
</script>
<div>
    <input type="button" value="＜＜ prev " class="goPrev" />
    <br />
    <input type="button" value=" next ＞＞" class="goNext" />
</div>
</body>
（略）

とりあえず望んでいる動き通りには動いたが、実用化するにはまだまだ課題がある。
- たとえば、このままではスライドを誰でも操作できてしまう。セッションやユーザー別の判別を加えないといけない。セキュリティを考えながらね
- Webページのスライドだから作成フォーム用意して自由に作ってもらってslippyに合わせればいいけど、PDFファイルのスライドに対応するのは必須だなぁ
- Node.jsのパフォーマンスと負荷検証など全然やってない・・・・これも必須

Node.jsはいいとして、はずソケット通信のリアルタイムを使ってチャットなんかよりもっと出来ることがあるから何か面白いものを作れる。こういうサービスがもうすでにそこらへんに転がっているかもしれない。

以上