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() 메서드와 onmessage 이벤트 핸들러를 사용 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 웹 워커 & 웹 소켓 Chapter : 02: 03: 04: 05: 웹 워커 06: 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 웹 워커 & 웹 소켓 Chapter : function stop() 29: { 30: worker.terminate(); 31: } 32: 33: 34: 35: 값 입력 : 36: 37: 38: 39: 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 스레드에 데이터를 전달하기 위해서는 onconnect 이벤트 핸들러를 통하여 확인한 포트의 postMessage() 메서드를 사용하면 됨 웹 워커 & 웹 소켓 Chapter12 19

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

프로그램 12-2 웹 워커 & 웹 소켓 Chapter : 02: 03: 04: 05: 웹 워커 06: 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 웹 워커 & 웹 소켓 Chapter : function stop() 29: { 30: worker.port.terminate(); 31: } 32: 33: 34: 35: 값 입력 : 36: 37: 38: 39: 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 ( PHP phpwebsocket ( 자바 jWebSocket ( 루비 web-socket-ruby ( 자바스크립트 Socket.IO-node ( 웹 워커 & 웹 소켓 Chapter12 29

jWebSocket  1 단계 jWebSocket 은 자바로 되어 있기 때문에 자바 가상머 신이 설치되어 있어야 함 자바 가상머신인 JRE 를 설치하기 위해서는 오라클 홈 페이지 ( x.html) 에 접속하여 JRE 를 다운로드 받음 다운로드받은 후에는 환경 변수 설정 웹 워커 & 웹 소켓 Chapter12 30

jWebSocket  2 단계 웹 페이지에서 jWebSocket 라이브러리를 다운로드받음 웹 워커 & 웹 소켓 Chapter12 31

jWebSocket  3 단계 서버 구동을 위하여 jWebSocketServer 을 다운로드 받은 후 압축을 해제 환경 변수에 JWEBSOCKET_HOME 의 경로를 지정 웹 워커 & 웹 소켓 Chapter12 32

jWebSocket  4 단계 압축을 해제한 폴더 안으로 들어가 bin 폴더의 jWebSocketServer.bat 파일을 실행 웹 워커 & 웹 소켓 Chapter12 33

jWebSocket  5 단계 서버 구동이 완료되면 jWebSocketClient 를 다운받 은 후 압축을 해제 웹 워커 & 웹 소켓 Chapter12 34