chapter12 웹 워커 & 웹 소켓

Chapter12웹 워커& 웹 소켓

HTML5 Programming

Contents

1. 웹 워커

2. 웹 소켓

2웹 워커 & 웹 소켓

Chapter12

웹 워커스레드

하나의 프로그램 내에서의 실행 단위를 나타내는데 보통의 프로그램들은 멀티 스레드를 지원하기 때문에 하나의 프로그램에서 동시에 여러 기능이 이루어질 수 있음

웹 워커 & 웹 소켓

Chapter12

3

웹 워커웹 워커

멀티 스레드 구현이 가능 웹 브라우저에서 메인이 아닌 백그라운드로 여러 가지 처리가 가능하게 되어 복잡한 처리도 웹 브라우저에서 실행이 가능 브라우저 지원 현황


Chapter12

4

멀티 태스킹과 멀티 스레드멀티 태스킹 (MultiTasking)

운영체제는 CPU 의 시간을 쪼개어 각각의 프로그램에 할당하여 동시에 실행하는 것처럼 보이게 하는 것 예 : 컴퓨터에서 음악을 들으며 웹 서핑을 하는 것

멀티 스레드 (MultiThread) 하나의 프로그램 내에서 여러 개의 기능이 동시에 이루어지는 것 예 : MP3 파일을 재생하는데 MP3 플레이어에서 자동으로 MP3 파일의 압축을 해제하며 동시에 음악을 재생하는 것


Chapter12

5

워커 생성 및 메시지 전달 웹 워커

메인에서 동작하는 UI 스레드와는 별개로 백그라운드에서 여러 개의 워커들이 각각의 기능을 하며 처리 동작을 하고 있는 형태로 이루어져 있음 워커를 생성하기 위해서는 메인 UI 페이지에서 워커 역할을 하는 자바스크립트를 호출하여 워커의 인터페이스 생성자를 호출하면 됨


Chapter12

6

워커 생성 및 메시지 전달 워커 생성 및 메시지

워커에서 생성한 함수나 변수는 외부에서 호출이 불가능함 . 그러므로 워커에서 작업한 내용을 메인 UI 스레드에서 알기 위해서는 메시지를 주고받아야 함 메시지를 주고받기 위해서는 postMessage() 메서드와 onmes-

sage 이벤트 핸들러를 사용 postMessage() 메서드는 데이터를 보내기 위해 사용하는 것이며 onmessage 이벤트 핸들러는 postMessage() 메서드에 담겨 온 데이터를 수신하기 위해 사용


Chapter12

7

워커 생성 및 메시지 전달메시지 전달

메인 스레드에서 생성한 워커에 “데이터”라는 문자열을 postMessage() 메서드를 보낼 경우


Chapter12

8

워커 생성 및 메시지 전달메시지 수신

메인 UI 스레드에서 워커로 보낸 데이터를 워커에서 받기 위해서는 onmessage 이벤트 핸들러를 사용


Chapter12

9

워커 생성 및 메시지 전달메시지 전달

워커에서 postMessage() 메서드를 사용할 때는 전역으로 호출하면 자동으로 워커를 생성 한 곳으로 메시지를 전달하게 됨 만약 워커에서 처리 결과인 “ result” 문자열을 메인 UI로 전달할 경우


Chapter12

10

워커 생성 및 메시지 전달메시지 수신

메인 UI 스레드에서는 메시지 수신받을 대상 워커의 객체에 대해 onmessage 핸들러를 지정하여 처리


Chapter12

11

워커 생성 및 메시지 전달워커 종료

워커에서의 작업이 종료되어 더 이상 메시지를 주고 받을 일이 없다면 워커를 종료해야 함 워커를 종료할 때는 객체에 대하여 terminate() 메서드를 호출


Chapter12

12

프로그램 12-1


Chapter12

13

01: <!DOCTYPE html>02: <html>03: <head>04: <meta charset="utf-8">05: <title> 웹 워커 </title>06: <script type="text/javascript">07: var worker;08:09: function calc()10: {11: var num = document.getElementById("num").value;12:13: worker = new Worker("calc.js");14:15: worker.onmessage = function(event)16: {17: alert(" 약수의 개수 : " + event.data);18: };19:20: worker.onerror = function(event)21: {22: alert(" 에러 : " + event.message);23: };24:25: worker.postMessage(num);26: }

프로그램 12-1


Chapter12

14

28: function stop()29: {30: worker.terminate();31: }32: </script>33: </head>34: <body>35: 값 입력 : <input type="text" id="num">36: <input type="button" onclick="calc()" value=" 실행 ">37: <input type="button" onclick="stop()" value=" 중지 ">38: </body>39: </html>

01: onmessage = function(event)02: {03: var num = event.data;04: var total = 0;05: var i;06:07: for(i=num; i>0; i--)08: {09: if(num % i == 0)10: total++;11: }12:13: postMessage(total);14: };

공유 워커의 사용공유 워커

워커는 기본적으로 하나의 워커 객체와 백그라운드의 프로세스가 일대일로 대응하는 형태로 되어 있음 . 하지만 여러 개의 워커 객체가 하나의 백그라운드 프로세스를 공유해서 사용 할 수도 있음 객체를 생성할 때 ShareWorker() 생성자를 호출

인수로는 워커와 마찬가지로 자바스크립트 파일명이 들어가며 추가로 워커의 이름도 지정


Chapter12

15

공유 워커의 사용공유 워커

객체를 따로 생성하더라도 같은 이름의 자바스크립트 파일명과 워커 이름을 사용하면 백그라운드 프로세스를 공유하게 됨


Chapter12

16

공유 워커의 사용데이터 전달

메인 UI 스레드에서 공유 워커로 데이터를 보내기 위해서는 워커와 마찬가지로 postMessage() 메서드를 사용 생성한 객체의 port 속성을 사용하여 데이터를 전달해야 함


Chapter12

17

공유 워커의 사용데이터 수신

port 속성은 메인 UI 스레드와 공유 워커와의 통신을 위한 채널이라고 할 수 있음 port 속성을 사용하여 전달한 데이터는 공유 워커에서

onconnect 이벤트 핸들러를 사용하여 전달받아야 함


Chapter12

18

공유 워커의 사용 데이터 전달

메인 UI 스레드와 연결되어 있는 포트는 onconnect 이벤트 핸들러를 통해 전달받은 이벤트 객체의 ports 속성을 사용하여 확인 할 수 있음 공유 워커에서 메인 UI 스레드에 데이터를 전달하기 위해서는 on-

connect 이벤트 핸들러를 통하여 확인한 포트의 postMessage() 메서드를 사용하면 됨


Chapter12

19

공유 워커의 사용데이터 수신

메인 UI 스레드에서는 메시지 수신받을 대상 워커의 객체의 포트에 대하여 onmessage 핸들러를 지정하여 처리


Chapter12

20

프로그램 12-2


Chapter12

21

01: <!DOCTYPE html>02: <html>03: <head>04: <meta charset="utf-8">05: <title> 웹 워커 </title>06: <script type="text/javascript">07: var worker;08:09: function calc()10: {11: var num = document.getElementById("num").value;12:13: var worker = new SharedWorker("sharecalc.js", "share");14:15: worker.port.onmessage = function(event)16: {17: alert(" 약수의 개수 : " + event.data);18: };19:20: worker.port.onerror = function(event)21: {22: alert(" 에러 : " + event.message);23: };24:25: worker.port.postMessage(num);26: }

프로그램 12-2


Chapter12

22

28: function stop()29: {30: worker.port.terminate();31: }32: </script>33: </head>34: <body>35: 값 입력 : <input type="text" id="num">36: <input type="button" onclick="calc()" value=" 실행 ">37: <input type="button" onclick="stop()" value=" 중지 ">38: </body>39: </html>

01: onconnect = function(event)02: {03: var port = event.ports[0];04:05: port.onmessage = function(event)06: {07: var num = event.data;08: var total = 0;09: var i;10:11: for(i=num; i>0; i--)12: {13: if(num % i == 0)14: total++;15: }16:17: port.postMessage(total);18: };19: };

웹 소켓웹 페이지 요청

어떠한 정보를 보기 위해서는 항상 클라이언트에서 서버에 페이지 요청을 해야 함


Chapter12

23

웹 소켓웹 소켓

별도의 플러그인이 필요 없는 순수한 웹 환경에서 양방향 통신이 가능 실시간으로 데이터들을 주고받을 수 있음 브라우저 지원 현황


Chapter12

24

웹 소켓 클라이언트웹 소켓 클라이언트

서버 연결 , 데이터 송신 , 데이터 수신만 정의하면 됨 서버 연결을 위해서는 WebSocket 객체를 생성해야 함

URL 을 지정할 때는 일반적인 http 나 https 를 사용하지 않고 일반 통신인 경우에는 ws 를 사용하며 보안 통신일 경우에는 wss 를 사용


Chapter12

25

웹 소켓 클라이언트웹 소켓 클라이언트

서버와의 연결이 완료되면 서버와의 데이터를 주고받을 준비가 완료된 것 클라이언트에서 서버로 데이터를 보내기 위해서는 send() 메서드를 사용

send() 메서드의 인수로는 보내고자 하는 데이터 문자열을 지정


Chapter12

26

웹 소켓 클라이언트 웹 소켓 클라이언트

서버에서 보내는 데이터를 받기 위해서는 이벤트를 사용

onopen 이벤트와 onclose 이벤트는 서버와의 연결이 설정되거나 끊어질 경우에 대한 처리를 하면 되고 서버에서 보내는 데이터는 onmessage 이벤트를 사용


Chapter12

27

웹 소켓 클라이언트


Chapter12

28

웹 소켓 서버웹 소켓 서버

별도의 소켓 서버를 만들어야 함 다양한 오픈 소스가 제공되고 있음

파이썬 pywebsocket (http://code.google.com/p/pyweb-socket/)

PHP phpwebsocket (http://code.google.com/p/php-websocket/)

자바 jWebSocket (http://jwebsocket.org/) 루비 web-socket-ruby (https://github.com/gimite/web-

socket-ruby) 자바스크립트 Socket.IO-node (http://nodejs.org)


Chapter12

29

jWebSocket1 단계

jWebSocket 은 자바로 되어 있기 때문에 자바 가상머신이 설치되어 있어야 함 자바 가상머신인 JRE 를 설치하기 위해서는 오라클 홈페이지 (http://www.oracle.com/technetwork/

java/index.html) 에 접속하여 JRE 를 다운로드 받음 다운로드받은 후에는 환경 변수 설정


Chapter12

30

jWebSocket2 단계

http://jwebsocket.org/ 웹 페이지에서 jWebSocket 라이브러리를 다운로드받음


Chapter12

31

jWebSocket3 단계

서버 구동을 위하여 jWebSocketServer 을 다운로드받은 후 압축을 해제 환경 변수에 JWEBSOCKET_HOME 의 경로를 지정


Chapter12

32

jWebSocket4 단계

압축을 해제한 폴더 안으로 들어가 bin 폴더의 jWeb-SocketServer.bat 파일을 실행


Chapter12

33

jWebSocket5 단계

서버 구동이 완료되면 jWebSocketClient 를 다운받은 후 압축을 해제


Chapter12

34

chapter12 웹 워커 & 웹 소켓

Documents