$ curl -L git.io/nodebrew | perl - setupwrite this in your bashrc or zshrc.
export PATH=$HOME/.nodebrew/current/bin:$PATH$ source ~/.bashrc // or zshrc$ nodebrew help$ nodebrew install-binary stable
$ nodebrew use stableyoとbowerとgruntをインストールしましょう。
$ npm install yo bower grunt-cli -gプロジェクトを作るので、あたらしいフォルダを作成しましょう。
$ mkdir hello_jscafe
$ cd hello_jscafe$ yoInstall a generatorを選びましょう。
Search NPM for generatorsのところに"tmlib"と入れましょう。
そしたら Run the Tmlib generatorを実行しましょう。
以下のように回答します。
This is a generator for tmlib. tmlib can make javascript easy!
[?] What is your github name?: yosuke-furukawa
[?] What is your applicaiton name?: My Apps
[?] What version?: 0.0.0
[?] Description about your app:
[?] What is your favorite template engine? [jade, ejs, swig, hogan]: jade
[?] Use Heroku? [Y/n]: (n) Y終わったら、以下のコマンドを実行しましょう。
$ gruntgruntでサーバー起動しない場合：
$ ls
// lsした時にbower_componentsフォルダがある場合は名前変更してください。
$ mv bower_components componentsしてから
$ gruntでOKのはず。。
http://localhost:3000/ にアクセスしてください。
- とりあえず、ボタンを追加してみましょう。
- ボタンをサーバーから渡した値を入れてみましょう。
- イベントの流れを理解しよう。 ++ 新しいイベント("jscafe")を作ってブロードキャストしてみよう。 ++ socket.broadcast.emitからio.sockets.emitに変えてどう違うか確認しよう。
- ひよこを出して、喋らしてみよう。
main.jsをこう変える。
public/javascript/main.js
;(function(global) {
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT = 465;
var SCREEN_CENTER_X = SCREEN_WIDTH/2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;
var COLOR_LIST = [
"#1abc9c",
"#2ecc71",
"#3498db",
"#9b59b6",
"#e74c3c",
"#f1c40f",
];
var ASSETS = {
"hiyocos": "http://jsrun.it/assets/m/Z/K/1/mZK1Y.png",
};
var socket = null;
var my_hiyoco = null;
tm.main(function() {
var app = tm.app.CanvasApp("#world");
app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
app.background = "hsla(220, 80%, 98%, 1)";
var loading = tm.app.LoadingScene({
assets : ASSETS,
nextScene: MainScene,
});
app.replaceScene(loading);
app.run();
setupUI();
});
var setupUI = function() {
var inputText = tm.dom.Element("#inputText");
var sendBtn = tm.dom.Element("#sendBtn");
var colorPicker= tm.dom.Element("#colorPicker");
var buttonList = tm.dom.ElementList("#buttonList button");
inputText.event.add("keydown", function(e) {
if (e.keyCode == 13) {
sendComment(inputText.value, colorPicker.value);
}
});
sendBtn.event.click(function() {
sendComment(inputText.value, colorPicker.value);
});
colorPicker.value = COLOR_LIST.pickup();
buttonList.each(function(elm) {
elm.event.click(function() {
var value = elm.attr.get("data-value");
if (!value) value = elm.text;
sendComment(value, colorPicker.value);
})
});
};
var sendComment = function(text, color) {
socket.emit("comment", {
text: text,
color: color,
x: my_hiyoco.position.x || 0,
y: my_hiyoco.position.y || 0
});
};
tm.define("MainScene", {
superClass: "tm.app.Scene",
init: function() {
this.superInit();
socket = io.connect(location.origin);
var self = this;
this.ss = tm.asset.SpriteSheet({
"image": "hiyocos",
"frame": {
"width": 32,
"height": 32,
"count": 64
},
"animations": {
"walk": {
frames: [1, 2, 3, 2],
next: "walk",
frequency: 4,
},
"appear": {
frames: [20, 21, 22, 23, 24],
next: "walk",
frequency: 4,
}
}
});
socket.once("connect", function() {
console.log("connect");
var x = Math.rand(0, SCREEN_WIDTH - 100);
var y = Math.rand(0, SCREEN_HEIGHT-100);
self.appear({x: x, y: y}, true);
socket.emit("appear", {x: x, y: y});
});
socket.on("comment", function(e) {
self.comment(e, e.x, e.y - 30);
});
socket.on("appear hiyoco", function(hiyocos) {
console.log(hiyocos);
console.log(hiyocos.keys);
Object.keys(hiyocos).forEach(function(id) {
if (id) self.appear(hiyocos[id]);
});
});
socket.on("appear", function(h) {
if (h) self.appear(h);
});
socket.on("disappear", function(h) {
});
this.comment({
text: "コメントしてね♪",
color: "black",
});
},
update: function(app) {
},
appear: function(pos, mine) {
var hiyocos = tm.app.AnimationSprite(this.ss, 64, 64);
hiyocos.position.set(pos.x, pos.y);
if (mine) my_hiyoco = hiyocos;
console.log("appear");
console.log(hiyocos.position);
hiyocos.gotoAndPlay("appear");
this.addChild(hiyocos);
hiyocos.setInteractive(true);
},
comment: function(data, x, y) {
var self = this;
var label = null;
label = DownUpCommentLabel(data, x, y);
this.addChild(label);
},
});
tm.define("CommentLabel", {
superClass: "tm.app.Label",
init: function(param) {
this.superInit();
this.text = param.text;
this.fillStyle = param.color;
this.shadowBlur = 2;
this.shadowColor = "#222";
},
});
tm.define("DownUpCommentLabel", {
superClass: "CommentLabel",
init: function(param, x, y) {
this.superInit(param);
var self = this;
this.align = "center";
this.x = x;
this.y = y;
this.tweener.move(x, y, 2000).call(function() {
self.remove();
});
},
});
})(this);lib/socket.io-server.js
module.exports = function(server){
var transports = ["xhr-polling"];
var hiyocos = {};
var id = 0;
var io = require('socket.io').listen(server, { transports: transports});
io.sockets.on('connection', function(socket) {
id++;
socket.emit('appear hiyoco', hiyocos);
socket.on('comment', function(data) {
// send to me
socket.emit('comment', data);
// broadcast without me
socket.broadcast.emit('comment', data);
});
socket.on('appear', function(data) {
console.log(data);
if (!data) return;
hiyocos[id] = data;
socket.hiyoco_id = id;
socket.broadcast.emit('appear', data);
});
socket.on('disconnect', function() {
console.log(socket.hiyoco_id);
delete hiyocos[socket.hiyoco_id];
});
});
};