HTML - WebSockets: 초보자 가이드
안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 WebSockets의 흥미로운 세상으로 뛰어들어 볼 거예요. WebSockets에 대해 들어본 적이 없으신 걸로 해도 걱정 마세요 - 이 튜토리얼이 끝나면 WebSocket 마법사가 될 거예요! 그러니 마음에 드는 음료를 한 잔 가져와, 편안하게 앉아 우리의 여정을 시작해 보세요.
WebSockets는 무엇인가요?
자, 구체적인 내용으로 들어가기 전에 WebSockets가 무엇이고 왜 이렇게 멋져하는지 이해해 보겠습니다. 친구와 대화를 나누는 것을 상상해 보세요. 일반적인 전화 통화에서는 전화를 걸고, 상대가 받아들이기를 기다렸다가, 원하는 말을 하고, 그 후 전화를 끊습니다. 그런 과정을 반복해야 하죠. 귀찮지 않나요?
이게 바로 전통적인 웹 통신의 방식입니다. 브라우저가 요청을 보내고, 응답을 기다렸다가, 연결을 닫습니다. 반면에 WebSockets는 열려 있는 전화线路에서 언제든지 당신과 친구가 대화할 수 있는 것처럼, 끊임없이 전화를 걸고 끊지 않고도 통신할 수 있습니다. 멋지지 않나요?
문법
이제 HTML에서 WebSockets를 어떻게 사용하는지 살펴보겠습니다. 문법은 생각보다 간단합니다:
<script>
var socket = new WebSocket('ws://example.com/socket');
</script>여기서 우리는 새로운 WebSocket 객체를 만들고 'ws://example.com/socket' 서버에 연결하고 있습니다. 'ws://' 부분은 'http://'처럼 보이지만 WebSockets 전용입니다. 보안 버전도 있어요, 'wss://', 'https://'와 같습니다.
WebSocket 속성
WebSockets는 우리의 연결 상태에 대해 알려주는 몇 가지 유용한 속성을 가지고 있습니다. 이를 표로 정리해 보겠습니다:
| 속성 | 설명 |
|---|---|
| readyState | 연결의 현재 상태 |
| bufferedAmount | send() 메서드를 사용하여 큐에 저장된 바이트 수 |
| extensions | 서버에서 선택한 확장 |
| protocol | 서버에서 선택한 하위 프로토콜의 이름 |
readyState 속성은 특히 유용합니다. 이 속성은 네 가지 값 가운데 하나를 가질 수 있습니다:
- 0 (CONNECTING): 연결이 아직 열리지 않았습니다.
- 1 (OPEN): 연결이 열려 있으며 통신할 준비가 되었습니다.
- 2 (CLOSING): 연결이 닫히고 있습니다.
- 3 (CLOSED): 연결이 닫혔거나 열리지 못했습니다.
WebSocket 이벤트
WebSockets는 데이터를 보내는 것뿐만 아니라 다양한 이벤트에 응답할 수도 있습니다. 이벤트가 발생할 때마다 파티 스트리머가 터지는 것처럼 보입니다! 주요 이벤트는 다음과 같습니다:
- onopen: 연결이 확립될 때 발생합니다.
- onmessage: 서버로부터 데이터를 받을 때 발생합니다.
- onerror: 오류가 발생할 때 발생합니다.
- onclose: 연결이 닫길 때 발생합니다.
이를 코드로 어떻게 사용하는지 보겠습니다:
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
console.log('연결이 확립되었습니다!');
};
socket.onmessage = function(event) {
console.log('서버로부터 메시지:', event.data);
};
socket.onerror = function(error) {
console.log('WebSocket 오류:', error);
};
socket.onclose = function(event) {
console.log('연결이 닫혔습니다.');
};
</script>이 예제에서 우리는 각 이벤트를 처리하는 함수를 설정하고 있습니다. 연결이 열리면 메시지를 로그에 남깁니다. 메시지를 받으면 로그에 남깁니다. 오류가 발생하면 로그에 남깁니다. 연결이 닫히면 작별 인사를 합니다!
WebSocket 메서드
이제 이벤트를 듣는 방법을 알고 있으니, 우리의 WebSocket으로 무엇을 할 수 있는지 살펴보겠습니다. 주요 메서드는 다음과 같습니다:
| 메서드 | 설명 |
|---|---|
| send() | 서버로 데이터를 보냅니다 |
| close() | WebSocket 연결을 닫습니다 |
이 메서드를 어떻게 사용하는지 보겠습니다:
<script>
var socket = new WebSocket('ws://example.com/socket');
// 서버로 메시지를 보냅니다
socket.send('안녕하세요, 서버님!');
// 연결을 닫습니다
socket.close();
</script>이렇게 간단합니다! send()을 사용하여 원하는 데이터를 서버로 보낼 수 있습니다. 그리고 끝내고 싶을 때 close()를 사용하여 연결을 예절 있게 닫을 수 있습니다.
Python으로 WebSocket 서버 설정
이제 우리는 HTML에 집중하고 있지만, 대화의 양쪽을 이해하는 것이 중요하다고 생각합니다. 그래서 간단한 WebSocket 서버를 Python으로 설정하는 방법을 빠르게 살펴보겠습니다. Python에 익숙하지 않으신 분도 걱정 마세요 - 개념이 중요합니다.
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Echo: {message}")
start_server = websockets.serve(echo, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()이 서버는 받은 모든 메시지를 "Echo: "를 추가하여 다시 보냅니다. 이 서버는 로컬 호스트(당신의 컴퓨터)에서 8765 포트에서 실행됩니다.
서버에 연결하는 HTML 클라이언트 설정
이제 서버가 준비되었으니, 이 서버에 연결하는 HTML 페이지를 만들어 보겠습니다:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 테스트</title>
</head>
<body>
<h1>WebSocket 테스트</h1>
<input type="text" id="messageInput" placeholder="메시지를 입력하세요">
<button onclick="sendMessage()">보내기</button>
<div id="messages"></div>
<script>
var socket = new WebSocket('ws://localhost:8765');
socket.onopen = function(event) {
console.log('연결이 확립되었습니다!');
};
socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>이 HTML 페이지는 간단한 인터페이스를 생성하여 메시지를 입력하고 서버로 보내고, 서버의 응답을 볼 수 있게 합니다.
이제 여러분은 WebSockets의 기본을 다루는 방법을 배웠습니다. 이해하고 서버를 설정하고 클라이언트를 만드는 방법을 배웠습니다. WebSockets는 실시간, 양방향 통신에 perfect합니다. 채팅 룸, 실시간 스포츠 업데이트, 또는 즉각적인 데이터 교환이 필요한 어떤 상황에서도 적합합니다.
웹 개발자로서의 여정을 계속하면서 WebSockets가 새로운 가능성을 열어줄 것입니다. 그러니 연습을 계속하고, 실험을 하고, 가장 중요한 것은 즐겁게 코딩하십시오! 행복한 코딩을 기원합니다!
Credits: Image by storyset