Как передать данные при коннекте Socket IO?

Question

[Игорь Квитко]

Добрый день.
Вопрос такой Socket IO, как на канвасе при подключении нового пользователя создать скажем еще один круг, и показать что на поле помимо его круга есть и круги других пользователей.

Собственно моя наркомания на стороне пользователя:

var socket = io.connect('http://localhost:3000');
var size = 32, field, player;

function init() {
    field = new Field(0, 0, (16 * size), (12 * size));
    var canvas = document.getElementById('gameField');
    canvas.width = field.width;
    canvas.height = field.height;
    context = canvas.getContext('2d');
}

function Player(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.draw = function(color, globalAlpha) {
        context.globalAlpha = globalAlpha;
        context.fillStyle = color;
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, (Math.PI * 2), true);
        context.fill();
    }; 
}

function Field(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.draw = function(color, globalAlpha) {        
        context.globalAlpha = globalAlpha;
        context.fillStyle = color;
        context.fillRect(this.x, this.y, this.width, this.height);
    };
}

function draw() {
    field.draw('#fff', 1);
    player.draw('#000', 1);
}

function mouseClick() {
    $('#gameField').click(function(e) {
        var offset = $(this).offset();
        var mouseX = (e.pageX - Math.floor(offset.left));
        var mouseY = (e.pageY - offset.top);
            
        socket.emit('coordinates', { x : mouseX, y : mouseY});
    });
}

function mouseMove() {
    $('#gameField').mousemove(function(e) {
        var offset = $(this).offset();
        var mouseX = (e.pageX - Math.floor(offset.left));
        var mouseY = (e.pageY - offset.top);
        
        //console.log(mouseX+' '+mouseY);
    });
}

$(document).ready(function() {
    init();
    mouseClick();
    mouseMove();
    
    socket.on('connecting', function() {
        
    });
    
    socket.on('connect', function () {
        var x = y = ((Math.random() * 200) + 1);
        if ((x + 16) % size != 0) {
            mouseX = x - (x % size) + size / 2;
        };
        if ((y + 16) % size != 0) {
            mouseY = y - (y % size) + size / 2;
        };
        socket.emit('coordinates', { x : mouseX, y : mouseY});
    });
    
    socket.on('ball', function (data) {
        if ((data.x + 16) % size != 0) {
            mouseX = data.x - (data.x % size) + size / 2;
        };
        if ((data.y + 16) % size != 0) {
            mouseY = data.y - (data.y % size) + size / 2;
        };
        player = new Player(mouseX, mouseY, size/2);
        draw();
    });
});

Сервера:

var io = require('socket.io')(server);

io.on('connection', function (socket) {
    socket.on('coordinates', function (data) {
        socket.emit('ball', data);
        socket.broadcast.emit('ball', data);
    });
});

Answer 1

[Aliansys]

Я бы предложил Вам попробовать вынести всю работу с сокетами в одно место, то есть либо все за пределами document.ready, либо все внутри. А то у вас событие onConnect навешивается в doument.ready, а коннект к серверу происходит до этого момента. Возможно listener просто еще не навешан, когда вы соединяетесь с сервером.
Ну и побольше консоль логов написать, чтобы понять в каком месте что не отрабатывает. С виду все написано верно, что касается самих пересылок сообщений.
Ну и да, на сервере socket.emit отправит сообщение самому себе. Но второе (socket.broadcast.emit) должно сделать то что вы хотите (отправит всем, кроме себя).

Answer 2

[Игорь Квитко]

собственно я это уже и так сделал, меня вот что интересовало, как именно добавить на поле еще один шарик в случае подключения нового пользователя ?

как мне кажется, нужно сделать как то так, проверять на стороне сервера а сколько их сейчас подключено, и после этого делать массив на отдачу всем и себе, в массиве должны лежать координаты шариков что сейчас находятся на холсте.

Ход мыслей верный ?

Comments

[Aliansys]

Да. Самый простой вариант - это на каждое подключение добавлять координаты вновь прибывшего в массив / объект на сервере. Затем всем кроме себя (broadcast.emit) отправить координаты только вошедшего, а только вошедшему(emit) отправить массив/объект всех уже существующих. Соответственно на disconnect надо будет из массива/объекта удалять ушедшего.

[Игорь Квитко]

Спасибо. Собственно я так и сделал, так же к тем кто захочет копипастить скрипт, в нем есть ошибка, что бы все заработало нужно добавить else в connect и ball, иначе рисовать вновь подключенного он не будет.

[Игорь Квитко]

так же уберите обо ифа из connect