Observables: fromEvent

Clase 8 de 36 • Curso de Programación Reactiva con RxJS

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Comentarios

Marcelo Arias

teacher•

✅ fromEvent es un método que permite crear un Observable que recibe eventos determinados de un elemento del DOM.

Por ejemplo a través de fromEvent podemos interactuar con las coordenadas del cursor a través de toda la pantalla. Esto a través del evento mousemove y el elemento document.

Víctor Andrés Córdova Poma

student•

Aquí está el código del profe, pero con tipado en Ts.

import { fromEvent } from "rxjs";

const onKey$ = fromEvent<KeyboardEvent>(document, "keydown"); //Se crea el observable que lanza un evento cuando se
//presione una tecla.

const observatorMouse = { //Se crea el observador que indica como usará la data obtenida.
	next: (event: KeyboardEvent) => {
		console.log("new event: ", event.key);
	},
	complete: () => {
		console.log("There is no more events");
	},
	error: (error: Error) => {
		console.log("Something went wrong: ", error.message);
	}
}

onKey$.subscribe(observatorMouse); //Se subscribe el observador al observable.

Nicolás Arévalo

student•

Me acaba de surgir una pregunta: ¿por qué es mejor usar rxjs y no la api del navegador (el ``` addEventListener()

Marcelo Arias

teacher•

¡Hola Nicolás! Buena pregunta.

fromEvent toma un comportamiento similar a addEventListener.

Sin embargo, aconsejaría usar fromEvent en situaciones donde podemos aprovechar el flujo de información continuo que hace un observable con operadores pipeables (este tema que se verá en el siguiente módulo).

Si nos conviene tener un control más sencillo de los eventos que se realizan en un elemento de la página. Incluyendo características como empezar a escuchar eventos, dejar de escuchar esos eventos, o hacer múltiples operaciones continuas con la información de esos eventos. fromEvent es una gran opción.

En otra situación, podemos usar, el popular, addEventListener.

Alfonso Navarro

company_admin•

en verdad que buenas clases, muy pero muy bn explicado, felicidades...

Felipe de Jesús Ramirez Rodriguez

student•

Observables: fromEvent

Creates an Observable that emits events of a specific type coming from the given event target.

example fromEvent(target, eventName)

observableAlfa$.subscribe(observador);

//fromEvent to mousemove
const observableMouse$ = fromEvent(document, 'mousemove');
const observadorMouse$ = {
  next: (value) => console.log('Mouse', value),
}
observableMouse$.subscribe(observadorMouse$);

//fromEvent to keydown
const observableKey$ = fromEvent(document, 'keydown');
const observadorKey$ = {
  next: (value) => console.log('Keyboard', value.key),
}
observableKey$.subscribe(observadorKey$);

Diego Fernando Caviedes Camaho

student•

tengo una pregunta como capturo solo el primer evento de la tecla enter ejemplo para un Login

Marcelo Arias

teacher•

¡Hola Diego!

Usando el observable fromEvent de RxJS (en reemplazo a addEventListener) se puede aplicar de la siguiente manera:

import { fromEvent } from 'rxjs';

const enter$ = fromEvent(document, 'keydown')
  .pipe(
    filter(event => event.key === 'Enter')
  );

enter$.subscribe(event => {
  console.log('Tecla Enter presionada');
});

Diego Fernando Caviedes Camaho

student•

para capturar el primer evento seria con operador, first,take, takewhile aqui les dejo el codigo https://stackblitz.com/edit/angular-rxjs-fromevents-for-escape-key-d6znwh?file=src%2Fapp%2Fapp.component.ts

 const keyDowns$ = fromEvent(document, 'keydown').pipe(
     // filter((e: KeyboardEvent) => e.keyCode === 13),
      first()
      //takeWhile(conditicon)
      //take(2)
    );

    const observer = {
      next: (escpress) => {
        if (escpress.type === 'keydown') {
          // Do your thing
          console.log('escape key only');
        }
      },
    };

    keyDowns$.subscribe(observer);

Platzi Team

student•

FormEvent

Crea un observable que emite eventos de un determinado elemento.

Vamos al codigo:

import { fromEvent } from 'rxjs';

const onKeyDown$ = fromEvent(document, 'keydown');

En esta sección, se importa la función fromEvent de RxJS. Esta función permite crear un Observable a partir de un evento específico en un elemento del DOM.

Luego, se crea un Observable llamado onKeyDown$ utilizando fromEvent. Este Observable está configurado para escuchar el evento de tecla presionada (keydown) en todo el documento (document).

const observableKeyDown = {
  next: (event) => { console.log(event) },
};

Se define un objeto llamado observableKeyDown que tiene un método next. Este método se ejecutará cada vez que se emita un evento por parte del Observable. En este caso, el método simplemente imprime el evento en la consola

onKeyDown$.subscribe(observableKeyDown);

Finalmente, se suscribe el objeto observableKeyDown al Observable onKeyDown$ utilizando el método subscribe(). Esto significa que cada vez que se presione una tecla en el documento, el método next de observableKeyDown se ejecutará y el evento de tecla se imprimirá en la consola.

import { fromEvent } from "rxjs";

const onKey$ = fromEvent<KeyboardEvent>(document, "keydown"); //Se crea el observable que lanza un evento cuando se
//presione una tecla.

const observatorMouse = { //Se crea el observador que indica como usará la data obtenida.
	next: (event: KeyboardEvent) => {
		console.log("new event: ", event.key);
	},
	complete: () => {
		console.log("There is no more events");
	},
	error: (error: Error) => {
		console.log("Something went wrong: ", error.message);
	}
}

onKey$.subscribe(observatorMouse); //Se subscribe el observador al observable.

observableAlfa$.subscribe(observador);

//fromEvent to mousemove
const observableMouse$ = fromEvent(document, 'mousemove');
const observadorMouse$ = {
  next: (value) => console.log('Mouse', value),
}
observableMouse$.subscribe(observadorMouse$);

//fromEvent to keydown
const observableKey$ = fromEvent(document, 'keydown');
const observadorKey$ = {
  next: (value) => console.log('Keyboard', value.key),
}
observableKey$.subscribe(observadorKey$);

import { fromEvent } from 'rxjs';

const enter$ = fromEvent(document, 'keydown')
  .pipe(
    filter(event => event.key === 'Enter')
  );

enter$.subscribe(event => {
  console.log('Tecla Enter presionada');
});

 const keyDowns$ = fromEvent(document, 'keydown').pipe(
     // filter((e: KeyboardEvent) => e.keyCode === 13),
      first()
      //takeWhile(conditicon)
      //take(2)
    );

    const observer = {
      next: (escpress) => {
        if (escpress.type === 'keydown') {
          // Do your thing
          console.log('escape key only');
        }
      },
    };

    keyDowns$.subscribe(observer);

Observables: fromEvent

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle