0Pricing
JavaScript Academy · 강의

WebSocket 연결 열기

WebSocket 서버에 연결합니다.

WebSocket 연결 열기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

WebSockets란 무엇인가요

WebSockets는 하나의 TCP 연결을 통해 브라우저와 서버 사이에 지속적인 전이중 연결을 제공합니다. HTTP 요청/응답과 달리 양쪽에서 언제든지 메시지를 보낼 수 있으므로 채팅, 실시간 피드, 게임에 적합합니다.

ws 및 wss 스킴

WebSocket URL은 ws://(일반 연결) 또는 wss://(TLS로 암호화된 연결)를 사용합니다. https와 마찬가지로 운영 환경에서는 항상 wss://를 우선 사용합니다.

const url = "wss://example.com/socket";

연결 만들기

new WebSocket(url)으로 socket을 만듭니다. 핸드셰이크는 즉시 시작되지만 연결은 열린 후에야 사용할 수 있습니다.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

onopen 이벤트

onopen은 핸드셰이크가 완료되면 한 번 실행됩니다. 그때부터 데이터를 안전하게 보낼 수 있습니다.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

addEventListener 대안

on* 속성 대신 addEventListener를 사용해 여러 핸들러를 연결할 수 있습니다.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

연결 readyState

readyState는 수명 주기를 나타냅니다. CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3) 순서입니다.

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

하위 프로토콜

두 번째 인수로 하위 프로토콜을 협상합니다. 서버가 하나를 선택하며, 연결이 열린 후 socket.protocol을 읽을 수 있습니다.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

동일 출처와 혼합 콘텐츠

https로 로드된 페이지는 wss:// 연결만 열 수 있습니다. ws://를 열면 혼합 콘텐츠로 간주되어 차단됩니다. 이에 맞게 URL을 계획하세요.

바이너리 유형

바이너리 프레임이 전달되는 방식을 제어하려면 binaryType을 "blob"(기본값) 또는 "arraybuffer"로 설정합니다.

socket.binaryType = "arraybuffer";

최소 클라이언트

이제 지금까지의 내용을 합쳐 연결을 열고 상태를 기록한 다음 정리해 보겠습니다.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

연결 시간 초과

WebSockets에는 기본 제공 연결 timeout이 없습니다. 정해진 시간 안에 onopen이 실행되지 않으면 socket을 닫는 timer를 사용하세요.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

빠른 확인

연결의 기본 사항을 테스트해 보세요.

복습: 연결 열기

ws/wss 스킴을 배우고, new WebSocket으로 socket을 만들었으며, onopen을 처리하고 readyState를 확인했습니다. 또한 하위 프로토콜을 협상하고 연결 timeout을 추가했습니다. 다음에는 메시지를 보내고 받는 방법을 알아봅니다.

자주 묻는 질문

“WebSocket 연결 열기” 강의는 무료인가요?

네 — “WebSocket 연결 열기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“WebSocket 연결 열기”에서 뭘 배우나요?

WebSocket 서버에 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

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

“WebSocket 연결 열기” 강의는 얼마나 걸리나요?

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

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

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

이 강의의 모든 강의

  1. WebSocket 연결 열기
  2. 메시지 보내고 받기
  3. 연결 수명 주기와 오류
  4. 재연결 전략
← JavaScript Academy(으)로 돌아가기