синхронизировать новых клиентов с socket.io

Question

на самом деле не был уверен в терминологии для этого, так что извините за путаницу.в основном у меня есть приложение, которое при нажатии кнопки отображения добавляет изображение в домен, и все клиенты могут видеть, что это изображение добавляется в режиме реального времени.Мой вопрос о новых клиентах, подключающихся к серверу.Допустим, я добавил 4 изображения.4 изображения отображаются нормально.но, если новый клиент подключается после добавления этих изображений, они не видят изображения, отображаемые на странице.так что если я нажал кнопку отображения и добавил еще 1 изображение, 1 клиент теперь видит 5 изображений, а новый клиент видит только 1 изображение.Как я могу заставить всех клиентов видеть одно и то же, независимо от того, когда они подключены к серверу?код ниже не сломан и просто показывает основные функциональные возможности моего приложения, я просто не уверен, с чего начать и что добавить.

сервер

const express = require('express');
const socketIO = require('socket.io');
const http = require('http');


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

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

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

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

});

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


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

клиент

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

// make connection
const socket = io.connect('localhost:3000');


class Display extends SaveInput {

  constructor(){


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

  }

  buttons (){

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


  }

  //display images 
  displayEls() {
    let img = './assets/images/baseball/team0.jpg';
    let $picContainer = $('<div class="picture-frame"></div>');
    let  $newImg = $('<img>');

    // EMIT
    socket.emit('test', {
      image: img
    });

    // listen
    socket.on('test', function(data) {
        let that = this;
        let foo = data.image.toString();

        $newImg.attr('src', foo);
        $newImg.appendTo($picContainer);
        that.pGrid.append($picContainer);
    });


  }

}

export default Display;

Answer 1

Когда клиент подключается к серверу, вы можете отправить им сообщение, содержащее начальное состояние системы.Это можно сделать в обработчике событий io.on('connection' ...).

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