Sockets.io | Undefined number

Question

Here is my app.js file (express, socket.io):

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 has started.');

var socket_list = {};

var io = require('socket.io')(serv, {});
io.on('connection', function(socket) {
    socket.id = Math.random();
    socket.x = 0;
    socket.y = 0;
    socket.number = "" + Math.floor(10 * Math.random());
    socket_list[socket.id] = socket;

    socket.on('disconnect', function() {
        delete socket_list[socket.id];
    });
});

setInterval(function() {
    var pack = [];
    for(var i in socket_list) {
        var socket = socket_list[i];
        socket.x++;
        socket.y++;
        pack.push({
            x: socket.x,
            y: socket.y,
            number: socket.number
        })
    };

    for(var i in socket_list) {
        var socket = socket_list[i];
        socket.emit('newPositions', pack);
    };
}, 25);socket.on('connect', function() { connectCounter++; });

and this is my index.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Multiplayer | HTML5</title>
        <script src="https://cdn.socket.io/socket.io-1.4.5.js"/>
    </head>
    <body>
        <canvas id="ctx" width="512" height="512" style="border: 1px solid #000;"/>

        <script type="text/javascript">
            var ctx = document.getElementById('ctx').getContext('2d');
            ctx.font = '24px Calibri';

            var socket = io();

            socket.on('newPositions', function(data) {
                ctx.clearRect(0,0,512,512);
                for(var i = 0; i < data.length; i++)
                    ctx.fillText(data[i].number, data[i].x, data[i].y);
            });
        </script>
    </body>
</html>

The end result is supposed to have it so that a random number is generated, the number is then displayed on canvas and slowly moves towards the bottom right of the screen.

If another player were join from another device (or just a new tab) then it'd have the first player's randomly generated number, as well as second player's number. Both most likely to be different numbers.

An example of this happening is at the end of this video: 8:23 - https://youtu.be/_GioD4LpjMw?t=503

For some unknown reason the number that should be displayed in the canvas is "undefined".

Answer 1

To be honest I could not reproduce the error in your post. However, it looks like you've improperly closed your html tags in your client code. Try changing your client code to this:

<html>
    <head>
        <title>Multiplayer | HTML5</title>
        <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    </head>
    <body>
        <canvas id="ctx" width="512" height="512" style="border: 1px solid #000;"></canvas>

        <script type="text/javascript">
            var ctx = document.getElementById('ctx').getContext('2d');
            ctx.font = '24px Calibri';

            var socket = io();

            socket.on('newPositions', function(data) {
                ctx.clearRect(0,0,512,512);
                for(var i = 0; i < data.length; i++)
                    ctx.fillText(data[i].number, data[i].x, data[i].y);
            });
        </script>
    </body>
</html>

Sockets.io | Undefined number

Question

1 answers

solution1
0 2019-07-09 01:34:24

Sockets.io | Undefined number

Question

1 answers

solution1 0 2019-07-09 01:34:24

solution1
0 2019-07-09 01:34:24