Socket.io код организации и синхронизации ES6

Question

У меня есть довольно простое экспериментальное приложение, вы нажимаете кнопку отображения, и изображение отображается в реальном времени для всех клиентов с использованием socket.io.теперь это работает по большей части.Однако у меня была проблема (мой оригинальный вопрос здесь: socket.io emit on connect ) с событием, которое не происходит при подключении клиента, но я решил ее с помощью этого потока: socket.emit на стороне сервера игнорируется после подключения? .

По сути, мое «событие нового клиента-добавления» извлекает данные (html в форме строки), поэтому при подключении нового клиента отображаются те же данные, которые видят текущие клиенты (аналогично подключению кчат и возможность видеть всю историю чата).Мне пришлось реорганизовать свой код, чтобы произошло событие «new-client-append», и я смогу заставить его работать, если я введу данные вручную.Моя новая проблема теперь в том, что мне пришлось реорганизовать мой код, мое событие «new-client-append» зависит от переменной, которую я установил в классе, поэтому оно больше не распознается.я относительно новичок в JS, как я могу узнать свою переменную и почему это происходит?я попытался переместить событие в разные места моего кода без удачи.это переменная this.mainContainer.

КЛИЕНТ

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

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


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

    this.mainContainer.append(data);

});**

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


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 
  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('html clone ' + JSON.stringify(htmlClone));
        // console.log('string clone ' + stringClone);
    });

}

export default Display;

СЕРВЕР

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

let jqueryImage;

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

  console.log('client has entered...');

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


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



    // errors
    io.on('error', function (err) {
        console.log(err);
    });

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

});


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

ОБНОВЛЕНИЕ

добавлен предложенный код, вызывающий главный контейнер изэкранный объект.но он говорит, что он не определен.

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

    **display.mainContainer.append(data);**

});

файл, в котором я создаю объекты

import SaveInput from './modules/SaveInput';
import Display from './modules/Display';


const saveInput = new SaveInput();
const display = new Display ();

Answer 1

Ваша функция socket.on имеет

this.mainContainer.append(data);

Это означает, что вы прикрепили свойство mainContainer к объекту сокета.Поскольку вы не сделали этого, а объявили это внутри своего класса Display (sub), он присоединен к созданному вами объекту Display. Кажется, я не могу его найти, но где-то, где требуется этот скрипт, есть

variable = new Display();

Вы должны вызывать этот объект mainContainer по его имени.Найдите тот код, который инициирует объект Display, а затем используйте

theVarNameYouFound.mainContainer.append(thatThing);