HTML5 WebSocket
기존 웹 페이지의 전형적인 브라우저 통신 및 렌더링 방식은 HTTP 요청(Request) 및 HTTP 응답(Response)을 사용한 방식입니다. 이 방식은 새로운 데이터를 받아서 DOM을 다시 렌더링 하거나, 또는 브라우저를 새로고침하여 전체를 렌더링 해서 클라이언트 브라우저에 표현하는 방식입니다.
원하는 부분만 실시간으로 상호 데이터를 교환하여 새로고침 없이 렌더링하는 기술로 발전하면서 비동기 통신이라는 기술을 많이 사용하고 있으며, 그 보다 더욱 효과적으로 실시간 데이터 처리 및 렌더링을 위해서 RIA(Rich Internet Application) 기술이 발달되고 있습니다.
위와 같은 맥락에서 클라이언트 브라우저와 웹 서버 사이에서 양방향 메시지 송수신 기술인 HTML5 WebSocket 기술이 등장하게 되었다고 볼 수 있습니다.
Ajax Polling과 WebSocket 비교(참고)
위 그림에서 핵심적으로 이해하실 수 있는 사실은 기존 요청-응답 관계에서 벗어난 양방향 자유로운 송수신을 지원한다는 점이 가장 큰 매리트라고 볼 수 있습니다.
아울러, 요즘 화두가 되고 있는 가상화폐 거래소 등을 방문해 보시면 실시간으로 수 많은 데이터 양방향 처리를 위해 대부분 WebSocket 프로토콜을 사용해서 구현해놓은 것을 확인하실 수 있습니다.
WebSocket 기본 예제 코드 작성
간단하게 HTML 파일을 생성해서 아래와 같이 작성하면 테스트를 진행하실 수 있습니다. 부가적으로 사용자의 요구에 맞게 연결(connect),종료(close),발신(Send),수신(Receive),로그(Log) 등 세부 기능을 추가하시면 더욱 이해가 잘 되실 거라 생각됩니다.
몇 줄 안되는 소스 코드이지만, WebSocket API의 기본적인 골격은 완성되어 있다고 볼 수 있습니다.
본 WebSocket 예제는 윈도우10(windows10 x64) 및 MacOS(Sierra) 에서 테스트를 진행했습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67 |
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket 테스트</title>
<script language="javascript" type="text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init()
{
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket()
{
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) ;};
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt)
{
writeToScreen("연결완료");
doSend("테스트 메세지");
}
function onClose(evt)
{
writeToScreen("연결해제");
}
function onMessage(evt)
{
writeToScreen('<span style="color: blue;">수신: ' + evt.data+'</span>');
websocket.close();
}
function onError(evt)
{
writeToScreen('<span style="color: red;">에러:</span> ' + evt.data);
}
function doSend(message)
{
writeToScreen("발신: " + message);
websocket.send(message);
}
function writeToScreen(message)
{
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<body>
<h2>WebSocket Test</h2>
<div id="output"></div>
</body>
</html> |
cs |
WebSocket 기본 예제 실행
실제로 크롬(Chrome) 브라우저에서 테스트한 화면이며, 문제없이 잘 동작하고 있습니다.
또한, 개발자 도구를 살펴보시면 Frame을 사용해서 데이터를 송수신 하는 것을 확인하실 수 있습니다.
브라우저별 WebSocket 지원 여부는 이 곳을 방문하시면 확인하실 수 있습니다.
마무리
추가적으로 Socket.io 를 꼭 학습 하시길 권해 드립니다. Node.js 모듈로 제공하고 있으며, 여러 웹 소켓 기술을 하나의 API로 일관성있게 추상화한 기술이라고 볼 수 있습니다. 핵심적인 내용은 각 사용자의 웹 브라우저의 종류 및 버전에 따른 가장 적합한 기술을 자동으로 선택해서 서비스 되는 모듈이라고 볼 수 있습니다.
실시간으로 사용자와 상호작용 하는 기술은 정말 빠르게 발전해 왔습니다. 앞으로도 압도적인 성능을 자랑하는 기술이 발표 될 것으로 생각됩니다. 개발자로서 다양한 기술 사용을 통해 보다 사용자에게 좋은 서비스를 제공하고 싶습니다.
Socket.io 에 관한 쉬운 학습은 이 곳을 방문하시면 확인하실 수 있습니다.
'네트워크 > Etc' 카테고리의 다른 글
| [WS Protocol] HTML5 WebSocket(웹 소켓) 온라인 테스트 사이트 소개 (0) | 2019.04.13 |
|---|---|
| [Captcha] 캡차 API 제공 사이트 안내 (0) | 2017.09.25 |
| [SSL] 무료 SSL(https) 인증서 제공 사이트 모음 (0) | 2017.09.24 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}