일단 난 설명은 안읽고 예제만 보고싶어!라고 원하는 사람을 위해서 준비했다.
[NodeJS][Express][Web][JavaScript]Hidden Iframe Streaming으로 웹 채팅구현(http 양방향)
http통신을 양방향으로 쓰려는 시도는 으레 있어왔다.
그 중에서 필자가 포스팅 했던 long polling도 있다.
그러나 다른 방식도 한번 알아보자. 바로 hidden iframe이다.
이걸 설명하려면 다른 부수적인 html의 허점을 알고 있어야한다.
이는 일반적인 html의 관계로 당연하지만 양방향은 아니다.
클라이언트가 일방적으로 요청하고 서버는 답한다.
그러나 iframe은 연결만 하게 되면 마음대로 응답을 보낼수 있게된다.
즉 서버의 일방적인 대답창구로 사용되게 가능하다는 것이다.
이는 일반적인 html이 클라이언트는 마음대로 서버에 요청을 보낼 수 있다는 점과
iframe을 이용해서 서버가 마음대로 요청을 보낼 수 있다는 점을 이용해서 서로 양방향 통신이 가능하게된다.
이를 hidden iframe streaming이라고 부른다.
여기서 iframe은 안보이게 어떻게든 숨긴다.
숨기는 방법이야 간단하니 여기서 논하진 않겠다.
이게 가능한 이유를 설명하도록 하겠다.
응답시 청크로 잘라서 보낸다.
res.writeHead(200, {
'Content-Type': 'text/html; charset=UTF-8',
'Transfer-Encoding': 'chunked'
});
위는 노드 js코드인데 보다시피 Transfer-Encoding을 chuncked로 지정해준다.
이렇게 해야만 스트리밍이 가능해진다.
다른 방식은 불가능하니 언어에 맞춰서 무조건 가능하게 설정한다.
res.write('<script>console.log("hihi");</script>');
res.write('<script>console.log("hihi");</script>');
그리고 쓸때는 스크립트 태그로 감싸서 넣어준다.
그래야만 클라이언트로 전송되자마자 예약해놓은 함수가 실행되게 된다.
위와 같은 형태로 전송되게 하면 되는 것이다.
여기서 여러분이 가질수 있는 의문점은 왜 하필 iframe이냐는 것이다.
html은 iframe말고도 script,link등의 태그를 이용할 수 있다.
문제는 위방식을 못쓰는 이유가 있다.
지금은 스트리밍 상태로 값을 계속해서 가져오고 있다.
script는 값을 데려오는 순간 바로 반응하는게 아니라 모든 값을 무조건 다 가져와야한다.
즉 요청을 아예 마무리 지어야만 발동하게 된다.
iframe은 요청을 마무리 짓지 않아도 된다. 즉 연결을 계속 하고 있어도 스트리밍처럼 받아서 뿌려주는게 가능하다.
그렇게 만든 이유는 iframe이 부하가 많이 걸려서 원래 스트리밍처럼 만들었다.
iframe의 렌더링이 전체 렌더링을 느려지지 않도록 만들었지만 그게 오히려 도움이 되는 상황이다.
아래의 코드는 nodejs로 되어있는데 스트리밍의 일부분이다.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<iframe src="http://localhost:3000/chat" width="1px" height="1px"></iframe>
</body>
</html>
스트리밍 태그를 최대한 숨긴다. 브라우저마다 조금다른데 인터넷 보고 참조하라.
router.get('/', function (req, res, next) {
res.writeHead(200, {
'Content-Type': 'text/html; charset=UTF-8',
'Transfer-Encoding': 'chunked'
});
for (var i = 0; i < 10; i++) {
setTimeout(() => {
res.write('<script>console.log("hihi");</script>');
}, i * 1000);
}
});
이는 보내는 방법이다.
타임아웃을 정해서 초당 한번씩 보내도록 해보자.
이 방식이전에 필자는 풀링과 롱풀링에 대해서 설명한 적이 있다.
위에도 포스팅을 링크를 걸어놨지만 사람은 망각의 동물이니 여기도 걸어 놓는다.
그 때는 풀링과 롱풀링과 비교만 했었는데 여기서 다른 방식에 비해서의 iframe의 장단점을 거론하겠다.
Hidden iframe streaming의 특징
1.http가 한번 연결하고 끊기지 않고 계속 유지된다.
2.데이터 전송에도 http헤더가 사용되지 않고 이미 열려있는 통로로 보내므로 트래픽이 훨씬 적다.
3.브라우저의 메모리에 응답이 계속 쌓이게 된다.
4.스트리밍 기법이다 보니 기기나 브라우저의 보안 정책 및 프로그램들과 충돌이 잦다.
5.가장 큰 단점으로는 에러처리가 매우 힘들다. 보다시피 응답을 완료하지 않다보니 서버에 무슨일이 생겼는지 확인하기 힘들다.
'Programming > CommonStory' 카테고리의 다른 글
| 다 쓴 메모리를 자동으로 수거해주는 가바지컬렉터(Garbage Collector:GC), 기본 원리 파해치기 (2) | 2019.02.15 |
|---|---|
| [Web][조금 더 자세히]cookie는 너무 구식아냐? 이제부턴 Web Storage! (1) | 2019.02.10 |
| [Web][조금 더 자세히]서버와 클라의 연결고리, 상태를 서버에 저장하는 http session, cookie와의 비교 (0) | 2019.01.28 |
| [Web][조금 더 자세히]도대체 왜 이름이 쿠키인걸까?, 상태를 저장하는 http cookie (0) | 2019.01.27 |
| [Web]http통신을 이용한 양방향 통신기법, long polling (3) | 2018.12.30 |