h45. HTML5 웹 워커 및 서버 전송 이벤트

HTML5 웹 워커 및 서버 전송 이벤트

HTML 페이지에서 스크립트가 실행될 때, 페이지는 스크립트가 끝나기 전까지는 반응하지 않게 됩니다.

웹 워커는 백그라운드에서 작동하는 자바스크립트인데, 다른 스크립트와는 독립적으로 동작하며 웹 페이지의 성능에도 영향을 주지 않습니다.

따라서 웹 워커가 백그라운드에서 실행중인 동안에도 버튼 클릭, 데이터 선택 등 중단없이 할 수 있게 됩니다.

크롬, 파이어 폭스, 사파리, 오페라 및 IE10 이상에서 동작합니다.

---

<p>자바스크립트 동작 시간: <output id="a"></output></p>
<button onclick="start()">웹 워커 시작</button> 
<button onclick="stop()">웹 워커 중지</button>

<script>
var b;

function start() {
 if(typeof(Worker) !== "undefined") {
 if(typeof(b) == "undefined") {
 b = new Worker("web_worker.js");
 }
 b.onmessage = function(event) {
 document.getElementById("a").innerHTML = event.data;
 };
 } else {
 document.getElementById("a").innerHTML = "웹 워커를 지원하지 않는 브라우저 또는 웹 사이트 입니다.";
 }
}

function stop() { 
 b.terminate();
 b = undefined;
}
</script>

---

먼저, 아래의 자바스크립트를 실행했을 때 결과를 지속적으로 보여줄 곳을 <output id="a"></output> 로 지정하였습니다.

그 다음 자바스크립트의 웹 워커 시작, 및 중지 함수를 호출할 수 있도록 버튼을 생성하고 onclick 이벤트에 함수를 연결하였습니다.

웹 워커 시작 버튼이 클릭되면, start() 함수가 실행됩니다.

if(typeof(Worker) !== "undefined") {...}
조건문으로 웹 워커가 실행되는 브라우저 인지 확인합니다.

if(typeof(b) == "undefined") {b = new Worker("web_worker.js");}
웹 워커 파일이 아직 지정되어 있지 않다면, 변수 b에 백그라운드에서 동작할 자바스크립트 파일을 웹 워커 파일로 지정합니다.

document.getElementById("a").innerHTML = event.data;
웹 워커 자바스크립트 파일로 부터 넘겨 받은 데이터를  id="a" 의 태그에 표시합니다.

---

web_worker.js 파일은 자바스크립트 파일로 숫자를 1부터 세도록 하였습니다.
var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",1000);
}

timedCount();

---

이렇게 하여, 숫자를 계속 증가시키는 스크립트를, 웹 페이지의 성능에 영향을 주지 않으면서 실행할 수 있었습니다.

서버-전송 이벤트(Server-Sent Events) 는 서버로부터 웹 페이지가 단방향으로 자동 업데이트 받는 기능입니다.

이 기능은 페이스북이나 트위터, 그리고 주가, 뉴스 공급, 실시간 경기 점수 업데이트 등에 적용될 수 있습니다.

다만, 이 기능은 크롬, 파이어 폭스, 사파리 등에서는 지원을 하나 인터넷 익스플로러는 IE10 에서도 아직 지원하지 않고 있습니다.

---

<p id="c"></p>

<script>
if(typeof(EventSource) !== "undefined") {
var d = new EventSource("sse_server.php");
d.onmessage = function(event) {
document.getElementById("c").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("c").innerHTML = "서버-전송 이벤트 기능을 지원하지 않는 브라우저 입니다.";
}
</script>

먼저 id="c" 인 태그를 지정하였습니다.

if(typeof(EventSource) !== "undefined") {...}
서버-전송 이벤트를 지원하는 브라우저 인지 점검합니다.

var d = new EventSource("sse_server.php");
서버측 PHP 파일을 이벤트를 전송해줄 파일로서 지정하여 변수 d 에 담습니다.

document.getElementById("c").innerHTML += event.data + "<br>";
서버측 PHP 파일에서 넘겨 받은 이벤트 데이터를 "<br> 태그를 붙여서, id="c" 인 태그의 내부에 표시합니다.

이렇게 하여 서버측이 일방적으로 전송하는 이벤트 데이터를 브라우저에 지속적으로 보여줄 수 있었습니다.

---

서버측 PHP 코드는 서버측의 시간을 계속 브라우저에 전송해 주도록 하였습니다.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

이상으로 총 37강에 걸친 HTML 과정을 마치고, 다음 장에서는 CSS 와 자바스크립트에 대해 과정을 진행합니다.

---

[광고] Udemy 동영상 강의로 보기