HTML5 - Web Worker, Web Socket, Geolocation

HTML5 - Web Worker, Web Socket, Geolocation

(1) 웹 워커

전용 워커의 생성과 메시지 전달

워커의 오류 처리

• worker.onerror = function(event) {
• var err_msg = event.message + " \n" +
• event.filename + " 의 " +
• event.lineno + " 번째 줄에서 오류 발생"
• alert(err_msg);
• }

공유 워커의 생성과 메시지 전달

(2) 웹 소켓

별도의 플러그인이 필요 없이 순수 웹 환경에서 실시간 양방향 통신을 위한 스펙

• 지금까지 존재했던 통신 방법과 웹 소켓의 결정적인 차이는 프로토콜에 있다. 웹 소켓 프로토콜은 접속 확립에 HTTP를 사용하지만, 그 이후의 통신은 웹 소켓의 독자 프로토콜로 이루어진다.

웹 소켓 클라이언트

웹 소켓 클라이언트

서버 연결	var 변수 = new WebSocket(“ws://웹소켓서버URL”);         ws → 일반통신, wss → 보안 통신
데이터 송신	변수.send(“송신데이터”);
데이터 수신	변수.onmessage = function (event) {     //수신 메시지(event.data) 처리 }

웹 소켓 이벤트

• onopen → 웹 소켓 연결 요청 시 서버에서 응답하여 연결이 설정되면 발생
• onerror → 오류가 있을 때 발생
• onclose → 웹 소켓 끊어지면 발생
• onmessage → 메시지가 수신되는 순간 발생

웹 소켓 메서드

• send() → 클라이언트에서 서버로 데이터 전송
• close() → 웹 소켓의 연결을 종료

웹 소켓 클라이언트의 기본 형식

• //서버 연결
• var websocket = new WebSocket("ws://…");
• // 데이터 송신
• function doSend(data) {
• websocket.send(data);
• }
• // 데이터 수신시 호출
• websocket.onmessage = function(event) {
• //(서버→클라이언트) 메시지 처리
• }
• //서버 연결시 호출
• websocket.onopen = function(event) {
• //데이터 송신: doSend("Hello");
• }
• //서버 종료시 호출
• websocket.onclose = function(event) {
• //이벤트 처리: alert("서버 연결 종료");
• }

웹 소켓 서버

• 웹 소켓 서버는 기존 TCP 소켓과는 다른 프로토콜로 설계되어 기존 TCP 서버를 그대로 이용하는 것이 불가 → 별도의 웹 소켓 서버가 필요

(3) 위치 정보를 위한 Geolocation API

위치 정보와 관련된 메서드

위치 정보와 관련된 메서드

메서드	설명
getCurrentPosition()	현재 위치 정보를 한 번만 얻기 위한 메서드
watchPosition()	현재 위치를 연속적으로 얻기 위한 메서드 (clearWatch()가 호출될 때까지 동작)
clearWatch()	현재 위치 추적을 중지

navigator.geolocation.getCurrentPositon(성공콜백함수, 실패콜백함수, 옵션) 메서드

• 첫 번째 인자 관련: 위치 정보와 관련해서 구할 수 있는 정보

  파일 정보 관련 속성

  속성		설명
  coords	latitude	위도
  	longitude	경도
  	altitude	GPS 고도 (미터)
  	accuracy	위도, 경도의 정밀도 (미터)
  	altitudeAccuracy	고도의 정밀도 (미터)
  	heading	이동 중일 때의 진행 방향 (각도)
  	speed	이동 중일 때의 속도 (미터/초)
  timestamp		위치 정보를 얻은 시각 (1970.1.1.부터의 시간을 ms로 표현)

• 두 번째 인자 관련: 오류와 관련된 정보

  오류와 관련된 정보

  속성	설명
  code	오류 코드 웹 스토리지 관련 메서드 및 속성 오류 코드 값 값 설명 PERMISSION_ERROR 1 권한 없음 POSITION_UNAVAILABLE 2 위치 정보를 얻을 수 없음 TIMEOUT 3 시간제한 초과
  message	오류 내용을 텍스트로 반환

• 세 번째 인자 관련: 지정 가능한 옵션

  지정 가능한 옵션

  메서드/속성	설명
  enableHighAccuracy	정확도가 높은 위치 정보를 얻도록 요청
  timeout	위치 정보를 얻을 때까지 기다리는 제한 시간 설정
  maximumAge	캐시된 위치 정보의 유효 시간 설정

watchPosition() 메서드

• 인자의 사용 방법은 getCurrentPosition() 메서드와 동일
• var 식별ID = navigator.geolocation.watchPosition(…);
• clearWatch() 메서드 → navigator.geolocation.clearWatch(식별ID);