socket.io излучать при подключении

Question

новичок в socket.io и эксперименты с ним.это приложение довольно простое, когда я нажимаю кнопку дисплея, изображение появляется на экране в режиме реального времени.У меня есть 2 вопроса.

мой главный вопрос: при добавлении изображения выглядят нормально на всех клиентах.Теперь моя цель - получить новых клиентов, которые подключаются, чтобы увидеть те же данные.например, если я добавляю 4 изображения на экран, а затем подключается новый клиент, новый клиент вообще не видит никаких изображений.Кажется, мое событие Emit не запускается, и я не понимаю, почему.Чтобы объяснить мой мыслительный процесс, стоящий за этим:

• после добавления изображения, я клонирую контейнер html с помощью jquery, а затем преобразую в html.

• эти данные успешно отправлены на сервер, который я храню в моей переменной jqueryImage

• я создаю другое событие, но это не тактриггер на клиентском подключении.(мое событие 'append').

мой другой вопрос: это происходит не всегда, но когда подключено несколько клиентов (около 7 или 8 раз), еслиЯ добавлю, скажем, 6 изображений, некоторые клиенты будут не синхронизированы.некоторые покажут 6 изображений, некоторые покажут 4, другие 5 и т. д. Я как бы приписываю это моему соединению / задержке, но я не совсем уверен в этом.Есть ли способ проверить, что это такое и как я могу облегчить это?

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;

ОБНОВЛЕНИЕ: скорректирован код сервера, сервер сейчасизлучает, но клиент не видит его.

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

, кажется, мое событие emit не запускается, и я не понимаю, почему.чтобы объяснить мой мыслительный процесс, стоящий за этим

Вы не делаете socket.on('connect', ...) на сервере (это только для клиента).Сокет уже подключен, когда вы получаете событие io.on('connect', function(socket) {...}) на сервере.Просто сделайте socket.emit() внутри io.on('connect', function(socket) {...}).

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