Threads.js 中的 Observable 使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00332/article/details/148577504

Threads.js 中的 Observable 使用指南

threads.js 🧵 Make web workers & worker threads as simple as a function call. 项目地址: https://gitcode.com/gh_mirrors/th/threads.js

前言

在现代 JavaScript 开发中，多线程编程变得越来越重要。Threads.js 提供了一种优雅的方式来处理 Web Workers 和线程间通信。本文将重点介绍如何在 Threads.js 中使用 Observable 模式来实现工作线程与主线程之间的数据流传输。

Observable 基础概念

什么是 Observable

Observable 是一种基于推送的数据流模式，它允许数据生产者向消费者推送多个值。在 Threads.js 中，Observable 提供了一种优雅的方式来处理工作线程向主线程发送连续数据的情况。

基本用法示例

让我们看一个简单的计数器示例，展示如何在工作线程中返回 Observable：

// 主线程代码
import { spawn, Worker } from "threads"

const counter = await spawn(new Worker("./workers/counter"))

counter().subscribe(newCount => {
  console.log(`计数器增加到:`, newCount)
})

// 工作线程代码
import { Observable } from "observable-fns"
import { expose } from "threads/worker"

function startCounting() {
  return new Observable(observer => {
    for (let currentCount = 1; currentCount <= 10; currentCount++) {
      observer.next(currentCount)  // 推送新值
    }
    observer.complete()  // 完成数据流
  })
}

expose(startCounting)

热 Observable 特性

Threads.js 中的 Observable 有一个重要特性：它们是"热"的（Hot Observable）。这意味着：

多个订阅者将共享同一个数据流
后订阅的观察者不会收到订阅前已经发出的值
不会因为多次订阅而重复执行数据源逻辑

Observable Subject 进阶用法

Subject 简介

Subject 是一种特殊的 Observable，它既是 Observable 又是 Observer。这意味着：

可以像 Observable 一样被订阅
可以像 Observer 一样手动推送新值

import { Subject } from "threads/observable"

const subject = new Subject()

// 作为 Observable 被订阅
const subscription = subject.subscribe(value => {
  console.log("收到值:", value)
})

// 作为 Observer 推送值
subject.next("Hello")
subject.next("World")
subject.complete()

subscription.unsubscribe()

创建只读 Observable

有时我们希望暴露 Observable 但不暴露 Subject 的控制方法，可以使用 Observable.from()：

const subject = new Subject()
const readOnlyObservable = Observable.from(subject)

// readOnlyObservable 只有 subscribe 方法
// 不能直接调用 next/complete/error

实际应用：实时计算最小最大值

让我们看一个更实际的例子，实现一个实时计算最小最大值的 Worker：

// 主线程代码
import { spawn, Worker } from "threads"

const minmax = await spawn(new Worker("./workers/minmax"))

// 订阅值变化
minmax.values().subscribe(({ min, max }) => {
  console.log(`最小值: ${min} | 最大值: ${max}`)
})

// 添加数值
await minmax.add(2)
await minmax.add(3)
await minmax.add(4)
await minmax.add(1)
await minmax.add(5)

// 完成计算
await minmax.finish()

// 工作线程代码
import { Observable, Subject } from "threads/observable"
import { expose } from "threads/worker"

let max = -Infinity
let min = Infinity
let subject = new Subject()

const minmax = {
  finish() {
    subject.complete()
    subject = new Subject()  // 重置 Subject 以备下次使用
  },
  
  add(value) {
    max = Math.max(max, value)
    min = Math.min(min, value)
    subject.next({ max, min })  // 推送最新计算结果
  },
  
  values() {
    return Observable.from(subject)  // 暴露只读 Observable
  }
}

expose(minmax)