InitialCommit

.gitignore

+node_modules

app.js

+var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var routes = require('./routes/index');
+var users = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'ejs');
+
+// uncomment after placing your favicon in /public
+//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', routes);
+app.use('/users', users);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  var err = new Error('Not Found');
+  err.status = 404;
+  next(err);
+});
+
+// error handlers
+
+// development error handler
+// will print stacktrace
+if (app.get('env') === 'development') {
+  app.use(function(err, req, res, next) {
+    res.status(err.status || 500);
+    res.render('error', {
+      message: err.message,
+      error: err
+    });
+  });
+}
+
+// production error handler
+// no stacktraces leaked to user
+app.use(function(err, req, res, next) {
+  res.status(err.status || 500);
+  res.render('error', {
+    message: err.message,
+    error: {}
+  });
+});
+
+
+module.exports = app;

bin/www

+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('ws-sample:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+var wsRoutes = require('../ws-routes')(server);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

package.json

+{
+  "name": "ws-sample",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.13.1",
+    "cookie-parser": "~1.3.5",
+    "debug": "~2.2.0",
+    "ejs": "~2.3.2",
+    "express": "~4.13.0",
+    "morgan": "~1.6.1",
+    "serve-favicon": "~2.3.0",
+    "socket.io": "^1.3.6"
+  }
+}

public/javascripts/index.js

+var canvas = document.getElementById('canv');
+var ctx = canvas.getContext("2d");
+
+var LEFT  = "LEFT"
+,   RIGHT = "RIGHT"
+,   UP    = "UP"
+,   DOWN  = "DOWN";
+
+
+/*
+UIから操作用のテストコード
+
+document.body.onkeydown = function( evt ) {
+  var keyTypes = {
+    37: LEFT,
+    38: UP,
+    39: RIGHT,
+    40: DOWN
+  };
+
+  if ( typeof keyTypes[ evt.keyCode ] != 'undefined' ) {
+    move( keyTypes[ evt.keyCode ] );
+  }
+};
+*/
+
+var IMG_WIDTH = 100
+,   IMG_HEIGHT = 88;
+
+var current_x = 0
+,   current_y = 0;
+
+var seek = 20;
+
+function move( keyType ) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  switch ( keyType ) {
+    case LEFT:
+      if ( (current_x - seek) >= 0 ) current_x -= seek;
+      break;
+    case RIGHT:
+      if ( (current_x + IMG_WIDTH + seek ) <= canvas.width ) current_x += seek;
+      break;
+    case UP:
+      if ( (current_y - seek ) >= 0 ) current_y -= seek;
+      break;
+    case DOWN:
+      if ( (current_y + IMG_HEIGHT + seek ) <= canvas.height ) current_y += seek;
+      break;
+  }
+
+  renderImage( current_x, current_y );
+
+}
+
+// Initialize 
+var img = new Image();
+var socket;
+function init() {
+  socket = io.connect('');
+  socket.on('move action receive', function (data) {
+      move(data.keyType)
+  });
+  socket.on('initialize render', function(data){
+    current_x = data.x;
+    current_y = data.y;
+    // create image
+    img.src = '/images/fox2.png';
+    img.onload = function() {
+      renderImage( current_x, current_y);
+    }
+  });
+}
+
+function renderImage( x, y ) {
+   ctx.drawImage(img, x, y, IMG_WIDTH, IMG_HEIGHT);
+   socket.emit('moved target', {x : x, y : y});
+}
+
+
+init();
\ No newline at end of file

public/stylesheets/style.css

+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background: #1288cc;
+}
+
+a {
+  color: #00B7FF;
+}
+
+#canv {
+	background: #fff;
+}
\ No newline at end of file

routes/index.js

+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function(req, res, next) {
+
+  res.render('index', { title: 'WS Controller' });
+});
+
+router.get('/controller', function(req,res){
+	res.render('controller', {title: 'WS Controller'});
+})
+
+module.exports = router;

routes/users.js

+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;

views/controller.ejs

+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <title>WS Controller</title>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
+    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+
+	<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
+	<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+</head>
+<body>
+
+<h1>WS Controller</h1>
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" data-keytype="UP">
+  <i class="material-icons">上</i>
+</button>
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" data-keytype="LEFT">
+  <i class="material-icons">左</i>
+</button>
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" data-keytype="RIGHT">
+  <i class="material-icons">右</i>
+</button>
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" data-keytype="DOWN">
+  <i class="material-icons">下</i>
+</button>
+
+
+<script src="/javascripts/fastclick/fastclick.js"></script>
+<script src="/socket.io/socket.io.js"></script>
+<script>
+	
+	if ('addEventListener' in document) {
+	    document.addEventListener('DOMContentLoaded', function() {
+		        FastClick.attach(document.body);
+		    }, false);
+	}
+
+	var buttons = document.getElementsByTagName("button");
+	for ( var i=0; i < buttons.length; i++ ) {
+		buttons[i].addEventListener('click', onButton, false, false);
+	}
+	
+	var socket = io.connect('');
+
+	function onButton() {
+		socket.emit('move action', 
+			{ keyType: this.getAttribute('data-keytype') });
+	}
+</script>
+
+
+</body>
+</html>
\ No newline at end of file

views/error.ejs

+<h1><%= message %></h1>
+<h2><%= error.status %></h2>
+<pre><%= error.stack %></pre>

views/index.ejs

+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= title %></title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+  </head>
+  <body>
+    
+	<div style="float: left; width: 200px;">
+		<h1>WS Sample</h1>
+	</div>
+	<div id="qrcode" style="float: left; width: 200px;"></div>
+	<div style="clear: both"></div>
+	<br>
+	<canvas id="canv" width="500" height="500"></canvas>
+
+	<script src="/socket.io/socket.io.js"></script>
+    <script type="text/javascript" src="/javascripts/index.js"></script>
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+	<script type="text/javascript" src="/javascripts/jquery-qrcode/jquery.qrcode.min.js"></script>
+	<script>
+		jQuery(function(){
+			jQuery('#qrcode').qrcode({width: 64,height: 64, text : location.href + "controller"});
+		})
+	</script>
+
+  </body>
+</html>

ws-routes/index.js

+function wsRoutes( server ) {
+  	//SocketIO
+  	var x = 0
+  	,	y = 0;
+
+  	var io = require('socket.io')(server);
+  	io.on('connection', function (socket) {
+	  socket.emit('initialize render', { x : x, y : y });
+	  socket.on('move action', function (data) {
+	    socket.broadcast.emit('move action receive', data);
+	  });
+	  socket.on('moved target', function(data) {
+	  	x = data.x;
+	  	y = data.y;
+	  })
+	});
+}
+
+module.exports = wsRoutes;
\ No newline at end of file