サンプルを試す。
server.js
var fs = require("fs"); var http = require("http"); var server = http.createServer(); var io = require("socket.io").listen(server); server.on("request",function(req,res){ fs.readFile("client.html",function(err,data){ if(err){ res.writeHead(500); return res.end("Error loading client.html"); } res.writeHead(200, {"Content-Type":"text/html;charset=UTF-8"}); res.end(data); }); }); server.listen(8080); io.sockets.on("connection",function(socket){ socket.emit("greeting",{message: "hello, "},function(data){ console.log("result: "+data); }); });
client.html
<html> <head> <title>sample</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></\ script> <script> $(function() { var socket = io.connect(); socket.on("greeting",function(data,fn){ var answer = confirm(data.message); fn(answer); }); }); </script> </head> <body> <h1>Socket.IO connection test</h1> </body> </html>
動作は以下。
- クライアントlocalhost:8080にアクセスする
- クライアントHTMLのヘッダ内JavaScriptのio.connectが呼ばれる
- サーバ内でconnectionイベントが発生。connectionイベントハンドラが呼ばれる
- server.jsでのコールバックsocket.emit()が返る
- socket.emitの引数はsocket.emit('event',[data],[fn])である。今回はdata(ペイロード)として{message:'hello'}というJSONが送信される
- socketのイベントハンドラsocket.on('greeting',-)がこのdataを受信する。greetingはフィルター(ラベル)だと思えば良い。
- socket.on('greeting',*)のコールバックはconfirm(ダイアログ)を返す
- ダイアログのOK、キャンセルがコールバックのデータとなってserverに送信される
- サーバーはこのデータ(True/False)を受信してコンソールに表示する
さて、これを改造して任意のイベントが発火したらクライアントを更新するような
プログラムを書いてみる。
setInterval()を使って、1秒毎に乱数を表示するプログラムに変更してみた。
server.js
var fs = require("fs"); var http = require("http"); var server = http.createServer(); var io = require("socket.io").listen(server); server.on("request",function(req,res){ fs.readFile("client.html",function(err,data){ if(err){ res.writeHead(500); return res.end("Error loading client.html"); } res.writeHead(200, {"Content-Type":"text/html;charset=UTF-8"}); res.end(data); }); }); server.listen(8080); io.sockets.on("connection",function(socket){ setInterval(function(){ socket.volatile.emit("event",{message: "hello, "+Math.random()},function(data){ console.log("result: "+data); }); },1000); });
client.html
<html> <head> <title>sample</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></\ script> <script> $(function() { var socket = io.connect(); socket.on("event",function(data,fn){ $("#msg").text(data.message); }); }); </script> </head> <body> <h1>Socket.IO connection test</h1> <p><b>Received message: </b></p> <div id="msg"></div> </body> </html>