在EventEmitter类中使用WebSocket时无法触发事件的问题

你的代码核心问题是**this指向错误**：在webSocket.onopen的普通函数回调里，this指向的是WebSocket实例本身，而不是SimpleService的实例，所以调用this.emit根本不会触发你类上绑定的'data'事件。

修复方案（三种任选其一） #

方案1：使用箭头函数（最简洁）

箭头函数会继承外层上下文的this指向，直接指向SimpleService实例：

export class SimpleService extends EventEmitter {
  constructor() {
    super();
  }

  execute() {
    try {
      const webSocket = new WebSocket('wss://server-socket:1234');

      webSocket.onopen = () => {
        this.emit('data', 'Web socket connection is opened...');
      };
    } catch (error) {
      this.emit('error', error);
    }
  }
}

方案2：提前保存this到变量

把当前SimpleService实例的this存到变量里，在回调中使用该变量：

export class SimpleService extends EventEmitter {
  constructor() {
    super();
  }

  execute() {
    try {
      const self = this; // 保存当前实例的this
      const webSocket = new WebSocket('wss://server-socket:1234');

      webSocket.onopen = function () {
        self.emit('data', 'Web socket connection is opened...');
      };
    } catch (error) {
      this.emit('error', error);
    }
  }
}

方案3：用bind绑定this

通过bind方法把回调函数的this强制绑定为SimpleService实例：

export class SimpleService extends EventEmitter {
  constructor() {
    super();
  }

  execute() {
    try {
      const webSocket = new WebSocket('wss://server-socket:1234');

      webSocket.onopen = function () {
        this.emit('data', 'Web socket connection is opened...');
      }.bind(this); // 绑定this到当前实例
    } catch (error) {
      this.emit('error', error);
    }
  }
}

验证效果 #

修复后，客户端代码无需修改，运行时就能正常接收到'data'事件，打印出Web socket connection is opened...。

内容的提问来源于stack exchange，提问作者zedian