Javascript socket.io代码组织和计时ES6

我有一个非常简单的实验应用程序，你点击一个显示按钮，所有客户端都会实时看到一个图像，使用socket.io。现在它在很大程度上起作用了。但是，我遇到了一个问题（我原来的问题：），客户端连接时没有发生事件，但我已在以下线程的帮助下解决了该问题：

基本上，我的“new client append event”（新客户端附加事件）检索数据（字符串形式的html），这样当新客户端连接时，它会显示当前客户端看到的相同数据（类似于连接到聊天室并能够查看所有聊天历史记录）。我必须重新组织我的代码，这样我的“新客户端附加”事件才会发生，如果我手动输入数据，我就可以让它工作。我的新问题是，现在我必须重新组织代码，我的“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;

更新

添加了建议的代码，从显示对象调用maincontainer。但它说的是它没有定义

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

---

你的socket.on函数有

this.mainContainer.append(data);

这意味着您已将mainContainer属性附加到套接字对象。因为您没有这样做，而是在Display（sub）类中声明了它，所以它会附加到您创建的Display对象。。我似乎找不到它，但在某个地方，只要需要这个脚本，就会有一个

variable = new Display();

您必须按名称调用此mainContainer对象。找到启动显示对象的代码，然后使用

theVarNameYouFound.mainContainer.append(thatThing);

---

这是有道理的。我根据你的建议调整了我的代码（在上面进行了编辑）。现在它是说显示对象没有定义。是的，不幸的是，它不是那样工作的。正在导出此类，但未导入主脚本。因此，这个变量不存在于这个js脚本的范围内。而且，您只导出和导入显示类，所以脚本的其余部分基本上是无用的。套接字代码应该与从该类创建实际对象的脚本一起使用。我可能应该具体说明一下。

theVarNameYouFound.mainContainer.append(thatThing);