WebSockets & Realtime Systems Programming · 강의

양방향 스트리밍과 흐름 제어

양방향으로 이어지는 데이터 스트림을 관리하고 기본적인 흐름 제어를 구현하는 방법을 이해합니다.

양방향 스트리밍과 흐름 제어은(는) CoddyKit의 무료 WebSockets & Realtime Systems Programming 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 WebSockets & Realtime Systems Programming 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. WebSockets & Realtime Systems Programming 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Beyond Simple Messages

So far, we've mostly thought about WebSockets as a way to send discrete messages back and forth. But what if you need to transfer a continuous stream of data?

This is where bidirectional streaming comes in. It's about maintaining a steady, ongoing flow of data simultaneously in both directions, not just isolated messages.

Why Bidirectional Streaming Matters

Imagine scenarios like:

Live Audio/Video: Sending and receiving real-time media streams.
Large File Transfers: Uploading or downloading big files in chunks.
Real-time Analytics: Continuous updates for dashboards with high data volume.

For these, a constant 'river' of data is more efficient than many small, separate 'droplets'.

The Challenge of Data Flow

What happens if one side sends data much faster than the other can process it? Think of a firehose pouring water into a small cup.

The receiver's temporary storage (called a buffer) will quickly fill up. This can lead to:

Data loss
System slowdowns
Memory exhaustion

This is a critical problem for continuous data flow.

Introducing Flow Control

To prevent overwhelming a receiver, we use Flow Control. It's a mechanism that manages the rate of data transmission between a sender and a receiver.

Its main goal is to ensure the sender doesn't send data faster than the receiver can handle, making the communication smooth and reliable.

Key Flow Control Concepts

Flow control relies on a few core ideas:

Buffering: Temporary storage for data that's been sent but not yet processed by the receiver.
Backpressure: A signal from the receiver to the sender, indicating it needs to slow down or pause.
Pause/Resume: Explicit commands or implicit behaviors to halt and restart data flow.

Think of it like a traffic light for your data stream.

WebSocket Buffering in Node.js

When you use ws.send(data) in Node.js, the ws library manages an internal buffer for outgoing messages.

The ws.send() method returns a boolean:

true: Data was sent immediately or buffered successfully.
false: The internal buffer is full. You should pause sending new data.

You can also check ws.bufferedAmount, which tells you how many bytes are currently in the outgoing buffer.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  // Check buffer size before sending
  const currentBuffer = ws.bufferedAmount;
  console.log(`Current buffer size: ${currentBuffer} bytes`);

  const ok = ws.send('Hello, streaming!');
  if (!ok) {
    console.log('Buffer full right away!');
  } else {
    console.log(`Message sent. New buffer size: ${ws.bufferedAmount} bytes`);
  }

  ws.on('message', message => {
    console.log(`Received: ${message}`);
  });

  ws.on('close', () => console.log('Client disconnected'));
});

console.log('Server running on port 8080');

Server-Side Backpressure (Part 1)

To implement flow control, your server needs to react when its outgoing buffer is full. If ws.send() returns false, you must stop sending data until the buffer clears.

This prevents the server from consuming too much memory or overloading the client's connection.

Here's the core idea of pausing:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  let messageCounter = 0;
  let isPaused = false;

  function sendLotsOfData() {
    if (isPaused) return; // Don't send if paused

    while (messageCounter < 1000) { // Send 1000 messages
      const data = `Data chunk ${messageCounter++}`;
      const ok = ws.send(data);

      if (!ok) {
        console.log('Buffer full! Pausing send...');
        isPaused = true; // Set flag to pause
        break; // Stop sending for now
      }
    }
    if (messageCounter >= 1000) {
      console.log('All data chunks sent!');
    }
  }

  sendLotsOfData(); // Start sending

  ws.on('message', msg => {}); // Placeholder
  ws.on('close', () => {}); // Placeholder
});

Server-Side Backpressure (Part 2)

When the buffer clears enough for more data, the ws library emits a 'drain' event. This is your cue to resume sending!

Combining ws.send()'s return value with the 'drain' event creates robust server-side flow control.

Try running this complete example. You'll see 'Buffer full!' and 'Buffer drained!' messages as flow control kicks in.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected. Starting data stream...');

  let messageCounter = 0;
  let isSending = false; // Flag to manage sending state

  function streamData() {
    if (isSending) return; // Already sending, wait for drain or completion

    isSending = true;
    while (messageCounter < 500) { // Simulate sending 500 messages
      const data = `Stream chunk ${messageCounter++} from server.`;
      const ok = ws.send(data);

      if (!ok) {
        console.log(`Buffer full (${ws.bufferedAmount} bytes), pausing send...`);
        isSending = false; // Stop sending until drain
        break; // Exit loop, wait for drain
      }
    }
    if (messageCounter >= 500) {
      console.log('Finished sending all stream chunks.');
      isSending = false;
    }
  }

  streamData(); // Start sending data after connection

  ws.on('drain', () => {
    console.log('Buffer drained, resuming send.');
    streamData(); // Resume sending
  });

  ws.on('message', message => {
    console.log(`Received from client: ${message}`);
    // In a real app, client might also stream data here,
    // requiring similar flow control logic on the client side.
  });

  ws.on('close', () => console.log('Client disconnected'));
  ws.on('error', error => console.error('WebSocket error:', error));
});

console.log('WebSocket server started on port 8080. Connect a client to see streaming.');

Client-Side Flow Control

While the server-side example focuses on outgoing data, clients also need to manage incoming streams and potentially their own outgoing streams.

On the client (browser JavaScript):

For receiving data, you might buffer incoming messages if processing is slow.
For sending large data (e.g., file uploads), you'd send in chunks and might need server-sent acknowledgments or explicit 'pause' signals to implement client-side backpressure.

The core principles remain the same: don't send faster than the receiver can handle.

Quick Check: Flow Control Logic

Consider a Node.js WebSocket server trying to send a large amount of data to a client. Which of the following statements about implementing server-side flow control are TRUE?

Recap: Mastering Realtime Streams

In this lesson, we explored bidirectional streaming and the crucial concept of flow control in WebSockets.

Bidirectional streaming allows for continuous, simultaneous data flow, ideal for applications like live video or large data transfers.
Flow control, using mechanisms like buffering, backpressure, and the 'drain' event, prevents overwhelming either the sender or receiver.
Implementing proper flow control is essential for building robust, high-performance, and reliable real-time applications.

Keep these principles in mind as you build your next streaming WebSocket application!

자주 묻는 질문

“양방향 스트리밍과 흐름 제어” 강의는 무료인가요?

네 — “양방향 스트리밍과 흐름 제어” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 WebSockets & Realtime Systems Programming 강의 전체를 잠금 해제할 수 있습니다. WebSockets & Realtime Systems Programming 강의에는 총 4개의 강의가 포함되어 있습니다.

“양방향 스트리밍과 흐름 제어”에서 뭘 배우나요?

양방향으로 이어지는 데이터 스트림을 관리하고 기본적인 흐름 제어를 구현하는 방법을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 WebSockets & Realtime Systems Programming을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

WebSockets & Realtime Systems Programming을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 WebSockets & Realtime Systems Programming은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“양방향 스트리밍과 흐름 제어” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 WebSockets & Realtime Systems Programming 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 WebSockets & Realtime Systems Programming 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← WebSockets & Realtime Systems Programming(으)로 돌아가기