Node.js Event Emitter
Node’s event-driven architecture allows us to execute certain actions when something happens. This is done via objects (called «emitters») which can emit named events that cause functions («listeners») to be executed. Objects that emit events are instances of node’s EventEmitter class, made available via the events module. In this article we’ll look at node’s event emitter.
Creating an Emitter
// Require in the events module const EventEmitter = require('events'); const carEvent = new EventEmitter(); The events module provides us with the EventEmitter class. We then create an instance of EventEmitter called carEvent . Now let’s explore some of the methods available to us.
Adding a listener
As mentioned earlier listeners are callbacks that gets executed when we emit a named event. Here’s how you’d create an event listener on our carEvent emmiter.
carEvent.on('start', function() console.log('Started the car.'); >); Here we are registering a listener for the event named start. This will be executed when we emit an event of said name. We can also add multiple listeners to a single event. Let’s add another:
carEvent.on('start', function() console.log('Car started. Ready to go!'); >); Emitting an Event
All listeners for an event will be called synchronously in the order in which they were registered. We trigger the listener(s) for an event by calling the emit() method with the name of the event as the first argument. Any subsequent arguments will be passed on as arguments to the listeners.
carEvent.emit('start', 'Hello! '); // Started the car. // Car started. Ready to go! Above we emitted the start event which resulted in all listeners attached to the start event being executed. Now lets update our second listener to make it accept an argument.
carEvent.on('start', function(greeting) console.log(greeting, 'Car started. Ready to go!'); >); carEvent.emit('start', 'Hello!'); // Started the car. // Hello! Car started. Ready to go! Removing a listener from an event
The removeListener() method removes a listener from an event. This takes the name of the event, and the handler function to be removed as arguments. Calls to this method only removes a single instance of a listener, so if you have a listener that was added multiple times then you’d have to call the removeListener() method multiple times to remove each listener.
function a() console.log('Called listener function'); > // Add listener to event carEvent.on('A', a); // Emit event carEvent.emit('A'); // Called listener function // Remove listener carEvent.removeListener('A', a); // Emit event again // Nothing happens, event was removed carEvent.emit('A'); More methods
The on() and emit() methods are the most commons ones used when when working with event emitters in node. However, lets take a look at some other useful methods available to us.
Once
// Adds a listener to be executed once carEvent.once('stop', function(message) console.log(message); >); Now when emit the stop event, node will remove the listener(from list of listeners attached to the event) then invoke it.
// Executes the first time we emit the stop event carEvent.emit('stop', 'Stopping. '); // Stopping. // Emit the stop event a second time // Nothing happens carEvent.emit('stop', 'Stopping. '); setMaxListeners
The setMaxListeners() method allows you to set to the maximum number of listeners that can be attached to a single event. The value can be set to Infinity (or 0 ) to indicate an unlimited number of listeners.
// Sets a maximum of two listeners for any event on the carEvent emitter carEvent.setMaxListeners(2); // Add thre listeners to a single event carEvent.on('eventA', function(greeting)<>); carEvent.on('eventA', function(greeting)<>); carEvent.on('eventA', function(greeting)<>); (node:17787) Warning: Possible EventEmitter memory leak detected. 3 eventA listeners added. Use emitter.setMaxListeners() to increase limit
listeners
const listeners = carEvent.listeners('start'); console.log(listeners); // [ [Function], [Function] ] eventNames
console.log(carEvent.eventNames()); // [ 'start', 'stop', 'eventA' ] Extending The EventEmitter Class
We can create our own objects that has its own set of properties and methods along with the ones provided by node’s EventEmitter .
const EventEmitter = require('events'); class Car extends EventEmitter constructor(brand, year) super(); this.brand = brand; this.year = year; > turnRadioOn() console.log('radio turned on'); > > Above we created a class that inherits from the EventEmitter class as well as having two properties(brand, and year) of its own along with a method, turnRadioOn. Now instances of the Car class will have access to both the properties and methods on the Car class as well as all the ones inherited from the EventEmitter class.
const car = new Car('BMW', '2021'); // Adds a listener car.on('start', function() console.log(this.brand + ' started') >); // Emit the event car.emit('start'); // BMW started // Call method defined on Car class car.turnRadioOn(); // radio turned on Conclusion
Node’s EventEmitter allows us to create objects with listeners that gets executed when we emit an event that the listener is registered to.
We covered methods including the on() , emit() , removeListener() methods. We also looked at how we can extend the EventEmitter when creating our own classes. Did you find this useful? Let me know if the comments. Until next time, think, learn, create, repeat!
Джедайские приемы на JavaScript: магические свойства транслятора событий
Event Emitter можно перевести как «транслятор» или «эмиттер» событий. Звучит как название штуки, умеющей генерировать событие, которое может «услышать» кто угодно.
Представьте себе такую схему: в вашем асинхронном коде определенный участок может «крикнуть» остальным, что он выполнил свою задачу, а другие части «услышат» этот сигнал и примут соответствующие меры.
Event Emitter — это шаблон, который можно реализовать разными способами. Основная идея в том, чтобы грамотно создать основу для управления событиями и реализовать возможность любым элементам «подписаться» на него (и быть в курсе происходящего). С другими шаблонами проектирования вы можете познакомиться в нашей статье.
Уже интересно, как такая магия может работать? Итак, мы хотим добиться кода, который затем можно будет использовать так:
let input = document.querySelector('input[type="text"]'); let button = document.querySelector('button'); let h1 = document.querySelector('h1'); button.addEventListener('click', () => < emitter.emit('event:name-changed', ); >); let emitter = new EventEmitter(); emitter.subscribe('event:name-changed', data => < h1.innerHTML = `Your name is: $`; >);Реализация
Как видите, конструктор нашего класса будет инициализировать поле events, пока что делая его пустым объектом. Задача этого поля — хранить события, «подписавшиеся» на нас (то есть в нем будут храниться функции).
subscribe( eventName, fn ) < if( !this.events[eventName] ) < this.events[eventName] = []; >this.events[eventName].push(fn); >Этот метод принимает в качестве аргументов название события (например, event:name-changed , как в нашем примере) и функцию, которая будет вызываться, когда будет инициироваться транслируемое событие.
Одна из ключевых особенностей функций в JavaScript состоит в том, что функции — это этакие «объекты первого класса», то есть мы можем передать функцию в качестве параметра другой функции, как в методе subscribe() .
Этот метод принимает имя события, которое мы хотим всем транслировать, и данные, которые будут отправляться в момент этого события. Если в экземпляре класса сохранены какие-то подписанные на него события, мы проходимся по каждому из них и вызываем каждое, передавая ему данные, которые хотим транслировать.
Собственно, с реализацией паттерна мы закончили. Но пока остается одна проблема: нам нужно будет «отписать» функции, которые нам больше не нужны. Не сделаем этого — столкнемся с утечкой памяти.
Давайте решим эту проблему. Пусть метод subscribe() возвращает функцию unsubscribe() , которую позже можно будет использовать, чтобы отписаться от события.
subscribe(eventName, fn) < if(!this.events[eventName]) < this.events[eventName] = []; >this.events[eventName].push(fn); return () => < this.events[eventName] = this.events[eventName].filter(eventFn =>fn !== eventFn); > >Как мы помним, в JavaScript особенные функции — их легко можно вернуть из другой функции. Теперь метод subscribe() можно использовать следующим образом:
let unsubscribe = emitter.subscribe('event:name-changed', data => console.log(data)); unsubscribe();Вызывая сохраненную в переменной функцию unsubscribe() , мы отписываемся от события.
Вот и все. Пока-пока, утечки памяти!
Вот тут можно попробовать весь получившийся код в действии.