これは Node.jsハンズオン のためのサンプルコードですが、 はじめての共同作業 Canvas編 (node.js + websocket) をcoffeescriptで書きなおしたものです(感謝)
- Node
- Express
- now.js
ファイルはこのような感じで配置されます。public以下はjavascript,css,imageなんかの静的なファイルで、viewsはレンダリングに使われる テンプレートエンジンが配置されます。
.
├── app.coffee
├── app.js
├── node_modules
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ │ ├── client.coffee
│ │ └── client.js
│ └── stylesheets
│ └── style.css
├── routes
│ └── index.js
└── views
├── index.jade
└── layout.jade
npm install -g express npm install -g coffee-script npm install -g js2coffee
これで、expressコマンドが使えるようになるのでスケルトンを作成します。
express drawsample cd drawsample
package.jsonを編集してnow.jsを含めます(Windowsの場合は含めません、後述)。
{
"name": "application-name"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "2.5.8"
, "jade": ">= 0.0.1"
, "now": ">= 0.8.0"
}
}
依存モジュールをインストール
npm install .
Running NowJS natively on Windows を参考にしてVC++ランタイム とともにwin用バイナリを入れてください。それからsocket.ioは別途インストールする必要があります。
npme install socket.io
app.jsをapp.coffeeにします。javascriptでガリガリ書きたいヒトはこの項目をスキップしてください。
js2coffee app.js
now.js周りの設定だけです。 disgributeMessageという関数でmessageを受け取って全クライアントのreceiveMessageにブロードキャストするようなイメージです。
portの設定はheroku対策です。
app.get "/", routes.index
everyone = require("now").initialize(app)
everyone.now.distributeMessage = (message) ->
everyone.now.receiveMessage message
port = process.env.PORT or 3000
app.listen port, ->
console.log "Express server listening on port %d in %s mode",
app.address().port, app.settings.env
[email protected].0beta4の場合はapp.configureでportの設定をよろしくやってあるので、now.jsの設定だけ追加すればいいが、serverを渡さないといけないらしい。
app.get "/", routes.index
server = http.createServer(app).listen app.get("port"), ->
console.log "Express server listening on port " + app.get("port")
everyone = require("now").initialize(server)
everyone.now.distributeMessage = (message) ->
everyone.now.receiveMessage message
内容は省略しますが、canvasを操作するコードです。処理が知りたければ 直接聞いてください。時間があれば丁寧に説明します。
jqueryとstylesheetの読み込みをおこないます。 もしかすると/nowjs/now.jsはどこにあるんだ?と疑問に思うかもしれませんが、よろしくやってくれるようになっています。 (socket.ioも一緒だったような)
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
script(src='/javascripts/client.js')
script(src='/nowjs/now.js')
body!= body
[email protected].0beta4の場合はblockで設定してあるのであわせたけど別にどっちでもいい。
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
script(src='/javascripts/client.js')
script(src='/nowjs/now.js')
body
block content
scriptはpainterインスタンスを生成して、サーバーとの送受信をするコードです。サーバーからのメッセージを受け取る receiveMessageはここで定義しています。messageを受け取ったらpainterのdrawLineメソッドを呼び出して描画します。
canvas#layer0(width='900px', height='600px')
script
$(document).ready(function(){
var painter = new Painter('layer0');
now.receiveMessage = function(message){ painter.drawLine(JSON.parse(message)) };
});
[email protected].0beta4の場合
extends layout
block content
canvas#layer0(width='900px', height='600px')
script
$(document).ready(function(){
var painter = new Painter('layer0');
now.receiveMessage = function(message){
painter.drawLine(JSON.parse(message))
};
});
layer0用のスタイルを追加します。
#layer0 {
position: absolute;
top: 0px;
left: 0px;
border: 10px solid #dddddd;
}
coffee app.cofee # node app.js
ぱっと思いついたのはこんなあたり
- Now.jsのチャットのサンプルからアクセス時に名前入力するようにして誰が描いてるのかわかるようにする
- paper.jsを使ってリッチなお絵描きを目指す。 Draw
herokuにデプロイする時のために、ログを残しておきます。 参考にしてください。
heroku create --stack cedar git push heroku master heroku ps:scale web=1 heroku config:add NODE_ENV=production heroku run node heroku logs