Repeater.js：构建安全异步迭代器的利器-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01025/article/details/142009382

Repeater.js：构建安全异步迭代器的利器

repeaterThe missing constructor for creating safe async iterators项目地址:https://gitcode.com/gh_mirrors/re/repeater

项目介绍

在现代JavaScript开发中，异步编程已经成为不可或缺的一部分。然而，JavaScript原生并未提供一个简单且安全的方式来创建和管理异步迭代器。为了填补这一空白，Repeater.js应运而生。Repeater.js是一个开源库，旨在为开发者提供一个简单、高效的工具，用于创建安全的异步迭代器。无论是在前端还是后端，Repeater.js都能帮助开发者轻松处理复杂的异步数据流。

项目技术分析

Repeater.js的核心模块不依赖任何外部库，但其功能依赖于一些JavaScript内置的全局对象和符号，包括：

Promise
WeakMap
Symbol
- Symbol.iterator
- Symbol.asyncIterator

此外，Repeater.js在处理异步操作时，充分利用了async/await和for await…of语法。对于不支持这些特性的环境，开发者可以通过Babel或TypeScript进行代码转译，以确保兼容性。

项目及技术应用场景

Repeater.js的应用场景非常广泛，以下是几个典型的例子：

1. 定时器与时间戳记录

通过Repeater.js，开发者可以轻松创建一个定时器，定期记录时间戳并输出。这在需要监控时间变化或定时任务的场景中非常有用。

import { Repeater } from "@repeaterjs/repeater";

const timestamps = new Repeater(async (push, stop) => {
  push(Date.now());
  const interval = setInterval(() => push(Date.now()), 1000);
  await stop;
  clearInterval(interval);
});

(async function() {
  let i = 0;
  for await (const timestamp of timestamps) {
    console.log(timestamp);
    i++;
    if (i >= 10) {
      console.log("ALL DONE!");
      break; // 触发clearInterval
    }
  }
})();

2. WebSocket消息处理

在处理WebSocket通信时，Repeater.js可以帮助开发者将WebSocket消息流转换为异步迭代器，从而简化消息处理逻辑。

import { Repeater } from "@repeaterjs/repeater";

const socket = new WebSocket("ws://echo.websocket.org");
const messages = new Repeater(async (push, stop) => {
  socket.onmessage = (ev) => push(ev.data);
  socket.onerror = () => stop(new Error("WebSocket error"));
  socket.onclose = () => stop();
  await stop;
  socket.close();
});

(async function() {
  for await (const message of messages) {
    console.log(message);
    if (message === "close") {
      console.log("Closing!");
      break; // 关闭WebSocket
    }
  }
})();

socket.onopen = () => {
  socket.send("hello"); // "hello"
  socket.send("world"); // "world"
  socket.send("close"); // "close", "Closing!"
};

3. 监听Konami Code

Repeater.js还可以用于监听特定按键序列，例如经典的Konami Code。当检测到特定按键序列时，可以触发相应的操作。

import { Repeater } from "@repeaterjs/repeater";

const keys = new Repeater(async (push, stop) => {
  const listener = (ev) => {
    if (ev.key === "Escape") {
      stop();
    } else {
      push(ev.key);
    }
  };
  window.addEventListener("keyup", listener);
  await stop;
  window.removeEventListener("keyup", listener);
});

const konami = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"];

(async function() {
  let i = 0;
  for await (const key of keys) {
    if (key === konami[i]) {
      i++;
    } else {
      i = 0;
    }
    if (i >= konami.length) {
      console.log("KONAMI!!!");
      break; // 移除keyup监听器
    }
  }
})();

4. 将Observable转换为异步迭代器

对于使用RxJS等库的开发者，Repeater.js可以将Observable转换为异步迭代器，从而简化数据流的处理。

import { Subject } from "rxjs";
import { Repeater } from "@repeaterjs/repeater";

const observable = new Subject();
const repeater = new Repeater(async (push, stop) => {
  const subscription = observable.subscribe({
    next: (value) => push(value),
    error: (err) => stop(err),
    complete: () => stop(),
  });
  await stop;
  subscription.unsubscribe();
});

(async function() {
  try {
    for await (const value of repeater) {
      console.log("Value: ", value);
    }
  } catch (err) {
    console.log("Error caught: ", err);
  }
})();
observable.next(1);
// Value: 1
observable.next(2);
// Value: 2
observable.error(new Error("Hello from observable"));
// Error caught: Error: Hello from observable