¿Hay algún EventEmitter en el lado del navegador que tenga una lógica similar en nodejs?

3 minutos de lectura

Avatar de usuario de Xin
xin

Es muy fácil usar eventEmitter en node.js:

var e = new EventEmitter();
e.on('happy', function(){console.log('good')});
e.emit('happy');

¿Algún EventEmitter del lado del cliente en el navegador nativo?

Avatar de usuario de Brad
Puntilla

En los navegadores modernos, existe EventTarget.

class MyClass extends EventTarget {
  doSomething() {
    this.dispatchEvent(new Event('something'));
  }
}

const instance = new MyClass();
instance.addEventListener('something', (e) => {
  console.log('Instance fired "something".', e);
});
instance.doSomething();

Recursos adicionales:

Avatar de usuario de Amir Gorji
Amir Gorji

Hay un paquete NPM llamado “eventos” que le permite crear emisores de eventos en un entorno de navegador.

const EventEmitter = require('events')
 
const e = new EventEmitter()
e.on('message', function (text) {
  console.log(text)
})
e.emit('message', 'hello world')

en tu caso es

const EventEmitter = require('events')

const e = new EventEmitter();
e.on('happy', function() {
    console.log('good');
});
e.emit('happy');

  • OP está buscando trabajar en una implementación nativa en un navegador que no requiera un paquete npm.

    – Iván

    9 oct 2020 a las 7:42

  • Las respuestas de @Ivan SO no son solo para el OP. 😉 Esta es la respuesta que buscaba, y viendo los votos, también de otras personas. Quiero que el mismo código funcione en ambos entornos.

    – Íñigo

    10 de abril a las 3:34


Avatar de usuario de Alparslan
Alparslán

Esto es suficiente para el caso dado.

class EventEmitter{
    constructor(){
        this.callbacks = {}
    }

    on(event, cb){
        if(!this.callbacks[event]) this.callbacks[event] = [];
        this.callbacks[event].push(cb)
    }

    emit(event, data){
        let cbs = this.callbacks[event]
        if(cbs){
            cbs.forEach(cb => cb(data))
        }
    }
}

Actualización: acabo de publicar una versión un poco más evolucionada. Es muy simple pero probablemente suficiente:
https://www.npmjs.com/package/alpeventemitter

  • Mecanografiado: callbacks: { [s: string]: ((...args: any[]) => any)[] }

    – Mathieu CAROFF

    4 de enero de 2020 a las 11:43

  • Esto dará como resultado un manejo de eventos desordenado cuando un controlador de eventos emita otro evento. Probablemente desee llamar a las devoluciones de llamada en emit después de que regrese, con setTimeout. O poner los eventos en una cola.

    – Vinicius Fortuna

    28 de julio de 2021 a las 16:39


Avatar de usuario de Xin
xin

Cree un evento personalizado en el cliente y adjúntelo al elemento dom:

var event = new Event('my-event');

// Listen for the event.
elem.addEventListener('my-event', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

Esto se refiere desde: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
Gracias Naeem Shaikh

Terminé usando esto:

export let createEventEmitter = () => {
   let callbackList: (() => any)[] = []

   return {
      on(callback: () => any) {
         callbackList.push(callback)
      },
      emit() {
         callbackList.forEach((callback) => {
            callback()
         })
      },
   }
}

Avatar de usuario de Nir
Nir

Actualización de 2022: BroadcatsChannel puede proporcionar una solución.

https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

Avatar de usuario de John Haugeland
Juan Haugeland

El nodo obtuvo un objetivo de evento nativo en el nodo 15 (octubre de 2020); esta pregunta ya no se aplica

https://nodejs.org/api/events.html#eventtarget-and-event-api

  • esta pregunta es sobre el navegador, no del lado del servidor

    – Alguien especial

    22 de noviembre a las 7:53

¿Ha sido útil esta solución?