節點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