JavaScript | Node.js将服务器端对象发送到客户端

Question

I'm currently trying to send a socket.io packet from the server to the client source code.

My problem:

If I code both without socket.io then it would work like the following: https://jsfiddle.net/v68sd1t3/

But how could i save the data packet from:

socket.on('init', function(data)

into an array to use it client side when I receive the init packet?

I've been trying to add it to a array. But it wouln't let me access the values outside of the socket.on function.

What I have tried:

var socket = io();
window.game = {};

socket.on('init', function(data)
{
    window.game = data;
});

console.log(game);

Which would return a blank object. What am I doing wrong?

My Client code:

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type="text/javascript">
    var socket = io();

    socket.on('init', function(data)
    {
        console.log(data);
    });

</script>

My Server code:

var express = require('express');
var app = express();
var serv = require('http').Server(app);

app.get('/', function(req, res)
{
res.sendFile(__dirname + '/client/index.html');
});

app.use('/client', express.static(__dirname + '/client'));

serv.listen(2000);
console.log('Server started.');

// Modules start

var config = function() 
{
    var self = this;
    self.updateRate = 1000 / 60;
    self.roomWidth = 1920;
    self.roomHeight = 1080;
    self.playerSpeed = 4;
};

var data = function() 
{
    var self = this;
    self.loopLast = Date.now();
    self.loopNow = Date.now();
    self.loopDelta = 1;
    self.players = [];
};

var utilitys = function() 
{
    var self = this;

    self.direction = function(x1, y1, x2, y2)
    {
        return Math.atan2(y1 - y2, x1 - x2);
    };

    self.distance = function(x1, y1, x2, y2)
    {
        return Math.sqrt((x2 -= x1) * x2 + (y2 -= y1) * y2);
    };

    self.nextId = function(array)
    {
        for (var i = 0, length = array.length; i < length; i++)
        {
            if (!self.findBy(array, 'id', i + 1))
            {
                return i + 1;
            }
        }

        return array.length + 1;
    };
};

var mechanics = function(config, data, utilitys)
{
    var self = this;

    self.updateDelta = function()
    {
        data.loopNow = Date.now();
        data.loopDelta = (data.loopNow - data.loopLast) / config.updateRate;
        data.loopLast = data.loopNow;
    };

    self.updatePlayers = function()
    {
        for (var i = 0; i < data.players.length; i++)
        {
            data.players[i].update(i);
        }
    };

    self.gameLoop = function()
    {
        self.updateDelta();
        self.updatePlayers();
    };

    self.player = function(x, y)
    {
        this.id = utilitys.nextId(data.players);
        this.spawned = data.loopNow;
        this.x = x;
        this.y = y;
        this.targetX = x;
        this.targetY = y;
        this.pendingDelete = false;

        this.updateLocation = function()
        {
            if (utilitys.distance(this.x, this.y, this.targetX, this.targetY) > 20)
            {
                var direction = utilitys.direction(this.targetX, this.targetY, this.x, this.y);
                this.x += Math.cos(direction) * (config.playerSpeed * data.loopDelta);
                this.y += Math.sin(direction) * (config.playerSpeed * data.loopDelta);
            }
        };

        this.update = function(index)
        {
            this.updateLocation();

            if (this.pendingDelete)
            {
                data.players.splice(index, 1);
            }
        };
    };
};

// Modules end

// Game init start

var game = {};
game.config = new config();
game.data = new data();
game.utilitys = new utilitys();
game.mechanics = new mechanics(game.config, game.data, game.utilitys);
setInterval(game.mechanics.gameLoop, game.config.updateRate);

// Game init end

// Socket start

var io = require('socket.io')(serv, {});
io.sockets.on('connection', function(socket)
{
    game.data.players.push(new game.mechanics.player(game.config.roomWidth / 2, game.config.roomHeight / 2));
    socket.emit('init', game);
});

// Socket end

Answer 1

Solution

Try it like that:

socket.on('init', function(data){
    window.game = data;

    // update your game or call update method right HERE! 
    console.log(game);
});

Your Mistake

Your problem was, that you were trying to access empty object that not been updated yet:

// that is just creates subscribe function
// you created listener, but it does not mean that event actual happened
socket.on('init', function(data)
{
    window.game = data;
});

// now you are trying to access data, that is not updated yet
console.log(game);

Actual event will appear later, and you can access this game object only after function(data) fired by socket.

PS As javascript is asynchronous init event listener won't be fired before all your sync expressions being processed by event loop (till console.log in our case) . Only after that, whenever socket event would happen init listener can be fired.

---

My Suggestion

I suggest you to subscribe on events with game methods. Some abstract game structure:

class Game{
    constructor(config, socket){
       super.apply(this, arguments);
       // subscribe to startup events
       // game will start automatically after init event comes
       socket.on('init', this.init);
       // save for future ;)
       this.socket = socket;
       this.config = config;
    }
    init(data){
        // subscribe to real time events
        this.socket.on('update', this.update);
        window.requestAnimationFrame(this.tick, this.config.updateRate);
        window.addEventListener('mousedown', this.onMouseDown, false);
        window.addEventListener('resize',    this.onResize,    false);

        //some stuff
        this.update(data);
    }
    tick(){
        // recalculate some stuff each frame, then redraw
        this.draw()
    }
    draw(){
      //draw
    }
    update(data){
        console.log(data);
    }
    onMouseDown(){}
    onResize(){}
}

var game = new Game(config, socket);