socket.io emit on connect

Question

new to socket.io and experimenting with it. this app is pretty simple, when i click the display button, an image appears on the screen in real time. i have 2 questions.

my main question: the images appear fine across all clients when added. my goal now is to get any new clients that connect to see the same data. for example, if i add 4 images to the screen, and then a new client connects, the new client does not see any images at all. seems my emit event is not triggering and i don't understand why. to explain my thought process behind it:

• after an image is appended, i clone the html container with jquery then convert to html.

• this data is successfully sent to the server, which i store in my jqueryImage variable

• i create another event, but it doesn't trigger on a client connection. (my 'append' event).

my other question: this doesn't happen all the time, but when there are a couple of clients connected (about 7 or 8 ish) if i add lets say 6 images, some of the clients will be out of sync. some will show 6 images, some will show 4, others 5, etc. i kind of attribute this to my connection/lag but i'm not absolutely sure on that. is there a way to check what this is and how would i aleviate that?

SERVER

 // app set up
    const app = express();
    const server = http.Server(app);
    // const  = new socket(server);
    let port = process.env.PORT || 3000;

    // static files
    app.use(express.static('app'));

    // socket setup & pass SERVER
    const io = new socketIO(server);

    let jqueryImage;

    // on client connect
    io.on('connection', (socket) => {


        console.log('made connection!!!');

        // events
        socket.on('client-image', function(data){
            console.log('SERVER ' + data.image);
            io.sockets.emit('client-image', data);
        });

        socket.on('new-client-append', function(data){
        jqueryImage = data.clone;
        console.log('jqueryImage ' + JSON.stringify(jqueryImage));
  });


io.on('connect', (socket) => {
  console.log('append emitting!!!');
  console.log('current clone ' + JSON.stringify(jqueryImage));

    socket.emit('new-client-append', jqueryImage);

});



    });



    // errors
    io.on('connect_error', function(){
        console.log('fail');
    });


    server.listen(port, () => {
        console.log('server running....');
    });

CLIENT

import $ from 'jquery';
import SaveInput from './SaveInput';
import io from 'socket.io-client';



class Display extends SaveInput {

  constructor(){


    this.mainContainer = $('.main-container');
    this.pGrid = $('.pic-grid-container');
    this.display = $('#btn-display');

    this.buttons();
  }

  buttons (){

    // click buttons
    this.display.click(this.displayEls.bind(this));


  }

  //display images with names
  displayEls() {

    let img = 'https://secure.gravatar.com/avatar/22f38e0216f57af53a1776fb2a72c436?s=60&d=wavatar&r=g';
    let $picContainer = $('<div class="picture-frame"></div>');
    let  $newImg = $('<img>');

    // clone pic-grid-container
    let htmlClone = this.pGrid.clone();
    let stringClone = htmlClone.html();

    // EMIT

    //send image url
    socket.emit('client-image', {
      image: img
    });

    // send dom clone to server
    socket.emit('new-client-append', {
      clone: stringClone
    });

    // LISTEN

    // append image in real time
    socket.on('client-image', (data) => {

        let foo = data.image.toString();

        $newImg.attr('src', foo);
        console.log(data);
        console.log(foo);
        $newImg.appendTo($picContainer);
        this.pGrid.append($picContainer);

        console.log('after append clone ' + stringClone);
    });

    socket.on('new-client-append', (data) => {
  console.log('NEW CLIENT ENTERED');

});

}

export default Display;

UPDATE: adjusted server code, server now emits, but client does not see it.

  //SERVER
socket.on('new-client-append', function(data){
        jqueryImage = data.clone;
        console.log('jqueryImage ' + JSON.stringify(jqueryImage));
  });


io.on('connect', (socket) => {
  console.log('append emitting!!!');
  console.log('current clone ' + JSON.stringify(jqueryImage));

    socket.emit('new-client-append', jqueryImage);

});

//client

 // send dom clone to server
    socket.emit('new-client-append', {
      clone: stringClone
    });

socket.on('new-client-append', (data) => {
      console.log('NEW CLIENT ENTERED');

    });

Answer 1

seems my emit event is not triggering and i don't understand why. to explain my thought process behind it

You don't do socket.on('connect', ...) on the server (that's only for the client). The socket is already connected when you get the io.on('connect', function(socket) {...}) event on the server. Just do the socket.emit() inside the io.on('connect', function(socket) {...}).

io.on('connect', function(socket) {
    socket.emit(...);
});