WebSockets & Realtime Systems Programming · 강의

클라이언트에 메시지 브로드캐스트

서버에서 연결된 모든 클라이언트 또는 특정 클라이언트로 메시지를 보내는 방법을 배웁니다.

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

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

What is Broadcasting?

Realtime applications often need to send updates to many users at once. Imagine a live sports score or a chat room.

Broadcasting is when your server sends a single message that is delivered to all currently connected clients.

Why Broadcast Messages?

Broadcasting is a fundamental pattern for many interactive applications:

Live Updates: Stock prices, news alerts, sensor data.
Chat Rooms: New messages visible to all participants.
Notifications: System-wide alerts to all active users.
Multiplayer Games: Player movements, game state changes for all players.

Server's Client List

To broadcast, your WebSocket server needs to know who's connected. The ws library (our Node.js WebSocket server library) automatically keeps track of all active connections.

When a client connects, its WebSocket object is added to an internal list. When it disconnects, it's removed.

Accessing Connected Clients

The ws library exposes the wss.clients property. This is a JavaScript Set containing all currently connected WebSocket client objects.

We can iterate over this Set to send messages to each individual client.

Implementing Full Broadcast

Here's how to modify your server to broadcast any message it receives to all connected clients:

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

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

  ws.on('message', message => {
    // Convert Buffer to string for display/processing
    const msg = message.toString();
    console.log(`Received: ${msg}`);
    
    // Broadcast the received message to all connected clients
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`Broadcast: ${msg}`);
      }
    });
    
    // Also send back to the sender as confirmation
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(`You sent: ${msg}`);
    }
  });

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

  ws.send('Welcome to the broadcast server!');
});

console.log('WebSocket server started on port 8080');

Broadcast Code Walkthrough

Let's break down the broadcast logic:

wss.clients.forEach(client => { ... }): This loop goes through every client in the connected set.
if (client !== ws && client.readyState === WebSocket.OPEN): We check if the client is not the sender (to avoid echoing back to them twice) and if their connection is still open.
client.send(`Broadcast: ${msg}`);: This is the magic! It sends the message to that specific client.

Testing the Broadcast

To test this, start your Node.js server. Then, open multiple browser tabs or client applications, all connecting to ws://localhost:8080.

When you send a message from one client, you should see it appear on all other connected clients!

Targeted Messaging

Broadcasting is powerful, but what if you need to send a message to just one or a few specific clients, not everyone?

This is called targeted messaging. Examples include private chat messages, direct user notifications, or status updates for specific admin users.

Identifying Specific Clients

The ws library doesn't inherently give clients unique IDs you can use for targeting. You'll need to implement this yourself:

When a client connects, assign it a unique ID (e.g., a UUID).
Store this ID along with the ws object in a Map or object on your server.
When a client sends a message that requires a targeted response, it can include its ID.

Simple Targeted Example

For a basic example, let's make a server that *only* sends a message back to the client that sent it (a direct echo). This demonstrates sending to a single ws object.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8081 }); // Use a different port

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

  ws.on('message', message => {
    const msg = message.toString();
    console.log(`Received: ${msg}`);
    
    // Send the message back ONLY to the client that sent it
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(`You said: ${msg}`);
    }
  });

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

  ws.send('Welcome! I will only talk directly to you.');
});

console.log('Targeted WebSocket server started on port 8081');

Broadcasting Check

You're building a live chat application. When a user sends a message, you want *all* other users in the same chat room to see that message.

Recap & Next Steps

Fantastic work! You've mastered how to send messages from your Node.js WebSocket server:

Broadcasting: Sending a message to all connected clients by looping through wss.clients.
Targeted Messaging: Sending to a specific client using its individual ws object.

These techniques are crucial for building dynamic and interactive realtime applications. Next, we'll dive into how clients connect and interact with these server-side messages!

자주 묻는 질문

“클라이언트에 메시지 브로드캐스트” 강의는 무료인가요?

네 — “클라이언트에 메시지 브로드캐스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

Node.js 프로젝트 설정
서버 측 로직 구현
클라이언트에 메시지 브로드캐스트
방과 채널 관리

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