Node.jsでトータライザみたいなものをつくってみる

つい先日、社内勉強会でjsの話をしたのですが、そのときにjsついでということで"Node.jsでトータライザみたいなもの"をつくった。つくったけれどもあまりうまくいかなかったので（ウケもいまいち 汗）、戒めついでにメモとして残しておこう。

トータライザってテレビでよくみかける、「○○だと思う人はスイッチオン」みたいなやつのことで、今回つくろうとしたのは、発表内容の各項目に対して「すでに知っていた」「なんとなく知っていた」「全く知らなかった」みたいな３段階の評価をみんなにしてもらい、その結果をwebsocketでリアルタイムに表示するというもの。ダサいですがこんな画面。

jsに対する社内の認識がどれくらいあるかというのが結構謎だったのでやってみたかったんですよね。
まあNode.jsでwebsocketやりたかっただけですがw。

ソースについてはnodejsの付け焼き刃もいいところなので、こんな簡単なソースでしか書いていません。若干省略しているところも有り。

main.html

<button onclick="javascript:sendMessage(1);">わかった！</button>
<p id="counter_1">0</p>
<button onclick="javascript:sendMessage(2);">ビミョー</button>
<p id="counter_2">0</p>
<button onclick="javascript:sendMessage(3);">ダメだこりゃ</button>
<p id="counter_3">0</p>
<button onclick="javascript:resetMessage();">リセット</button>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>

 var s = io.connect('http://www.xxx.yyyy/');

/**
 * 接続時
 */
s.on("connect", function () {
  console.log("connection");
});

/**
 * 切断時
 */
s.on("disconnect", function (client) {
  console.log("disconnection");
});

/**
 * 更新受信時
 */
s.on("S_to_C_message", function (data) {
  for(var i = 0; i < data.value.length; i++){
    var sel = jQuery("#counter_" + (i + 1));
    var count = parseInt(sel.text());
    count++;
    jQuery("#counter_" + (i + 1)).text(data.value[i]);
  }
});

/**
 * リセット受信時
 */
s.on("S_to_C_reset", function (data) {
  for(var i = 0; i < data.value.length; i++){
    var sel = jQuery("#counter_" + (i + 1));
    var count = parseInt(sel.text());
    count++;
    jQuery("#counter_" + (i + 1)).text(data.value[i]);
  }
});

/**
 * 更新送信
 */
function sendMessage(index) {
  s.emit("C_to_S_message", {value:index});
}

/**
 * リセット送信
 */
function resetMessage(){
  s.emit("C_to_S_reset");
}

</script>

server.js

var http = require("http");
var socketio = require("socket.io");
var fs = require("fs");
 
var server = http.createServer(function(req, res) {
     res.writeHead(200, {"Content-Type":"text/html"});
     var output = fs.readFileSync("./main.html", "utf-8");
     res.end(output);
}).listen(8080);
 
var io = socketio.listen(server);

var userIndex = 0;

var countList = [0, 0, 0];
 
io.sockets.on("connection", function (socket) {
 
  socket.on("C_to_S_message", function (data) {
    countList[data.value - 1]++;
    io.sockets.emit("S_to_C_message", {value:countList});
  });

  socket.on("C_to_S_reset", function (data) {
      countList = [0, 0, 0];
      io.sockets.emit("S_to_C_reset", {value:countList});
  });

});

で、なにがうまくいかなかったというと、

• なんか反応が遅いときがある（致命的、原因はこれから調べる）
• デザインがわかりづらい、やるならもっとわかりやすくインパクトあるものがよかった（たとえば更新するときにちょっとしたエフェクトいれるとか）
• キーノート＋ブラウザってのがダメだったかも、ブラウザで発表資料つくろうかな（参考サイト）

トータライザつくろうと思ったというか簡単につくれるんだろうなと思わせてくれたのが、実は半年ほど前の勉強会で@Shumpeiさんがnodeでプレゼンの資料を表示しながら「いいね」の表示をwebsocketでリアルタイムに表示されるなんていうことをやっていたものです。

やっぱ勉強会に参加すると意外なところで刺激うけたりすることがあるからいいですよね。

次回発表するときはリベンジするぞー！