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.