1. WebSocket 통신
1) 웹 소켓이란?
웹 소켓 통신은 HTML5의 등장으로 실시간 웹 애플리케이션을 위해 설계된 통신 프로토콜입니다.
TCP를 기반으로 통신이 진행됩니다. TCP를 기반으로 한 웹 소켓은 신뢰성 있는 데이터 전송을 보장하며, 메시지 경계를 존중하고 순서가 보장된 양방향 통신을 제공할 수 있습니다.
2) 웹 소켓 연결 및 통신 방식
HTTP를 기반으로 클라이언트와 서버 간에 최초 연결이 이루어지면, 이 연결을 통해 양방향 통신을 TCP 기반으로 지속적으로 할 수 있습니다. 즉, 전화 통화와 같이 양쪽 모두에서 정보를 주고 받는 것이라고 생각하면 됩니다. 실제로 게임사에서 채팅을 위해 웹소켓을 많이 사용하는 것으로 알고 있습니다.
이러한 지속적인 연결을 통해서 서버는 클라이언트에게 실시간으로 데이터를 보낼 수 있으며 반대로 클라이언트도 서버에게 데이터를 보낼 수 있습니다. 이때 데이터는 '패킷'이라는 데이터 조각 형태로 나눠서 전송합니다.
전송은 연결 중단과 추가 HTTP 요청 없이 양방향으로 이루어집니다.
웹 소켓 프로토콜은 표준 웹 소켓 연결에는 80포트를 TLS/SSL을 통한 웹 소켓 연결에는 443포트를 사용합니다.
상태 유지 프로토콜로서 클라이언트와 서버 간의 연결은 어느 한쪽이 종료될 때 까지 활성 상태로 유지 됩니다.
웹 소켓 연결은 'ws:' 또는 'wss:' 스키마를 사용하는 HTTP Upgrade 요청으로 시작됩니다.
웹 소켓 연결의 클라이언트 핸드셰이크는 다음과 같습니다.
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
웹 소켓 연결의 서버 핸드셰이크는 다음과 같습니다.
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
2. Azure Front Door에서 WebSocket 사용
1) AFD에서 웹 소켓 사용
AFD는 추가 구성 없이 표준 및 프리미엄 계층 모두에서 웹 소켓을 지원합니다.
현재 기준으로 표준 및 프리미엄 계층 또한 지원은 하지만 Preview 상태이고 클래식 계층의 경우 웹 소켓 지원을 하지 않습니다.
2-1) 웹 소켓 연결이 진행되면 AFD는 연결 유지 되는 동안 어떠한 검사 없이 클라이언트와 서버간의 데이터 전송을 진행합니다.
2-2) WAF 검사는 웹 소켓 연결 수립 단계에서만 적용이 됩니다. 그 이후에는 WAF에서 추가 검사를 진행하지 않습니다.
2-3) 원본 서버에 대한 상태 확인은 HTTP 기반으로 수행됩니다.
2-4) 웹 소켓 경로에 대해서는 캐싱을 비활성화 해야합니다.
2-5) 웹 소켓 연결 시간은 4시간으로 제한되어 있고 5분 동안 데이터 통신이 없으면 유휴상태로 판단하여 연결이 종료됩니다.
3. WebSocket 통신 테스트
간단한 웹 소켓 통신 테스트를 하기위해서 진행한 내용입니다. AFD를 활용하지는 않았습니다.
테스트를 실행하기 전에 테스트를 위한 PC에 Nodejs가 기본적으로 설치가 되어 있어야합니다.
1) 클라이언트와 서버 구현
1-1) 클리아언트를 위한 index.html 생성
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 테스트</title>
</head>
<body>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="메시지를 입력하세요">
<button onclick="sendMessage()">전송</button>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('서버에 연결됨');
appendMessage('서버에 연결되었습니다.');
};
ws.onmessage = function(event) {
console.log('메시지 받음:', event.data);
appendMessage('받은 메시지: ' + event.data);
};
ws.onerror = function(error) {
console.log('WebSocket 에러:', error);
appendMessage('에러 발생: ' + error);
};
ws.onclose = function() {
console.log('연결 종료');
appendMessage('서버와의 연결이 종료되었습니다.');
};
function sendMessage() {
const message = document.getElementById('messageInput').value;
ws.send(message);
appendMessage('보낸 메시지: ' + message);
document.getElementById('messageInput').value = '';
}
function appendMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.textContent = message;
document.getElementById('messages').appendChild(messageDiv);
}
</script>
</body>
</html>
1-2) 웹 소켓 통신을 위한 서버 구성
// server.js
const express = require('express');
const app = express();
const http = require('http');
const WebSocket = require('ws');
// Express 설정
app.use(express.static('public')); // public 폴더의 파일들을 정적 파일로 제공
// HTTP 서버 생성
const server = http.createServer(app);
// WebSocket 서버를 HTTP 서버에 연결
const wss = new WebSocket.Server({ server });
wss.on('connection', function connection(ws) {
console.log('새로운 클라이언트 연결됨');
ws.on('message', function incoming(message) {
console.log('받은 메시지:', message.toString());
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message.toString());
}
});
});
});
// 서버 시작
server.listen(8080, () => {
console.log('서버가 8080 포트에서 실행중입니다.');
});
1-3) npm 초기화 및 패키지 설치
npm init -y
npm install express ws
1-4) 서버 실행 및 소켓 통신 테스트 결과
node server.js
http://localhost:8080으로 접속하여 정상적으로 접속 되는지 확인합니다.
웹 브라우저 개발자 모드를 통해서 웹 소켓 통신이 정상적으로 되고 있는지 테스트 합니다.
여기서 테스트는 메시지를 입력하여 정상적으로 통신이 되는지 확인해봅니다.
개발자 도구를 통해서 웹 소켓 연결이 정상적으로 되었다는 것을 확인 할 수 있습니다.
>> 아래 이미지에서 확인할 수 있듯이 101 Switching Protocol을 통해서 웹 소켓 연결이 된 것을 볼 수 있습니다.
"안녕하세요!!"라는 메시지를 입력하여 정상적으로 메시지가 입력되는 것을 확인 할 수 있습니다.
'Azure' 카테고리의 다른 글
| Content-type & Azure CDN 규칙 엔진 (1) | 2025.02.04 |
|---|---|
| Azure Kubernetes Service 가용성 & Taint (0) | 2025.01.31 |
| Azure CDN을 이용한 정적 웹 애플리케이션 서비스 (1) | 2024.11.28 |
| Azure Kubernetes Service & Grafana Tempo (0) | 2024.11.01 |
| Azure Application Insights를 이용한 Application Monitoring (nodejs)- 2/2 (1) | 2024.10.31 |
