SHARE
TWEET

Untitled

a guest Feb 20th, 2016 1,343 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //app.js
  2. var express = require('express');
  3. var app = express();
  4. var serv = require('http').Server(app);
  5.  
  6. app.get('/',function(req, res) {
  7.     res.sendFile(__dirname + '/client/index.html');
  8. });
  9. app.use('/client',express.static(__dirname + '/client'));
  10.  
  11. serv.listen(2000);
  12. console.log("Server started.");
  13.  
  14. var SOCKET_LIST = {};
  15.  
  16. var io = require('socket.io')(serv,{});
  17. io.sockets.on('connection', function(socket){
  18.     socket.id = Math.random();
  19.     socket.x = 0;
  20.     socket.y = 0;
  21.     socket.number = "" + Math.floor(10 * Math.random());
  22.     SOCKET_LIST[socket.id] = socket;
  23.  
  24.     socket.on('disconnect',function(){
  25.         delete SOCKET_LIST[socket.id];
  26.     });
  27.    
  28. });
  29.  
  30. setInterval(function(){
  31.     var pack = [];
  32.     for(var i in SOCKET_LIST){
  33.         var socket = SOCKET_LIST[i];
  34.         socket.x++;
  35.         socket.y++;
  36.         pack.push({
  37.             x:socket.x,
  38.             y:socket.y,
  39.             number:socket.number
  40.         });    
  41.     }
  42.     for(var i in SOCKET_LIST){
  43.         var socket = SOCKET_LIST[i];
  44.         socket.emit('newPositions',pack);
  45.     }
  46.    
  47.    
  48.    
  49.    
  50. },1000/25);
  51.  
  52.  
  53. //index.html
  54. <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
  55.  
  56. <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  57. <script>
  58.     var ctx = document.getElementById("ctx").getContext("2d");
  59.     ctx.font = '30px Arial';
  60.    
  61.     var socket = io();
  62.        
  63.     socket.on('newPositions',function(data){
  64.         ctx.clearRect(0,0,500,500);
  65.         for(var i = 0 ; i < data.length; i++)
  66.             ctx.fillText(data[i].number,data[i].x,data[i].y);      
  67.     });
  68. </script>
RAW Paste Data
Top