如何在 Reactjs 中为 eventEmitters 使用 npm 的 'events' 模块

Question

我想在我的 React 应用程序中使用 npm 的 'events' 模块。我有一个用 phaserjs 开发的游戏，它也有关卡编辑器。 'events' 将用于与游戏模块通信。来自根目录的文件夹结构

客户端
- 来源
  - App.js
  - index.js
  - Components/game-view
  - Components/level-creator-view
游戏
服务器

有人做过同样的事情，但在 angular -- 在里面 app.js

const eventEmitter = require('events').EventEmitter();
window.eventEmitter = eventEmitter;
eventEmitter.on('loaded', () => { console.log('\n\ncreator loaded\n\n') })

而在他的 angular 应用程序的其他状态下，他只会采用 --

const eventEmitter = window.eventEmitter;
eventEmitter.emit('start game');

Here's the link to that project, 查看浏览器模块，app.js 以及 browser/states/createlevel

我想做同样的事情，我的项目很相似，但游戏逻辑不同。

游戏模块具有所有必要的事件发射器和侦听器设置

我尝试在我的 index.js 中设置 window.eventsEmitter() 并在其他组件中使用它。问题从这里开始，我如何在 React class 或函数中使用它，它应该在构造函数中还是应该在生命周期方法中设置它，或者我应该把它放在完全不同的 js 文件中并包含它？我尝试了最多（除了最后一个）但失败了。

我也搜索了如何做，但没有找到我正在寻找的东西..任何建议都会很有帮助。提前致谢。

Answer 1

EventEmitter 的语法似乎不起作用。我在这里使用了 npm 页面中的示例（并且有效）- https://www.npmjs.com/package/events

将此添加到 App.js：

const eventEmitter = require('events');
window.ee = new eventEmitter();
ee.on('loaded', () => { console.log('\n\ncreator loaded\n\n') })
ee.on('test', () => { console.log('\n\ntest fired\n\n') })

然后来自任何组件构造函数（或 componentdidmount 等）：

constructor( props ) {
    super( props );
    ee.emit('test', 'asdf')
}

Answer 2

另一种方法是创建一个文件eventEmitter.tsx（如果您使用的是打字稿）：

import { EventEmitter } from 'events'

const eventEmitter = new EventEmitter()

export default eventEmitter

然后在任何其他文件中都可以包含它。

import eventEmitter from './eventEmitter'

const Hello = () => {
  const someFunction = () => {}
  useEffect(() => {
    eventEmitter.on('your-event', someFunction)
    return () => {
      eventEmitter.off('your-event', someFunction)
    }
  })
}

如何在 Reactjs 中为 eventEmitters 使用 npm 的 'events' 模块

How to use npm's 'events' module in Reactjs for eventEmitters

events

npm

reactjs

phaser-framework