Skip to content

Instantly share code, notes, and snippets.

@chiral

chiral/Main.js

Created February 10, 2013 10:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chiral/4749031 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chiral/4749031 to your computer and use it in GitHub Desktop.
Download ZIP
node.js + express + socket.io : drawing chat example
Raw
app.js
var express = require('express')
, routes = require('./routes')
, info = require('./routes/info')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 22222);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
app.get('/info', info.index);
app.get('/users', user.list);
server = http.createServer(app);
var _circles=new Array();
function on_msg(msg) {
var m2 = msg.split(' ');
if (m2.length>1) {
var cmd = m2[1];
if (cmd == 'add') {
var name = m2[2];
var json = m2[3];
_circles[name]=json;
}
if (cmd == 'remove') {
var name = m2[2];
delete _circles[name];
}
}
}
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket) {
socket.on('msg send', function(msg){
socket.broadcast.emit('msg push', msg);
on_msg(msg);
});
socket.on('disconnect', function() {
socket.broadcast.emit('msg push', 'disconnect');
});
socket.broadcast.emit('msg push', 'connect');
for (var name in _circles) {
var json = _circles[name];
socket.emit('msg push','welcome add '+name+' '+json);
}
});
server.listen(app.get('port'));
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style> *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
<script src="http://labs.adfive.net:22222/socket.io/socket.io.js"></script>
<script src="javascripts/Main.js"></script>
</head>
<body onload="init()">
<canvas id="my-canvas" width="480" height="320"></canvas>
<p id="clist">
</p>
</body>
</html>
Raw
info.js
var t=require('./md5')
var _user_sid = 0;
exports.index = function(req, res){
var ip1 = req.connection.remoteAddress;
var ip = ip1.split('.');
_user_sid++;
var sid = _user_sid;
res.writeHead(200, {'Content-Type': 'application/json'});
//res.write(JSON.stringify({ip:ip1,port:port,sid:sid,a:ip[0],r:ip[1],g:ip[2],b:ip[3]}));
var port = req.connection.remotePort;
var md5 = t.hex_md5(ip1+port);
var r = parseInt(md5.substring(0,1),16);
var g = parseInt(md5.substring(2,3),16);
var b = parseInt(md5.substring(4,5),16);
res.write(JSON.stringify({ip:ip1,port:port,sid:sid,a:0,r:r*8,g:g*8,b:b*8}));
res.end();
};
Raw
Main.js
var _stage = null;
var _width = 640;
var _height = 480;
var _ip = "";
var _port = 0;
var _sid = 0;
var _r = 240;
var _g = 240;
var _b = 240;
var _a = 0;
var _counter = 0;
var socket;
var _circles=new Array();
function init() {
socket = io.connect("http://labs.adfive.net:22222/");
var canvas = document.getElementById("my-canvas");
_stage = new Stage(canvas);
var bgrect = createRect(_width,_height);
_stage.addChild(bgrect);
_stage.update();
bgrect.onClick = function(e) {
_counter++;
var name = _sid + ':' + _counter;
var json = {x:e.stageX,y:e.stageY,r:_r,g:_g,b:_b,a:_a};
var c = createCircle(name,json);
socket.emit('msg send', "from="+_ip+" add "+name+" "+JSON.stringify(json));
}
$.getJSON("/info", function(json) {
_a = json.a;
_r = json.r;
_g = json.g;
_b = json.b;
_ip = json.ip;
_port = json.port;
_sid = json.sid;
var msg = "your id="+json.sid+", ip="+json.ip+", port="+json.port;
alert(msg);
$("#clist").append("["+json.sid+"] "+msg+"<br/>"+JSON.stringify(json));
socket.emit('msg send', msg);
})
socket.on('msg push', function(msg) {
$('#clist').append("pushed msg: "+msg+"<br/>");
var m2 = msg.split(' ');
if (m2.length>1) {
var cmd = m2[1];
if (cmd == 'add') {
var name = m2[2];
var json = JSON.parse(m2[3]);
createCircle(name,json);
}
if (cmd == 'remove') {
var name = m2[2];
removeCircle(name);
}
}
});
}
function createRect(w,h) {
var shape = new Shape();
shape.x = 0;
shape.y = 0;
var g = shape.graphics;
g.setStrokeStyle(1)
.beginStroke(Graphics.getRGB(0,0,0))
.beginFill(Graphics.getRGB(240,240,240))
.drawRect(0,0,w,h);
return shape;
}
function createCircle(name,json) {
var shape = new Shape();
shape.x = json.x;
shape.y = json.y;
var g = shape.graphics;
g.setStrokeStyle(1);
g.beginStroke(Graphics.getRGB(json.a,json.a,json.a));
g.beginFill(Graphics.getRGB(json.r,json.g,json.b));
g.drawCircle(0,0,30);
shape.onClick = function (e) {
removeCircle(name);
socket.emit('msg send', "from="+_ip+" remove "+name);
};
_circles[name] = shape;
_stage.addChild(shape);
_stage.update();
}
function removeCircle(name) {
_stage.removeChild(_circles[name]);
_stage.update();
delete _circles[name];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment