节点Socket.io反对我遇到一些麻烦麻烦

Question

节点Socket.IO

我已经把我所有的代码pastebins

服务器文件

var io = require("socket.io").listen(1337); 

io.set("log level", "0"); 

var particles = []; 
var players = []; 
var remove_loop; 
var particle; 



io.sockets.on("connection", function(socket) { 

    //connection 
    socket.emit("hello"); 
    console.log("A new connection has been established"); 

    //new player 
    socket.on("new_player", function() { 
     players.push(socket.id); 
     console.log("New player connected."); 
     console.log("ID: " + socket.id); 
    }); 

    //new particle 
    socket.on("new_particle", function(data) { 
     particle = data; 
     socket.broadcast.emit("particles_data", particle); 
    }); 

}); 

游戏文件

window.onload = function() { 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 

    //display settings 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 

    setInterval(function() { 
     if(canvas.width != window.innerWidth || canvas.height != window.innerHeight) { 
      canvas.width = window.innerWidth; 
      canvas.height = window.innerHeight; 
     } 
    }, 1000); 

    //remove cursor 
    document.getElementById("canvas").style.cursor = "none"; 

    //server connection 
    var socket = io.connect("http://localhost:1337"); 


    //variables 
    var update_loop; 
    var draw_loop; 
    var local_player; 
    var mouse_x; 
    var mouse_y; 
    var remote_players; 
    var particles; 
    var remove_loop; 
    var explosion; 
    var background_color; 


    init(); 
    function init() { 
     //initialize 

     local_player = new Player(); 
     background_color = "000000"; 
     explosion = true; 
     remote_players = []; 
     particles = []; 

     draw_loop = setInterval(function() { draw(); }, 10); 
     update_loop = setInterval(function() { update(); }, 10); 

     //server 
     socket.on("hello", function() { 
      socket.emit("new_player"); 
     }); 

     socket.on("particles_data", function(data) { 
      particles.push(data); 
     }); 

    }; 


    function update() { 

     for(var i = 0; i < particles.length; i++) { 
      particles[i].move(); 
     } 

    }; 


    function draw() { 
     //background_color 
     ctx.fillStyle = "#" + background_color; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 

     //remove particles 
     setInterval(function() { 
     if(!remove_loop) remove_loop = setInterval(function() { 
       setTimeout(function() { 
        if(particles.length > 0) { 
         particles.shift(); 
        } 
       }, 1); 
      }, 20); 
    }, 10); 

     //particles 
     for(var i = 0; i < particles.length; i++) { 
      if(particles[i].x < canvas.width && 
       particles[i].y < canvas.width) { 
       if(particles[i].x < canvas.width && 
        particles[i].y < canvas.height) { 
        particles[i].draw(ctx); 
       } 
      } 
     } 

    } 

    function newParticle() { 
     socket.emit("new_particle", new Particle(local_player.x, local_player.y, local_player.color)); 
     particles.push(new Particle(local_player.x, local_player.y, local_player.color)); 
    }; 

    //move mouse 
    canvas.onmousemove = function(event) { 
     if(!event) event = window.event; 
     local_player.x = event.pageX; 
     local_player.y = event.pageY; 

     newParticle(); 
    }; 

    //touch mouse (phones/tables) 
    canvas.onmousedown = function(event) { 
     if(!event) event = window.event; 
     local_player.x = event.pageX; 
     local_player.y = event.pageY; 

     newParticle(); 
    } 

}; 

玩家文件

function Player() { 
    this.x = 0; 
    this.y = 0; 
    this.color = Math.floor(Math.random() * 999999); 
    while (this.color < 100000) { 
     this.color = Math.floor(Math.random() * 999999); 
    } 
}; 

粒子文件

function Particle(x, y, color) { 
    this.start_x = x; 
    this.start_y = y; 
    this.speed = Math.floor(Math.random() * 3 + 1); 
    this.x = x; 
    this.y = y; 
    this.size = Math.floor(Math.random() * 3 + 1); 
    this.color = "#" + color; 
    this.direction = Math.floor(Math.random() * 8); 
    this.move = function() { 
     this.speedDecreaseChance = Math.random(Math.random() * 100); 
     //Chance that the particle loses it's velocity like you would 
     //see with real particles 
     if(this.speedDecreaseChance > 3) { this.speed -= 0.5 }; 
     //It's important that they move -AWAY- from X and Y. 
     this.subDirection = Math.floor(Math.random() * 2); 
     if(this.direction == 0) { //upper left 
      if(this.subDirection == 0) { 
       this.x -= this.speed; 
      } else if(this.subDirection == 1) { 
       this.y -= this.speed; 
      } 
     } else if(this.direction == 1) { //bottom right 
      if(this.subDirection == 0) { 
       this.x += this.speed; 
      } else if(this.subDirection == 1) { 
       this.y += this.speed; 
      } 
     } else if(this.direction == 2) { //upper right 
      if(this.subDirection == 0) { 
       this.x += this.speed; 
      } else if(this.subDirection == 1) { 
       this.y -= this.speed; 
      } 
     } else if(this.direction == 3) { //bottom left 
      if(this.subDirection == 0) { 
       this.x -= this.speed; 
      } else if(this.subDirection == 1) { 
       this.y += this.speed; 
      } 
     } else if(this.direction == 4) { //left 
      this.x -= this.speed/1.5; 
      if(this.subDirection == 0) { 
       this.y -= this.speed; 
      } else if(this.subDirection == 1) { 
       this.y += this.speed; 
      } 
     } else if(this.direction == 5) { //up 
      this.y -= this.speed/1.5; 
      if(this.subDirection == 0) { 
       this.x -= this.speed; 
      } else if(this.subDirection == 1) { 
       this.x += this.speed; 
      } 
     } else if(this.direction == 6) { //right 
      this.x += this.speed/1.5; 
      if(this.subDirection == 0) { 
       this.y -= this.speed; 
      } else if(this.subDirection == 1) { 
       this.y += this.speed; 
      } 
     } else if(this.direction == 7) { //down 
      this.y += this.speed/1.5; 
      if(this.subDirection == 0) { 
       this.x -= this.speed; 
      } else if(this.subDirection == 1) { 
       this.x += this.speed; 
      } 
     } 
    }; 
    this.draw = function(ctx) { 
     ctx.beginPath(); 
     ctx.shadowColor = this.color; 
     ctx.shadowBlur = 8; 
     ctx.arc(this.x, this.y, this.size ,0 ,2*Math.PI); 
     ctx.fillStyle = this.color; 
      ctx.fill(); 
     ctx.shadowBlur = 0; 
    }; 
}; 

现在的问题是，有一个在我的服务器和所有插座之间通信的错误。 我想要做的是，当有一个粒子对象将它们发送给服务器，服务器将它们发送给除原始发件人以外的所有人。

我通过socket.broadcast.emit（）; 这成功了。

然而，当物体在其它插槽到达我得到这个错误：

Uncaught TypeError: Object #<Object> has no method 'move' 
Uncaught TypeError: Object #<Object> has no method 'draw' 

对于存在在那一刻，每一个粒子对象。 如果有人知道我的对象为什么会失去他们的方法，并会非常友好地帮助程序员遇险，我会非常高兴:)

在此先感谢！

Answer 1

从我所知道的Socket.IO预期的JSON数据作为emit函数的第二个参数。 JSON数据格式不支持按照http://www.json.org/

的值支持函数您正在发送一个javascript对象，并期望从另一个客户端上的json创建对象。这不是Socket.IO通信的工作原理。

而不是你这样做，你应该发送构建对象所需的数据，并使用它来构造客户端上的对象。

你可以做一些事情，如以下

改变这一行

socket.emit("new_particle", new Particle(local_player.x, local_player.y, local_player.color)); 

到

socket.emit("new_particle", {x:local_player.x, y:local_player.y, color:local_player.color}); 

，然后将事件侦听器

socket.on("particles_data", function(data) { 
    particles.push(data); 
}); 

处理肌酐从数据开始对象

socket.on("particles_data", function(data) { 
    particles.push(new Particle(data.x, data.y, data.color)); 
}); 

Answer 2

当一个对象序列化为JSON时，它会丢失所有类型信息。这是socket.io正在传输的内容。

var particle = new Particle(1, 2, 'ccc'); 
console.log(JSON.stringify(particle)); // {"start_x":1,"start_y":2,"speed":3,"x":1,"y":2,"size":3,"color":"#ccc","direction":5} 

你不能分辨它是粒子还是猴子或别的东西。

当您收到此对象时，您需要先将其转换为Particle。

socket.on("particles_data", function(data) { 
    var particle = ...; 
    particles.push(particle); 
}); 

你可以定义构造函数，然后再次创建：

var particle = new Particle(data.x, data.y, data.color); 

或者你可以改变它的原型：

所以

var particle = $.extend(new Particle(), data); // here using jQuery helper method