WebSocketを弄ってみたくなったので。 その２

備忘録 プログラム WebSocket
  • 環境

node.js
express+ejs+socket.io

  • 参考URL

node.jsでchatアプリっぽいもの作るメモ
こちらを見てやってましたが、socket.ioのVersionが上がったことで結構変わってました。
更に参考として
Socket.IO v0.7 の新機能解説
こちらで違いが結構書かれています。

  • 変更点

socket.ioのメソッドやプロパティが結構変わってます。
サンプル上ですと

socket.on('connection', function(client) {

とありますが、

socket.sockets.on('connection', function(client) {

となります。


また、client.sessionIdの受け取りは

client.id

となります。

とりあえず他のメソッドもプロパティも変わっていたので、

for (var method in client) {
    console.log(method);
}

で見てみると、

id
namespace
manager
disconnected
ackPackets
acks
flags
readable
store
_events
handshake
log
json
volatile
broadcast
in
to
setFlags
onDisconnect
join
leave
packet
dispatch
set
get
has
del
disconnect
send
$emit
emit
setMaxListeners
addListener
on
once
removeListener
removeAllListeners
listeners

とのこと。ちょいちょい違うみたいです。

とりあえず簡単なチャットを作ってみました。
ソースは以下の通り。

    • サーバ側
      • app.js
var express = require('express');
var ejs     = require('ejs');
var io      = require('socket.io');
var port    = 3000;
var app     = express.createServer();

// Static File
app.configure(function(){
    app.use(express.static(__dirname + '/public'));
});

// Template Engine
app.set('view engine', 'ejs');
app.set('view options', { layout: false });

// Output
app.get('/', function(req, res) {
    console.log('/');
    res.render('index', { locals: { port: port } });
});

// port Listen
app.listen(port);

// Socket
var listen = io.listen(app);
listen.sockets.on("connection", function(client) {
    // system
    client.on("join", function(recv) {
        client.set("name", recv.name, function() {
	    console.log(recv.name + " connected.");
	    var data = {
		"name" : recv.name, 
		"do"   : "join", 
		"time" : new Date().toString()
	    };
	    client.emit("system", data);
	    client.broadcast.emit("system", data);
	});
    });

    // post
    client.on("post", function(msg) {
	client.get("name", function(err, name) {
	    var data = {
		"name" : name, 
		"post" : msg, 
		"time" : new Date().toString()
	    };
	    client.emit("post", data);
	    client.broadcast.emit("post", data);
	});
    });

    // disconnect
    client.on('disconnect', function() {
	client.get("name", function(err, name) {
	    console.log(name + " disconnected.");
	    client.broadcast.emit("system", {
		"name" : name, 
		"do"   : "leave", 
		"time" : new Date().toString()
	    });
	});
    });
});

// Debug
console.log('Server running at http://127.0.0.1:' + port + '/');
    • クライアント側
      • client.js
$(function() {
    // name
    var name = window.prompt("plz your name!");

    // connect
    var socket = new io.connect("http://127.0.0.1:3000");
    socket.on('connect', function() {
	socket.emit("join", {"name" : name});
    });
    
    // system
    socket.on("system", function(data) {
	appendMessage("system", ">>> " + data.name + " " + data.do, data.time);
    });

    // post
    socket.on("post", function(data) {
	appendMessage(data.name, data.post, data.time);
    });

    // disconnect
    socket.on("disconnect", function() {
	appendMessage("system", ">>> " + name + " disconnected", "");
    });

    // submit
    $("#form").submit(function() {
        socket.emit("post", $("#message").val());
        $("#message").val("");
        return false;
    });

    appendMessage = function(name, post, time) {
	$("#chat").prepend("<dt>" + time + "</dt><dd>" + name + ":" + post + "</dd>");	
    }
});
      • index.ejs
<html>
  <head>
    <title>chat</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.4.4");</script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/js/client.js"></script>
  </head>
  <body>
    <form action="" id="form">
      <input type="text" name="message" id="message" />
      <input type="submit" />
    </form>
    <hr />
    <dl id="chat"></dl>
  </body>
</html>
  • うごいたよ！


メソッド変更周りでかなり手こずりましたが、
それ以外はすんなり動いてくれました。

とりあえずnode.jsでは一通り動いたので
次はPHPかPythonで試してみようかな。

  • 追記

一応githubに上げておきました。
初めて使ったのでゴミファイル消した履歴はご愛嬌ということで…
https://github.com/milktea-cg7/node