키 입력 스트림 위의 실시간 검색

FxDart 승 async

요구사항

검색창이 모든 키 입력을 Dart Stream으로 내보냅니다 — 사용자가 darts를 입력해 가는 과정이며, 일부 값은 키 자동 반복으로 중복됩니다(아래 코드에 고정된 시퀀스). 이를 백엔드 검색으로 바꾸세요: 두 글자 미만인 쿼리는 건너뛰고, 같은 쿼리는 두 번 검색하지 않으며, 검색된 쿼리 네 개가 되면 멈추고, 각 쿼리를 히트 수 및 최상위 히트와 함께 출력하고, 실제로 이루어진 백엔드 호출 수도 출력하세요.

fxStream을 쓰면 키 입력 스트림이 파이프라인이 되고, 각 규칙이 연산자 하나가 됩니다: 길이 하한에는 filter, 중복 제거에는 uniq, 예산 제한에는 take(4), 그 다음 map이 검색을 수행합니다. take가 검색 단계보다 앞에 있고 체인이 풀 기반(pull-based)이므로, 정확히 네 번의 백엔드 호출만 일어나고 스트림의 나머지는 전혀 소비되지 않습니다.

예상 출력

live search over the keystroke stream:
  'da' -> 5 hits (top: dart language tour)
  'dar' -> 5 hits (top: dart language tour)
  'dart' -> 5 hits (top: dart language tour)
  'darts' -> 1 hit (top: darts scoring rules)
backend searches: 4

나란히 보기

네이티브 Dart

/// A user typing toward "darts" — some keys repeat (autorepeat / jitter).
const typed = ['d', 'da', 'da', 'dar', 'dart', 'dart', 'darts', 'dart s'];

const titles = [
  'dart language tour', 'dart streams deep dive', 'darts scoring rules',
  'dart string interpolation', 'dartpad tips', 'flutter widgets',
];

int searches = 0;

/// The search backend: prefix match over titles.
Future<List<String>> fetchMatches(String q) async {
  searches++;
  await Future.delayed(const Duration(milliseconds: 10));
  return [for (final t in titles) if (t.startsWith(q)) t];
}

/// The keystroke source: a real Dart Stream, one key every 10 ms.
Stream<String> keystrokes() async* {
  for (final k in typed) {
    await Future.delayed(const Duration(milliseconds: 10));
    yield k;
  }
}

Future<void> main() async {
  final results = <(String, List<String>)>[];
  final seen = <String>{};
  await for (final q in keystrokes()) {
    if (q.length < 2 || !seen.add(q)) continue;
    results.add((q, await fetchMatches(q)));
    if (results.length == 4) break;
  }
  print('live search over the keystroke stream:');
  for (final (q, hits) in results) {
    print("  '$q' -> ${hits.length} hit${hits.length == 1 ? '' : 's'} "
        '(top: ${hits.first})');
  }
  print('backend searches: $searches');
}

FxDart

import 'package:fxdart/fxdart.dart';

/// A user typing toward "darts" — some keys repeat (autorepeat / jitter).
const typed = ['d', 'da', 'da', 'dar', 'dart', 'dart', 'darts', 'dart s'];

const titles = [
  'dart language tour', 'dart streams deep dive', 'darts scoring rules',
  'dart string interpolation', 'dartpad tips', 'flutter widgets',
];

int searches = 0;

Future<void> main() async {
  final results = await fxStream(keystrokes())
      .filter((q) => q.length >= 2)
      .uniq()
      .take(4)
      .map((q) async => (q, await fetchMatches(q)))
      .toList();
  print('live search over the keystroke stream:');
  for (final (q, hits) in results) {
    print("  '$q' -> ${hits.length} hit${hits.length == 1 ? '' : 's'} "
        '(top: ${fx(hits).head()})');
  }
  print('backend searches: $searches');
}

차이가 나는 이유

네이티브 await for 루프는 간결합니다 — 하지만 규칙들이 어디로 갔는지 보세요: 길이 하한과 중복 제거가 하나의 continue 조건식(q.length < 2 || !seen.add(q), 조건문 안에 변경을 몰래 끼워 넣는 방식)을 공유하고, 예산 제한은 break가 붙은 카운터 검사입니다. 세 가지 정책이 두 개의 guard 절 안에 압축되어 있으니, 네 번째 규칙을 추가하려면 그것들을 다시 풀어헤쳐야 합니다. 파이프라인은 규칙마다 이름 붙은 연산자 하나씩을, 적용되는 순서 그대로 씁니다. 그리고 같은 체인이 실제 위젯의 텍스트 변경 스트림도 수정 없이 그대로 받아들일 것입니다. 한 가지 솔직히 짚어둘 점은: fxdart의 debounce는 스트림 연산자가 아니라 함수 호출 유틸리티여서, 이벤트가 잦은 스트림을 시간 기준으로 잠재우는 일은 여기서 보여준 네 규칙과는 다른 도구라는 것입니다.

벤치마크

Apple M1 Max, RAM 32 GB · Dart 3.12.2 (AOT 컴파일) · 2026-08-24

비동기 예제입니다. 대표 스케일이 1,000,000이 아니라 N = 100,000인 이유 — 원소 하나마다 양쪽 모두 이벤트 루프를 한 바퀴 돌아야 하므로, 실제 await 백만 번은 파이프라인이 아니라 Dart 이벤트 루프를 몇 분씩 재게 됩니다. 지연은 0으로 두고 예제의 동시성 제한은 그대로 유지합니다. 막대가 비교하는 것은 파이프라인 기계 장치 자체입니다.

N = 100

시간 무승부

네이티브 Dart 52 µs

FxDart 71 µs

최대 메모리 무승부

네이티브 Dart 16.4 MB

FxDart 16.6 MB

N = 10,000

시간 네이티브 승

네이티브 Dart 4.44 ms

FxDart 5.44 ms

최대 메모리 무승부

네이티브 Dart 23.1 MB

FxDart 23.2 MB

N = 100,000

시간 네이티브 승

네이티브 Dart 45.2 ms

FxDart 56.0 ms

최대 메모리 무승부

네이티브 Dart 52.8 MB

FxDart 54.8 MB

막대는 사이드별로 새 프로세스에서 반복 측정한 중앙값입니다(작은 N은 타이머 해상도를 위해 배치 처리). 두 사이드가 서로 5% 이내이거나 — 사람이 지각할 수 없는 차이인 0.6ms 이내이면 — 무승부로 칩니다. 상대 차이가 근소한 경우는 최대 5회까지 다시 측정합니다. 앱에서는 어느 막대가 짧든 몇 밀리초 이하의 차이는 사용자에게 보이지 않습니다. 메모리는 프로세스 최대 RSS입니다. Dart VM과 데이터셋은 양쪽이 동일하므로, 두 막대의 차이가 곧 파이프라인 자체가 붙들고 있는 양입니다.