집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 및 Bun이 포함된 WebSocket

JavaScript 및 Bun이 포함된 WebSocket

Susan Sarandon원래의: 2024-12-03 06:00:16818검색

현대적인 실시간 웹 애플리케이션을 구축할 때는 클라이언트와 서버 간의 효율적이고 원활한 통신을 보장하는 것이 중요합니다. 폴링에 사용되는 것과 같은 기존 HTTP 요청은 상태가 없고 단방향입니다. 클라이언트는 서버에 요청(예: fetch 또는 axios 사용)을 하고, 서버는 연결이 종료되기 전에 응답합니다. 클라이언트에 새로운 데이터가 필요한 경우 정기적으로 새로운 요청을 반복적으로 보내야 하므로 불필요한 대기 시간이 발생하고 클라이언트와 서버 모두의 로드가 증가합니다.

예를 들어 실시간 채팅 앱이나 주가 추적기를 구축하는 경우 폴링을 수행하려면 가져올 새 데이터가 없더라도 클라이언트가 매초마다 업데이트를 요청해야 합니다. WebSocket이 빛나는 곳입니다.

WebSocket 접근 방식

WebSocket은 클라이언트와 서버 간에 지속적인 양방향 통신 채널을 제공합니다. 연결이 설정되면 서버는 새 요청을 기다리지 않고 클라이언트에 업데이트를 즉시 푸시할 수 있습니다. 따라서 WebSocket은 다음과 같이 실시간 업데이트가 필수적인 시나리오에 이상적입니다.

라이브 채팅 애플리케이션에서 채팅 메시지 보내기
여러 사용자에게 알림이나 업데이트를 동시에 방송합니다.
주가, 스포츠 경기 결과, 경기 상태 등 실시간 데이터 스트리밍

클라이언트 측에서 Vanilla JavaScript를 사용하고 서버 측에서 Bun 런타임을 사용하면 WebSocket을 간단하고 효율적으로 구현할 수 있습니다. 예:

클라이언트는 서버에 메시지를 보낼 수 있고, 서버는 해당 메시지를 연결된 다른 클라이언트에게 즉시 브로드캐스트할 수 있습니다.
지속적인 연결은 폴링과 달리 연결을 다시 설정하는 반복적인 오버헤드를 보장하지 않습니다.

이 시나리오에서 WebSocket은 기존 폴링 방법보다 낮은 대기 시간, 감소된 서버 로드, 더 부드러운 사용자 환경을 제공합니다.

WebSocket 프로젝트 빌드

1단계: Bun 프로젝트 설정

먼저 Bun이 설치되어 있는지 확인하세요. 그런 다음 새 Bun 프로젝트를 생성하고, 새로운 빈 디렉토리를 생성하고, 새 디렉토리에 들어가서, bun init 명령을 통해 프로젝트를 초기화합니다.

mkdir websocket-demo
cd websocket-demo
bun init

bun init 명령은 package.json 파일, "hello world" index.ts 파일, .gitignore 파일, typescript 구성을 위한 tsconfig.json 파일 및 README.md 파일을 생성합니다.

이제 JavaScript 코드 생성을 시작할 수 있습니다. 전체 스크립트를 보여 드리겠습니다. 그런 다음 관련된 모든 부분을 살펴보겠습니다. index.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);
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.send("? Welcome baby");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
    }, // 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}`);

Bun을 사용하여 기본 WebSocket 서버에 대한 코드 문서화

다음은 제공된 코드를 분석하여 각 부분과 기능을 설명합니다.

서버 초기화

mkdir websocket-demo
cd websocket-demo
bun init

Bun.serve 메소드는 HTTP 및 WebSocket 요청을 모두 처리할 수 있는 서버를 초기화합니다.

포트: 8080: 서버가 수신하는 포트를 지정합니다. 기본값은 공통 환경 변수이거나 지정되지 않은 경우 3000입니다. 이 예에서 포트는 8080으로 하드코딩되어 있습니다. 보다 유연한 방법을 제공하려면 포트 라인을 제거하고 Bun이 포트를 관리하도록 허용해야 합니다. 따라서 내보내기 BUN_PORT=4321;을 통해 스크립트를 실행할 수 있습니다. 롤빵 실행 index.ts

HTTP 요청 처리

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);
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.send("? Welcome baby");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
    }, // 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}`);

fetch(req, server): 들어오는 HTTP 요청을 처리합니다.
루트 경로 /: index.html 파일을 제공합니다.
/놀라움 경로: 재미있는 깜짝 이모티콘 응답을 반환합니다. ?.
/chat 경로: 연결을 WebSocket 연결로 "업그레이드"하려고 시도합니다. 업그레이드가 실패하면 오류 400 응답이 반환됩니다.

WebSocket 핸들러

websocket 키는 WebSocket 연결을 관리하는 이벤트 핸들러를 정의합니다.

? 연결 열기(열림)

const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  ...
});

클라이언트가 WebSocket 연결을 설정할 때 트리거됩니다.

ws.send(...): 연결을 요청한 클라이언트에게 환영 메시지를 보냅니다..

✉️ 메시지(메시지) 받기

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!");
}

서버가 클라이언트로부터 메시지를 받으면 트리거됩니다.

ws.send(...): 수신된 메시지를 확인과 함께 다시 보냅니다.

⏹️ 연결 닫기(닫기)

open(ws) {
  console.log("? A new Websocket Connection");
  ws.send("? Welcome baby");
}

WebSocket 연결이 닫힐 때 트리거됩니다.

매개변수:

코드: 연결 종료 이유 코드
메시지: 폐쇄에 대한 추가 세부정보입니다.

? 드레인 이벤트(드레인)

message(ws, message) {
  console.log("✉️ A new Websocket Message is received: " + message);
  ws.send("✉️ I received a message from you: " + message);
}

WebSocket이 일시적으로 과부하된 후 더 많은 데이터를 수용할 준비가 되면 배수 이벤트가 트리거됩니다.

서버 시작 기록

close(ws, code, message) {
  console.log("⏹️ A Websocket Connection is CLOSED");
}

서버가 실행되면 콘솔에 서버의 URL을 기록합니다.

작동 방식을 요약해 보세요.

HTTP 요청: 표준 HTTP 요청을 처리합니다(예: 파일 제공 또는 상태로 응답).
WebSocket 업그레이드: 클라이언트가 /chat에 연결할 때 HTTP 연결을 WebSocket 연결로 업그레이드합니다.
실시간 통신: WebSocket 이벤트(열기, 메시지, 닫기, 배수)를 사용하여 서버와 클라이언트 간의 지속적인 통신을 처리합니다.

서버 실행

index.ts 파일이 있으면 bun run을 통해 서버를 시작할 수 있습니다.

drain(ws) {
  console.log("DRAIN EVENT");
}

서버가 준비되어 실행 중입니다. 이제 클라이언트를 구현할 수 있습니다.

WebSocket with JavaScript and Bun

다음 단계

이제 WebSocket을 처리하기 위한 스크립트 구조를 이해했으며 다음 단계는 다음과 같습니다.

WebSocket 클라이언트용 HTML 구현
한 클라이언트에서 연결된 모든 클라이언트로 메시지를 전달하는 브로드캐스팅 로직을 구현합니다.

위 내용은 JavaScript 및 Bun이 포함된 WebSocket의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript json html if for require Directory Error using Event channel console this http websocket axios Sports Game Other

성명：

이전 기사：Node.js의 `require` 기능은 모듈을 가져오고 사용하는 데 어떻게 작동합니까?다음 기사：Node.js의 `require` 기능은 모듈을 가져오고 사용하는 데 어떻게 작동합니까?