Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/427.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Node Socket.io对象故障_Javascript_Object_Socket.io - Fatal编程技术网

Javascript Node Socket.io对象故障

Javascript Node Socket.io对象故障,javascript,object,socket.io,Javascript,Object,Socket.io,我在Node Socket.IO上遇到一些问题 我已经把我所有的代码都放进了粘贴箱 服务器文件 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) { //conn

我在Node Socket.IO上遇到一些问题

我已经把我所有的代码都放进了粘贴箱

服务器文件

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();
    }

};
现在的问题是,在服务器和所有套接字之间的通信中有一个错误。 我想做的是,当有粒子对象要发送到服务器时,服务器会将它们发送到除原始发送者之外的所有人

我是通过socket.broadcast.emit()完成的; 这是成功的

但是,当对象到达其他套接字时,我得到以下错误:

Uncaught TypeError: Object #<Object> has no method 'move'
Uncaught TypeError: Object #<Object> has no method 'draw' 
uncaughttypeerror:对象#没有方法“move”
未捕获的TypeError:对象#没有方法“draw”
对于此时存在的每个粒子对象。 如果有人知道为什么我的对象会失去它们的方法,并且会非常友好地帮助一个陷入困境的程序员,我将非常高兴:)


提前谢谢

据我所知,Socket.IO期望JSON数据作为emit函数的第二个参数。JSON数据格式不支持函数作为值,根据

您正在发送一个javascript对象,并希望该对象是从另一个客户端上的json创建的。这不是Socket.IO通信的工作方式

您不应该这样做,而是应该发送构造对象所需的数据,并使用这些数据在客户端上构造对象

你可以做如下的事情

换行

socket.emit("new_particle", new Particle(local_player.x, local_player.y, 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));
});

据我所知,Socket.IO期望JSON数据作为emit函数的第二个参数。JSON数据格式不支持函数作为值,根据

您正在发送一个javascript对象,并希望该对象是从另一个客户端上的json创建的。这不是Socket.IO通信的工作方式

您不应该这样做,而是应该发送构造对象所需的数据,并使用这些数据在客户端上构造对象

你可以做如下的事情

换行

socket.emit("new_particle", new Particle(local_player.x, local_player.y, 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));
});

当对象序列化为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} 
你无法分辨它是粒子还是猴子或其他东西

接收此对象时,首先需要将其转换为
粒子

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

当对象序列化为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} 
你无法分辨它是粒子还是猴子或其他东西

接收此对象时,首先需要将其转换为
粒子

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

那我该怎么做呢?我是否发送Particle()函数?我该怎么寄这个?我从未使用过JSON。这实际上很有帮助,谢谢!我认为这样做是有意义的,然后发送一个实际的对象。那么我该怎么做呢?我是否发送Particle()函数?我该怎么寄这个?我从未使用过JSON。这实际上很有帮助,谢谢!我认为这样做是有意义的,然后发送一个实际的对象。