---
title: WebSocket
slug: Web/API/WebSocket
tags:
  - API
translation_of: Web/API/WebSocket
---
<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>

<p><strong><code>WebSocket</code></strong> 객체는 서버와의 <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> 연결을 생성하고 관리할 수 있는 API 들을 제공합니다. 이는 데이터를 전송하거나 주고 받는 등의 API 들을 포함합니다.</p>

<p><code>WebSocket</code> 생성자는 하나의 필수 파라미터와, 하나의 옵셔널 파라미터를 받습니다:</p>

<pre class="syntaxbox">WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);
</pre>

<dl>
 <dt><code>url</code></dt>
 <dd>연결할 URL 주소입니다; 웹소켓 서버가 응답할 수 있는 위치의 주소이여야 합니다.</dd>
 <dt><code>protocols</code> {{optional_inline}}</dt>
 <dd>단일 프로토콜 문자열, 또는 프로토콜 문자열의 배열. 이 문자열들은 서브 프로토콜을 지정하는데 사용됩니다. 이를 통해 하나의 웹소켓 서버가 여러개의 웹 소켓 서브 프로토콜을 구현할 수 있도록 해줍니다. (예를 들어, 하나의 서버가 두 개 이상의 커뮤니케이션 방식을 가지고 싶도록 하고 싶을 때). 만약 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.</dd>
</dl>

<p>이 생성자는 예외가 발생할 수 있습니다:</p>

<dl>
 <dt><code>SECURITY_ERR</code></dt>
 <dd>The port to which the connection is being attempted is being blocked.</dd>
</dl>

<h2 id="메소드_오버뷰">메소드 오버뷰</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
  </tr>
  <tr>
   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
  </tr>
 </tbody>
</table>

<h2 id="어트리뷰트">어트리뷰트</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Attribute</td>
   <td class="header">Type</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td><code>binaryType</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>A string indicating the type of binary data being transmitted by the connection. This should be either "blob" if DOM {{domxref("Blob")}} objects are being used or "arraybuffer" if {{jsxref("ArrayBuffer")}} objects are being used.</td>
  </tr>
  <tr>
   <td><code>bufferedAmount</code></td>
   <td><code>unsigned long</code></td>
   <td>The number of bytes of data that have been queued using calls to {{manch("send")}} but not yet transmitted to the network. This value does not reset to zero when the connection is closed; if you keep calling {{manch("send")}}, this will continue to climb. <strong>Read only</strong></td>
  </tr>
  <tr>
   <td><code>extensions</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.</td>
  </tr>
  <tr>
   <td><code>onclose</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>WebSocket 인터페이스의 연결상태가 <code>readyState</code> 에서<code>CLOSED</code> 로 바뀌었을 때 호출되는 이벤트 리스너입니다. 이 이벤트 리스너는 "close"라는 이름의 <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a>를 받습니다.</td>
  </tr>
  <tr>
   <td><code>onerror</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>"error" 라는 이름의 이벤트가 발생하면 처리할 핸들러입니다. 이는 에러가 발생하는 상황에 호출됩니다.</td>
  </tr>
  <tr>
   <td><code>onmessage</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>"message" 이름의 <code><a href="/en-US/docs/Web/API/MessageEvent">MessageEvent</a> </code>이벤트가 발생하면 처리할 핸들러입니다. 이는 서버로부터 메세지가 도착했을 때 호출됩니다.</td>
  </tr>
  <tr>
   <td><code>onopen</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>WebSocket 인터페이스의 연결상태가 <code>readyState</code> 에서 <code>OPEN</code>으로 바뀌었을 때 호출되는 이벤트 리스너입니다. ; 연결 상태가 <code>OPEN</code>으로 바뀌었다는 말은 데이터를 주고 받을 준비가 되었다는 뜻입니다. 이 리스너가 처리하는 이벤트는 "open"이라는 이벤트 하나입니다.</td>
  </tr>
  <tr>
   <td><code>protocol</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>서버에 의해 선택된 서브 프로토콜을 가리킵니다; 이 값은 객체를 생성하면서 <code>protocols</code> 파라미터에 전달했던 값 들 중 하나입니다.</td>
  </tr>
  <tr>
   <td><code>readyState</code></td>
   <td><code>unsigned short</code></td>
   <td>연결의 현재 상태입니다; 값은 {{anch("Ready state constants")}} 중에 하나입니다. <strong>읽기 전용.</strong></td>
  </tr>
  <tr>
   <td><code>url</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>생성자에 의해 해석된 URL입니다. 이는 항상 절대 주소를 가리킵니다. <strong>읽기 전용.</strong></td>
  </tr>
 </tbody>
</table>

<h2 id="상수">상수</h2>

<h3 id="Ready_state_constants">Ready state constants</h3>

<p>아래의 값들은 <code>readyState</code> 어트리뷰트가 웹소켓의 연결 상태를 나타내기 위해서 사용됩니다.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Constant</td>
   <td class="header">Value</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td><code>CONNECTING</code></td>
   <td><code>0</code></td>
   <td>연결이 수립되지 않은 상태입니다.</td>
  </tr>
  <tr>
   <td><code>OPEN</code></td>
   <td><code>1</code></td>
   <td>연결이 수립되어 데이터가 오고갈 수 있는 상태입니다.</td>
  </tr>
  <tr>
   <td><code>CLOSING</code></td>
   <td><code>2</code></td>
   <td>연결이 닫히는 중 입니다.</td>
  </tr>
  <tr>
   <td><code>CLOSED</code></td>
   <td><code>3</code></td>
   <td>연결이 종료되었거나, 연결에 실패한 경우입니다.</td>
  </tr>
 </tbody>
</table>

<h2 id="메소드">메소드</h2>

<h3 id="close()">close()</h3>

<p>맺어진 연결, 또는 연결 시도를 종료합니다. 이미 종료된 경우에는 아무 동작도 하지 않습니다.</p>

<pre class="syntaxbox">void close(
  in optional unsigned short code,
  in optional DOMString reason
);
</pre>

<h4 id="Parameters">Parameters</h4>

<dl>
 <dt><code>code</code> {{optional_inline}}</dt>
 <dd>연결이 종료되는 이유를 가리키는 숫자 값입니다. 지정되지 않을 경우 기본값은 1000으로 간주됩니다. (일반적인 경우의 "transaction complete" 종료를 나타내는 값).  허용되는 값들은 <code><a href="/en-US/docs/Web/API/CloseEvent">CloseEvent</a></code> 페이지의  <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">list of status codes</a> 를 참고하세요.</dd>
 <dt><code>reason</code> {{optional_inline}}</dt>
 <dd>연결이 왜 종료되는지를 사람이 읽을 수 있도록 나타내는 문자열입니다. 이 문자열은 UTF-8 포멧이며, 123 바이트를 넘을 수 없습니다. (<strong>글자 수 아님</strong>).</dd>
</dl>

<h4 id="Exceptions_thrown">Exceptions thrown</h4>

<dl>
 <dt><code>INVALID_ACCESS_ERR</code></dt>
 <dd>잘못된 <code>code</code> 값을 지정했습니다.</dd>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd><code>reason</code> 값이 너무 길거나, 짝을 이루지 못하는 서로게이트 문자가 있습니다.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.</p>
</div>

<h3 id="send()">send()</h3>

<p>웹소켓 연결을 통해 데이터를 서버로 전송합니다.</p>

<pre class="syntaxbox">void send(
  in DOMString data
);

void send(
  in ArrayBuffer data
);

void send(
  in Blob data
);
</pre>

<h4 id="Parameters_2">Parameters</h4>

<dl>
 <dt><code>data</code></dt>
 <dd>서버로 전송할 텍스트 메세지입니다.</dd>
</dl>

<h4 id="Exceptions_thrown_2">Exceptions thrown</h4>

<dl>
 <dt><code>INVALID_STATE_ERR</code></dt>
 <dd>연결이 현재 <code>OPEN </code>상태가 아닙니다.</dd>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>data 값에 짝을 이루지 못하는 서로게이트 문자가 있습니다.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> Gecko's implementation of the <code>send()</code> method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a <code>boolean</code> indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in {{Gecko("8.0")}}.</p>

<p>As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.</p>
</div>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
   <td>{{Spec2("Websockets")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div>{{Compat("api.WebSocket")}}</div>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
</ul>