Question

这是我的app.js文件（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++; });

这是我的index.html文件：

<!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>

应该以最终结果为准，以便生成一个随机数，然后将该数字显示在画布上并慢慢移向屏幕的右下角。

如果另一个玩家是从另一个设备（或只是一个新标签）加入的，则它将具有第一个玩家的随机生成的号码以及第二个玩家的号码。两者最有可能是不同的数字。

这种情况的一个例子是在此视频的结尾：8:23-https://youtu.be/_GioD4LpjMw?t=503

由于某些未知的原因，应该在画布上显示的数字是“未定义”。

Answer 1

说实话，我无法在您的帖子中重现该错误。但是，您好像未正确关闭客户端代码中的html标记。尝试将您的客户端代码更改为此：

<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 |未定义的数字

1 个答案: