はじめての共同作業 Canvas編 (node.js + websocket)
こんにちは、中川です。
先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。
ということで、結婚といえば共同作業ですよね。
今までは、一人で作業していて大変なことが色々あったと思いますが、
二人(複数)でやれば、乗り越えられることもあることでしょう。
Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。
そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、
一緒にお絵描きができるサンプルアプリを作ってみました。
■■■概要■■■
・アプリ概要
・・Canvas + WebSocket
・対応ブラウザ
・・Chrome or Safari (他、WebSocketが使えるブラウザ)
・サーバ側プログラム
・・node.js 0.2.0
・・express@1.0.0rc2
・・websocket-server@1.3.50
※express, websocket-server は node.js のパッケージ管理システムの npm ( http://github.com/isaacs/npm ) でインストールしました。
node.js用のwebsocketサーバは何個かあるみたいですが
( 参照: http://github.com/ry/node/wiki/modules )、
今回は、比較的更新もされていて、手軽に利用できそうな node-websocket-server を使ってみました。
■■■アプリ構成■■■
.
`-- canvas-share
|-- public
| |-- index.html
| `-- js
| `-- client.js
`-- server.js
プログラム一式ダウンロード:canvas-share.tar.gz
■■■プログラム内容■■■
・index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Share Demo</title>
</head>
<body>
<canvas id="layer0" class="canvas" style="position: absolute; top: 0; left: 0; border: 10px solid #dddddd;" width="900px" height="600px"></canvas>
<input type="button" id="clear" value="Clear" style="position:absolute;" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/js/client.js?t=1149"></script>
<script type="text/javascript">
$(function(){
var painter = new Painter('layer0');
// WebSocket対応の場合は、コネクションを設定
if (window["WebSocket"]) {
var conn = new WebSocket("ws://" + document.location.host + "/");
painter.setConnection(conn);
} else {
alert('This browser is not supported.');
}
$('#clear').click(function() {
painter.clear();
});
});
</script>
</body>
</html>
・js/client.js
※通信部分関連のみ抜粋
/**
* マウス移動時の処理
*/
Painter.prototype.move = function(event) {
if (!this.isDrawing) {
return;
}
var points = {
bx: this.beforeX,
by: this.beforeY,
ax: event.clientX - 10,
ay: event.clientY - 10,
c: this.strokeStyle
};
if (this.conn) {
// 各座標をjson形式でサーバに通知