Sockets.io |Неопределенный номер - PullRequest
0 голосов
/ 09 июля 2019

Вот мой файл 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

По неизвестной причине номер, который должен отображатьсяна холсте "неопределено".

enter image description here

1 Ответ

0 голосов
/ 09 июля 2019

Если честно, я не смог воспроизвести ошибку в вашем посте. Однако похоже, что вы неправильно закрыли свои 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...