Skip to content

What is a Stream?

Definition of Stream

A "stream" refers to a flow of data that occurs sequentially over time. It can be viewed as a collection of data appearing one after another in a certain order.

Examples of Typical Streams in Traditional Programming

  • Data from file reads (e.g., ReadableStream in Node.js)
  • Network communications (e.g., HTTP responses)
  • User input and events (mouse moves, clicks, keyboard inputs)

Streams in RxJS

RxJS uses Observable to handle such data that occurs over time as a stream. Observable is a mechanism for abstracting asynchronous data, synchronous data, events, and time-based processing as "streams".

Advantages of Observable

  • Can be described in a type-safe manner (TypeScript affinity)
  • Declarative expression of data flow
  • Operation chain by pipe() is possible
  • Can subscribe explicitly by subscribe()
  • Cancelable by unsubscribe()

Comparison with Conventional Streams

FeatureConventional StreamsRxJS Observable
TargetTends to be limited to files/networks, etc.Arbitrary asynchronous/event/state change
Event handlingHandled by event listeners on a case-by-case basisStreaming with fromEvent
CancelDifferent methodsUnified management with unsubscribe()
Composition/ConversionSeparate implementation with procedural codeConcise description with operators (map, filter, etc.)

Relationship with Observer & Subscription

  • Observable: Source of data (source of stream)
  • Observer: Receiver of data (with next, error, complete)
  • Subscription: Control handle for subscription (subscribe, unsubscribe, resource management)

Observable and Observer are connected through callbacks and controlled by Subscription.

Basic Relationship Diagram

Summary

The concept of "streams," which is at the core of RxJS, is a powerful weapon when dealing with asynchronous processing. Observable allows you to handle various data sources in a unified manner and describe data flows in a declarative and flexible manner.

Relationship to Event Processing

In RxJS, DOM events can also be handled as streams using fromEvent. The concept of a stream becomes clearer by comparing the differences with conventional event listeners.

TIP

See Streaming Events for a comparison of traditional event processing and RxJS with actual code.

Released under the CC-BY-4.0 license.