RxJS로 이벤트 일괄 처리

저게 뭐야

대략적으로 말하면 이벤트 일괄 처리는 일정 시간 동안 이벤트를 누적하여 나중에 한 번에 모두 처리하는 것입니다.

두 가지 잘 알려진 전략을 사용하거나 결합하여 버퍼링된 이벤트 묶음을 플러시하고 처리할 시기를 이해할 수 있습니다.

이벤트 수가 임계값에 도달하면

간격 사용 — 예: 10초마다 이벤트를 플러시합니다.

그것을 사용하는 이유

이벤트 일괄 처리는 다음에 유용할 수 있습니다.

예를 들어 영구 저장소에 대한 쓰기 수를 줄이거나 네트워크를 통해 전송되는 데이터의 양을 최적화하기 위한 성능상의 이유;

집계 — 예. 링크별로 그룹화하고 페이지 방문 수를 계산합니다.

어떻게

RxJS을 사용하여 JavaScript에서 이벤트 일괄 처리를 구현하는 것은 쉬운 일입니다.

노드 예제부터 시작하겠습니다.

const EventEmitter = require('events');
const { fromEvent, bufferCount } = require('rxjs');

// I assume you already have an instance of EventEmitter in your app. 
// In case I'm wrong, let's create the one.
const eventEmitter = new EventEmitter();

// listen to an event called `something-good-happened`
fromEvent(eventEmitter, 'something-good-happened')
   // accumulate events
  .pipe(
    // and flush them every time it's number reaches 3
    bufferCount(3),
    // let's log it
    tap(() => {
      console.log(
        `Great! The number of good things happened in a row reached ${events.length}. It's time to celebrate.`
      );
      console.log(events);
    })
  )
  // process the batch
  .subscribe((events) => {
    const goodThingsByUser = {};
    for (const event of events) {
        goodThingsByUser[event.userId] = (goodThingsByUser[event.userId] ?? 0) + 1;
    }
    // reportGoodThingsDone(goodThingsByUser);
  });

물론 브라우저의 예입니다.

import { fromEvent, bufferTime, filter } from "rxjs";

// listen to clicks on the whole document
const clicks$ = fromEvent(
  document.documentElement,
  "click",
  // selecte only properties we need
  (event) => ({
    type: event.type,
    time: new Date(),
    x: event.x,
    y: event.y
  })
);

clicks$
  .pipe(
    // flush events every 1 second
    bufferTime(1000),
    // move next only if there is at least one event
    filter((events) => events.length > 0)
  )
  // process the batch
  .subscribe((events) => {
    fetch("/my-analytics", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(events)
    });
  });

라이브 예제가 하나 더 있습니다here.

묘책은 없으며 각 솔루션에는 단점이 있습니다.
대규모 이벤트를 대량으로 처리하면 기본 스레드를 차단하기 때문에 앱의 성능이 크게 저하될 수 있습니다. 어떤 대가를 치르더라도 차단해야 합니다avoid. 많은 데이터를 처리할 것으로 예상되는 경우 메시지 큐 사용을 고려하십시오. 예를 들어 BullMQ을 보십시오.

읽어 주셔서 감사합니다!

프로젝트에 이벤트 일괄 처리를 적용한 몇 가지 예를 공유해 주시겠습니까?