How to transfer data when connecting Socket IO?

Question

JavaScript

Good afternoon.
The question is such Socket IO, how to create, say, another circle on the canvas when a new user connects, and show that in addition to his circle, there are circles of other users on the field.

Actually my addiction is on the user's side:

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();
    });
});

Servers:

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

I would suggest that you try to put all the socket work in one place, that is, either everything outside of document.ready, or everything inside. And then you have an onConnect event hung in doument.ready, and the connection to the server occurs up to this point. It's possible that the listener is simply not set up yet when you connect to the server.
Well, write more console logs in order to understand in what place what does not work out. In appearance, everything is written correctly, with regard to the message forwarding itself.
Well, yes, on the server, socket.emit will send a message to itself. But the second one (socket.broadcast.emit) should do what you want (send to everyone except itself).

Answer 2

in fact, I already did it that way, what I was interested in was how exactly to add one more ball to the field in case a new user is connected?
it seems to me that you need to do something like this, check on the server side and how many of them are currently connected, and after that make an array to return to everyone and yourself, the array should contain the coordinates of the balls that are now on the canvas.
Is the train of thought correct?