Chapter12 웹 워커 & 웹 소켓

Chapter12웹 워커& 웹 소켓 HTML5 Programming

Contents Chapter12 1. 웹워커 2. 웹 소켓

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

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

멀티 태스킹과 멀티 스레드 Chapter12 • 멀티 태스킹(MultiTasking) • 운영체제는 CPU의 시간을 쪼개어 각각의 프로그램에 할당하여 동시에 실행하는 것처럼 보이게 하는 것 • 예 : 컴퓨터에서 음악을 들으며 웹 서핑을 하는 것 • 멀티 스레드(MultiThread) • 하나의 프로그램 내에서 여러 개의 기능이 동시에 이루어지는 것 • 예 : MP3 파일을 재생하는데 MP3 플레이어에서 자동으로 MP3 파일의 압축을 해제하며 동시에 음악을 재생하는 것

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

워커 생성 및 메시지 전달 Chapter12 • 워커 생성 및 메시지 • 워커에서 생성한 함수나 변수는 외부에서 호출이 불가능함. 그러므로 워커에서 작업한 내용을 메인 UI 스레드에서 알기 위해서는 메시지를 주고받아야 함 • 메시지를 주고받기 위해서는 postMessage() 메서드와onmessage이벤트 핸들러를사용 • postMessage() 메서드는 데이터를 보내기 위해 사용하는 것이며 onmessage이벤트 핸들러는postMessage() 메서드에 담겨 온 데이터를 수신하기 위해 사용

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

워커 생성 및 메시지 전달 Chapter12 • 메시지 수신 • 메인 UI 스레드에서워커로 보낸 데이터를 워커에서 받기 위해서는 onmessage이벤트 핸들러를사용

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

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

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

프로그램 12-1 Chapter12 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"> 05: <title> 웹 워커</title> 06: <script type="text/javascript"> 07: varworker; 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 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: varnum = event.data; 04: vartotal = 0; 05: vari; 06: 07: for(i=num; i>0; i--) 08: { 09: if(num% i == 0) 10: total++; 11: } 12: 13: postMessage(total); 14: };

공유 워커의 사용 Chapter12 • 공유 워커 • 워커는 기본적으로 하나의 워커 객체와 백그라운드의 프로세스가 일대일로 대응하는 형태로 되어 있음. • 하지만 여러 개의 워커 객체가 하나의 백그라운드 프로세스를 공유해서 사용 할 수도 있음 • 객체를 생성할 때 ShareWorker() 생성자를호출 • 인수로는 워커와 마찬가지로 자바스크립트 파일명이 들어가며 추가로 워커의 이름도 지정

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

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

공유 워커의 사용 Chapter12 • 데이터 수신 • port 속성은 메인 UI 스레드와 공유 워커와의 통신을 위한 채널이라고 할 수 있음 • port 속성을 사용하여 전달한 데이터는 공유 워커에서onconnect이벤트 핸들러를사용하여 전달받아야 함

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

공유 워커의 사용 Chapter12 • 데이터 수신 • 메인 UI 스레드에서는 메시지 수신받을 대상 워커의 객체의 포트에 대하여 onmessage핸들러를 지정하여 처리

프로그램 12-2 Chapter12 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"> 05: <title> 웹 워커</title> 06: <script type="text/javascript"> 07: varworker; 08: 09: function calc() 10: { 11: var num = document.getElementById("num").value; 12: 13: varworker = 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 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: varport = event.ports[0]; 04: 05: port.onmessage= function(event) 06: { 07: varnum = event.data; 08: vartotal = 0; 09: vari; 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 • 웹 페이지 요청 • 어떠한 정보를 보기 위해서는 항상 클라이언트에서 서버에 페이지 요청을 해야 함

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

웹 소켓 클라이언트 Chapter12 • 웹 소켓 클라이언트 • 서버 연결, 데이터 송신, 데이터 수신만 정의하면 됨 • 서버 연결을 위해서는 WebSocket객체를 생성해야 함 • URL을 지정할 때는 일반적인 http나 https를 사용하지 않고 일반 통신인 경우에는 ws를 사용하며 보안 통신일 경우에는 wss를 사용

웹 소켓 클라이언트 Chapter12 • 웹 소켓 클라이언트 • 서버와의 연결이 완료되면 서버와의 데이터를 주고받을 준비가 완료된 것 • 클라이언트에서 서버로 데이터를 보내기 위해서는 send() 메서드를사용 • send() 메서드의인수로는 보내고자 하는 데이터 문자열을 지정

웹 소켓 클라이언트 Chapter12 • 웹 소켓 클라이언트 • 서버에서 보내는 데이터를 받기 위해서는 이벤트를 사용 • onopen이벤트와 onclose이벤트는 서버와의 연결이 설정되거나 끊어질 경우에 대한 처리를 하면 되고 서버에서 보내는 데이터는 onmessage이벤트를 사용

웹 소켓 클라이언트 Chapter12

웹 소켓 서버 Chapter12 • 웹 소켓 서버 • 별도의 소켓 서버를 만들어야 함 • 다양한 오픈소스가 제공되고 있음 • 파이썬pywebsocket (http://code.google.com/p/pywebsocket/) • PHP phpwebsocket (http://code.google.com/p/phpwebsocket/) • 자바 jWebSocket (http://jwebsocket.org/) • 루비 web-socket-ruby (https://github.com/gimite/web-socket-ruby) • 자바스크립트 Socket.IO-node (http://nodejs.org)

jWebSocket Chapter12 • 1단계 • jWebSocket은 자바로 되어 있기 때문에 자바 가상머신이 설치되어 있어야 함 • 자바 가상머신인JRE를 설치하기 위해서는 오라클 홈페이지 (http://www.oracle.com/technetwork/java/index.html)에 접속하여 JRE를 다운로드 받음 • 다운로드받은 후에는 환경 변수 설정

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

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

jWebSocket Chapter12 • 4단계 • 압축을 해제한 폴더 안으로 들어가 bin 폴더의 jWebSocketServer.bat 파일을 실행

jWebSocket Chapter12 • 5단계 • 서버 구동이 완료되면 jWebSocketClient를 다운받은 후 압축을 해제

Chapter12 웹 워커 & 웹 소켓