웹소켓 편집하기 (부분)

== 웹소켓 API 사용법 ==

=== 기본 사용법 ===

==== 연결 생성 ====

<syntaxhighlight lang="javascript">
// 기본 연결
const socket = new WebSocket('ws://localhost:8080');

// 보안 연결 (권장)
const socket = new WebSocket('wss://example.com/socket');

// 서브 프로토콜 지정
const socket = new WebSocket('wss://example.com/socket', ['protocol1', 'protocol2']);
</syntaxhighlight>

==== 이벤트 처리 ====

웹소켓에서는 네 가지 주요 이벤트를 처리할 수 있다:

<syntaxhighlight lang="javascript">
// 연결 성공 시
socket.onopen = function(event) {
    console.log('웹소켓 연결 성공!');
};

// 메시지 수신 시  
socket.onmessage = function(event) {
    console.log('받은 메시지:', event.data);
};

// 에러 발생 시
socket.onerror = function(error) {
    console.error('웹소켓 에러:', error);
};

// 연결 종료 시
socket.onclose = function(event) {
    console.log('웹소켓 연결 종료');
    console.log('코드:', event.code, '이유:', event.reason);
};
</syntaxhighlight>

==== 데이터 전송 ====

<syntaxhighlight lang="javascript">
// 텍스트 전송
socket.send('안녕하세요!');

// JSON 데이터 전송
socket.send(JSON.stringify({
    type: 'message',
    content: '실시간 메시지입니다!'
}));

// 이진 데이터 전송
const buffer = new ArrayBuffer(32);
socket.send(buffer);
</syntaxhighlight>

==== 연결 종료 ====

<syntaxhighlight lang="javascript">
// 정상 종료
socket.close();

// 종료 코드와 이유 지정
socket.close(1000, '정상 종료');
</syntaxhighlight>

=== 연결 상태 확인 ===

웹소켓의 연결 상태는 <code>readyState</code> 속성으로 확인할 수 있다:

<syntaxhighlight lang="javascript">
switch(socket.readyState) {
    case WebSocket.CONNECTING:
        console.log('연결 중...');
        break;
    case WebSocket.OPEN:
        console.log('연결됨');
        break;
    case WebSocket.CLOSING:
        console.log('종료 중...');
        break;
    case WebSocket.CLOSED:
        console.log('연결 종료됨');
        break;
}
</syntaxhighlight>