자바스크립트, Websockets API
WebSockets는 클라이언트(일반적으로 웹 브라우저)와 서버 간의 실시간 통신을 가능하게 하는 API입니다. 클라이언트가 서버에 요청을 보내고 서버가 요청된 데이터로 응답하는 기존 HTTP 요청-응답 모델의 대안입니다. WebSocket을 사용하면 클라이언트와 서버 간에 지속적인 연결이 설정되어 데이터를 실시간으로 보내고 받을 수 있습니다.
JavaScript는 클라이언트와 서버 간의 WebSocket 연결을 설정하는 데 사용할 수 있는 WebSocket API를 제공합니다. 이 섹션에서는 구체적인 사용 예를 포함하여 JavaScript WebSocket API를 사용하는 방법을 자세히 설명합니다.
WebSocket 연결 설정
WebSocket 연결을 설정하려면 먼저 WebSocket 개체를 만들어야 합니다. WebSocket 클래스를 인스턴스화하고 WebSocket 서버의 URL을 인수로 전달하여 WebSocket 객체를 생성할 수 있습니다. 예를 들어:
const socket = new WebSocket('ws://example.com/ws');
위의 예에서는 WebSocket 개체를 만들고 URL 'ws://example.com/ws'를 인수로 전달합니다. 이 URL은 연결할 WebSocket 서버를 지정합니다.
WebSocket 이벤트
WebSocket API는 WebSocket 연결의 여러 단계를 처리하는 데 사용할 수 있는 여러 이벤트를 제공합니다. 다음은 가장 일반적인 WebSocket 이벤트 중 일부입니다.
- open: 이 이벤트는 WebSocket 연결이 설정될 때 트리거됩니다.
- message: 이 이벤트는 서버에서 메시지를 받았을 때 발생합니다.
- close: 이 이벤트는 WebSocket 연결이 닫힐 때 트리거됩니다.
- error: WebSocket 연결 중 오류가 발생하면 발생하는 이벤트입니다.
이러한 이벤트를 처리하기 위해 이벤트 리스너를 WebSocket 객체에 연결할 수 있습니다. 예를 들어:
const socket = new WebSocket('ws://example.com/ws');
socket.addEventListener('open', function (event) {
console.log('WebSocket connection established');
});
socket.addEventListener('message', function (event) {
console.log('Message received:', event.data);
});
socket.addEventListener('close', function (event) {
console.log('WebSocket connection closed');
});
socket.addEventListener('error', function (event) {
console.error('WebSocket error:', event);
});
위의 예에서는 'open', 'message', 'close' 및 'error' 이벤트에 대해 WebSocket 객체에 이벤트 리스너를 연결합니다. 각 이벤트가 트리거되면 해당 함수가 호출됩니다.
메시지 보내기
WebSocket 연결을 통해 메시지를 보내려면 WebSocket 개체의 `send()` 메서드를 사용할 수 있습니다. 예를 들어:
const socket = new WebSocket('ws://example.com/ws');
socket.addEventListener('open', function (event) {
socket.send('Hello, server!');
});
위의 예에서는, WebSocket 연결이 설정되면 서버에 'Hello, server!'라는 메시지를 보냅니다.
WebSocket 연결 닫기
WebSocket 연결을 닫으려면 WebSocket 객체의 `close()` 메서드를 사용할 수 있습니다. 예를 들어:
const socket = new WebSocket('ws://example.com/ws');
socket.addEventListener('close', function (event) {
console.log('WebSocket connection closed');
});
// Close the WebSocket connection after 10 seconds
setTimeout(function () {
socket.close();
}, 10000);
위의 예제에서는 WebSocket 객체의 `close()` 메서드를 사용하여 10초 후에 WebSocket 연결을 닫습니다.
다음은 Javascript Websockets API를 사용하여 간단한 채팅 애플리케이션을 만드는 방법을 보여주는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Websockets Chat</title>
</head>
<body>
<ul id="messages"></ul>
<form>
<input id="message" type="text" autocomplete="off">
<button>Send</button>
</form>
<script>
const socket = new WebSocket('wss://example.com/socket');
const messages = document.getElementById('messages');
const form = document.querySelector('form');
const input = document.getElementById('message');
socket.onopen = function(event) {
console.log('WebSocket connection opened!');
};
socket.onmessage = function(event) {
const li = document.createElement('li');
li.textContent = event.data;
messages.appendChild(li);
};
socket.onerror = function(event) {
console.error('WebSocket error:', event);
};
socket.onclose = function(event) {
console.log('WebSocket connection closed:', event.code, event.reason);
};
form.addEventListener('submit', function(event) {
event.preventDefault();
const message = input.value;
socket.send(message);
input.value = '';
});
</script>
</body>
</html>
이 예제에서는 사용자가 웹 소켓을 사용하여 서버에 메시지를 보낼 수 있는 간단한 채팅 응용 프로그램을 만듭니다. websocket 객체를 생성하고 URL `wss://example.com/socket`에 연결하고 다양한 이벤트를 처리하여 UI를 업데이트하고 오류를 처리합니다. 또한 `addEventListener` 메서드를 사용하여 양식 제출을 처리하고 `send` 메서드를 사용하여 서버에 메시지를 보냅니다.