집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 및 Bun을 사용한 WebSocket 브로드캐스팅

JavaScript 및 Bun을 사용한 WebSocket 브로드캐스팅

Susan Sarandon원래의: 2024-12-09 01:29:11226검색

WebSocket broadcasting with JavaScript and Bun

브로드캐스팅은 서버가 연결된 여러 클라이언트에 동시에 메시지를 보낼 수 있도록 하는 WebSocket의 가장 강력한 기능 중 하나입니다. 단일 클라이언트와 서버 간에 메시지가 교환되는 지점 간 통신과 달리 브로드캐스팅을 사용하면 단일 메시지가 클라이언트 그룹에 도달할 수 있습니다. 이는 실시간, 협업 및 대화형 애플리케이션에 없어서는 안 될 요소입니다.

방송이 중요한 이유

방송은 여러 사용자가 실시간으로 동일한 업데이트에 대해 동기화를 유지하거나 정보를 받아야 하는 시나리오에 필수적입니다. 예:

그룹 채팅 애플리케이션: 채팅방의 모든 참가자에게 메시지를 보냅니다.
공동 도구: 공유 문서 또는 콘텐츠 변경 사항에 대해 모든 사용자에게 업데이트합니다.
실시간 알림: 여러 구독자에게 속보, 주식 업데이트 또는 스포츠 경기 결과를 방송합니다.
온라인 게임: 여러 플레이어의 게임 상태 또는 작업을 동기화합니다.

이러한 경우 브로드캐스팅을 사용하면 각 클라이언트에 대해 개별 서버 호출을 요구하지 않고 연결된 모든 사용자의 동기화가 유지됩니다. 그렇지 않으면 비효율적이고 지연 시간이 발생하기 쉽습니다.

방송에 대한 두 가지 접근 방식

방송을 구현할 때 고려해야 할 두 가지 일반적인 전략이 있습니다.

모든 클라이언트(발신자 포함)에게 방송
발신자를 제외한 모든 고객에게 방송

모든 클라이언트(발신자 포함)에게 브로드캐스팅

이 접근 방식은 메시지를 보낸 채널을 포함하여 특정 채널에 연결된 모든 클라이언트에게 메시지를 보냅니다.

이 접근 방식은 그룹 채팅에서 메시지 확인 또는 업데이트를 표시하는 등 보낸 사람을 포함한 모든 클라이언트가 브로드캐스트를 수신해야 하는 상황에 적합합니다.

발신자를 제외한 모든 클라이언트에게 브로드캐스팅

이 경우 메시지는 보낸 사람을 제외한 모든 클라이언트에게 방송됩니다.

이 접근 방식은 작업을 다른 플레이어와 공유해야 하지만 작업을 수행하는 사람에게 다시 에코되지 않는 멀티플레이어 게임과 같이 보낸 사람이 브로드캐스트에서 자신의 메시지를 볼 필요가 없는 시나리오에 이상적입니다. .

두 방법 모두 특정 사용 사례가 있으며 Bun과 같은 도구를 사용하여 쉽게 구현할 수 있으므로 개발자는 최소한의 코드로 방송을 효율적으로 처리할 수 있습니다.

이 기사에서는 Bun을 사용하여 WebSocket 브로드캐스팅을 설정하는 방법을 살펴보고 강력한 실시간 애플리케이션을 구축하는 데 도움이 되는 두 가지 브로드캐스팅 접근 방식을 모두 보여줍니다.

WebSocket을 사용한 브로드캐스팅 코드

이 시리즈의 첫 번째 기사인 JavaScript와 Bun을 사용한 WebSocket에서는 클라이언트가 보낸 메시지에 응답하는 WebSocket 서버의 구조를 살펴보았습니다.

이 기사에서는 여러 고객에게 메시지를 브로드캐스팅할 수 있는 메커니즘인 채널 구독을 살펴보겠습니다.

전체 코드를 제시하는 것부터 시작하여 코드를 나누어 모든 관련 부분을 자세히 살펴보겠습니다.

broadcast.ts 파일 만들기:

console.log("? Hello via Bun! ?");
const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(Bun.file("./index.html"));
    if (url.pathname === "/surprise") return new Response("?");

    if (url.pathname === "/chat") {
      if (server.upgrade(req)) {
        return; // do not return a Response
      }
      return new Response("Upgrade failed", { status: 400 });
    }

    return new Response("404!");
  },
  websocket: {
    message(ws, message) {
      console.log("✉️ A new Websocket Message is received: " + message);
      ws.send("✉️ I received a message from you:  " + message);
      ws.publish(
        "the-group-chat",
        `? Message from ${ws.remoteAddress}: ${message}`,
      );
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.subscribe("the-group-chat");
      ws.send("? Welcome baby");
      ws.publish("the-group-chat", "? A new friend is joining the Party");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
      const msg = `A Friend has left the chat`;
      ws.unsubscribe("the-group-chat");
      ws.publish("the-group-chat", msg);
    }, // a socket is closed
    drain(ws) {
      console.log("DRAIN EVENT");
    }, // the socket is ready to receive more data
  },
});
console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);

setInterval(() => {
  const msg = "Hello from the Server, this is a periodic message!";
  server.publish("the-group-chat", msg);
  console.log(`Message sent to "the-group-chat": ${msg}`);
}, 5000); // 5000 ms = 5 seconds

다음을 통해 실행할 수 있습니다:

bun run broadcast.ts

이 코드는 브로드캐스팅을 도입하여 서버가 특정 채널의 모든 구독 클라이언트에게 메시지를 보낼 수 있도록 합니다. 또한 모든 클라이언트(발신자 포함)에게 브로드캐스트하는 것과 발신자를 제외하는 것을 구별합니다. 자세한 설명은 다음과 같습니다.

서버 초기화 중

const server = Bun.serve({
  port: 8080,
  ...
});

초기화 방법은 이전 글과 동일합니다.
서버는 포트 8080에서 수신 대기하며 이전 예와 유사하게 HTTP 요청을 처리하고 /chat에 대한 WebSocket 연결을 업그레이드합니다.

WebSocket에서 브로드캐스팅

방송을 사용하면 그룹 채팅과 같이 특정 채널을 구독하는 모든 고객에게 메시지를 보낼 수 있습니다.
코드가 이를 달성하는 방법은 다음과 같습니다.

채널 구독(공개 이벤트에서)

open(ws) {
  console.log("? A new Websocket Connection");
  ws.subscribe("the-group-chat");
  ws.send("? Welcome baby");
  ws.publish("the-group-chat", "? A new friend is joining the Party");
}

ws.subscribe(channel): 클라이언트를 the-group-chat 채널에 구독합니다. 이제 이 채널의 모든 클라이언트는 방송되는 메시지를 받을 수 있습니다.
ws.send(...): 클라이언트를 개별적으로 환영합니다.
ws.publish(channel, message): 채널의 모든 클라이언트에게 메시지를 브로드캐스트합니다.

메시지 브로드캐스트(메시지 이벤트에서 클라이언트의 메시지에 대한 응답/브로드캐스트)

message(ws, message) {
  console.log("✉️ A new Websocket Message is received: " + message);
  ws.send("✉️ I received a message from you:  " + message);
  ws.publish("the-group-chat", `? Message from ${ws.remoteAddress}: ${message}`);
}

클라이언트로부터 메시지를 받은 경우:

발신자는 ws.send(...)를 통해 확인을 받습니다.
메시지는 ws.publish(...)를 사용하여 "the-group-chat"의 모든 클라이언트(발신자 제외)에게 브로드캐스팅됩니다.

참고: ws 개체에 게시 메서드를 호출하기 때문에 발신자는 브로드캐스트 메시지를 받지 못합니다. 보낸 사람을 포함하려면 서버 개체를 사용해야 합니다.

연결 해제 시 구독 취소 및 브로드캐스팅(종료 이벤트 시)

close(ws, code, message) {
  console.log("⏹️ A Websocket Connection is CLOSED");
  const msg = `A Friend has left the chat`;
  ws.unsubscribe("the-group-chat");
  ws.publish("the-group-chat", msg);
}

클라이언트 연결이 끊어진 경우:

ws.unsubscribe(channel): 채널 구독에서 클라이언트를 제거합니다.
채널에 남아 있는 모든 클라이언트에게 연결 끊김을 알리는 메시지가 방송됩니다.

모든 클라이언트에 대한 정기적인 서버 메시지

console.log("? Hello via Bun! ?");
const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(Bun.file("./index.html"));
    if (url.pathname === "/surprise") return new Response("?");

    if (url.pathname === "/chat") {
      if (server.upgrade(req)) {
        return; // do not return a Response
      }
      return new Response("Upgrade failed", { status: 400 });
    }

    return new Response("404!");
  },
  websocket: {
    message(ws, message) {
      console.log("✉️ A new Websocket Message is received: " + message);
      ws.send("✉️ I received a message from you:  " + message);
      ws.publish(
        "the-group-chat",
        `? Message from ${ws.remoteAddress}: ${message}`,
      );
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.subscribe("the-group-chat");
      ws.send("? Welcome baby");
      ws.publish("the-group-chat", "? A new friend is joining the Party");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
      const msg = `A Friend has left the chat`;
      ws.unsubscribe("the-group-chat");
      ws.publish("the-group-chat", msg);
    }, // a socket is closed
    drain(ws) {
      console.log("DRAIN EVENT");
    }, // the socket is ready to receive more data
  },
});
console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);

setInterval(() => {
  const msg = "Hello from the Server, this is a periodic message!";
  server.publish("the-group-chat", msg);
  console.log(`Message sent to "the-group-chat": ${msg}`);
}, 5000); // 5000 ms = 5 seconds

5초마다 서버는 server.publish(...)를 사용하여 "the-group-chat" 채널의 모든 클라이언트에게 메시지를 브로드캐스트합니다. 여기서는 서버 객체를 사용하고 있습니다.

주요 방법

ws.subscribe(channel): 그룹 통신을 위해 현재 WebSocket 클라이언트를 채널에 구독합니다.
ws.publish(channel, message): 지정된 채널의 모든 클라이언트(발신자 제외)에게 메시지를 브로드캐스트합니다.
server.publish(channel, message): ws.publish와 유사하지만 모든 구독 클라이언트(발신자 포함)에게 브로드캐스팅하기 위해 서버 수준에서 사용됩니다.
ws.unsubscribe(channel): 채널에서 현재 클라이언트를 제거합니다.

예제 흐름

클라이언트가 /chat에 연결하여 "the-group-chat"을 구독합니다.
클라이언트가 서버에 메시지를 보냅니다.
- 메시지가 보낸 사람에게 다시 에코됩니다.
- 서버는 채널의 다른 모든 클라이언트에게 메시지를 브로드캐스트합니다.
클라이언트 연결이 끊어지면:
- 채널 구독이 취소되었습니다.
- 서버는 나머지 클라이언트에게 연결 끊김을 알립니다.
5초마다 서버는 모든 클라이언트에게 정기적인 브로드캐스트 메시지를 보냅니다.

결론

WebSocket은 실시간 대화형 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 기존 HTTP 통신과 달리 WebSocket은 서버와 연결된 클라이언트 간의 인스턴트 메시지 교환을 가능하게 하는 지속적인 양방향 채널을 제공합니다. 따라서 실시간 채팅, 공동 작업 도구, 게임 또는 지연 시간이 짧은 통신이 중요한 모든 애플리케이션과 같은 시나리오에 이상적입니다.

이 기사(및 시리즈)에서는 Bun을 사용하여 WebSocket 서버를 설정하고, 클라이언트 연결을 처리하고, 구독한 클라이언트에 메시지를 브로드캐스팅하는 기본 사항을 살펴보았습니다. 또한 클라이언트가 채널에 참여하고, 메시지를 보내고, 다른 클라이언트와 서버 자체로부터 업데이트를 받을 수 있는 간단한 그룹 채팅 시스템을 구현하는 방법도 시연했습니다.

Bun에 내장된 WebSocket 지원과 구독, 게시, 구독 취소 등의 기능을 활용하면 실시간 커뮤니케이션을 매우 쉽게 관리할 수 있습니다. 정기적인 업데이트 전송, 모든 클라이언트에 대한 브로드캐스팅, 특정 채널 관리 등 WebSocket은 이러한 요구 사항을 처리할 수 있는 효율적이고 확장 가능한 방법을 제공합니다.

위 내용은 JavaScript 및 Bun을 사용한 WebSocket 브로드캐스팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript Object for include break using Event channel this http websocket Sports Game Other

성명：

이전 기사：변수 값을 사용하여 JavaScript 개체 속성을 동적으로 생성하려면 어떻게 해야 합니까?다음 기사：변수 값을 사용하여 JavaScript 개체 속성을 동적으로 생성하려면 어떻게 해야 합니까?