안녕하십니까?

이번 동영상은 HTML 4와 HTML 5 의 차이점을 살펴봅니다.

관련 글은 [HTML 5] 2. HTML4 vs HTML5 (1) 를 참고하시기 바랍니다.


감사합니다.



행복한 고수되십시요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


[HTML 5] 1. HTML 5 개요 - 동영상

[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상
[HTML 5] 3. HTML4 vs HTML5 (2) - 동영상
[HTML 5] 4. Sementic Element (1) - 동영상
[HTML 5] 5. Sementic Element (2) - 동영상
[HTML 5] 6. Strong Web Form - 동영상
[HTML 5] 7. Rich Text Edit API - 동영상
[HTML 5] 8. Video Element - 동영상
[HTML 5] 9. Audio Element - 동영상
[HTML 5] 10. Canvas Element - 동영상
[HTML 5] 11. Drag & Drop API - 동영상
[HTML 5] 12. Offline Web Application - 동영상
[HTML 5] 13. Communication API - 동영상
[HTML 5] 14. Web Storage - 동영상
[HTML 5] 15. Web SQL Database - 동영상
[HTML 5] 16. Web Worker - 동영상
[HTML 5] 17. Web Socket - 동영상
[HTML 5] 18. Geolocation API - 동영상
[HTML 5] 19. SVG - 동영상
[HTML 5] 20. File API - 동영상


[HTML 5] 1. HTML 5 의 개요
[HTML 5] 2. HTML4 vs HTML5 (1)
[HTML 5] 3. HTML4 vs HTML5 (2)
[HTML 5] 4. Sementic Element (1)
[HTML 5] 5. Sementic Element (2)
[HTML 5] 6. Strong Web Form
[HTML 5] 7. Rich Text Edit API
[HTML 5] 8. Video Element
[HTML 5] 9. Audio Element
[HTML 5] 10. Canvas Element
[HTML 5] 11. Drag & Drop API
[HTML 5] 12. Offline Web Application
[HTML 5] 13. Communication API
[HTML 5] 14. Web Storage
[HTML 5] 15. Web SQL Database
[HTML 5] 16. Web Worker
[HTML 5] 17. Web Socket
[HTML 5] 18. Geolocation API
[HTML 5] 19. SVG
[HTML 5] 20. File API
 





'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 4. Sementic Element (1) - 동영상  (0) 2011.07.15
[HTML 5] 3. HTML4 vs HTML5 (2) - 동영상  (0) 2011.07.15
[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상  (0) 2011.07.15
[HTML 5] 1. HTML 5 개요 - 동영상  (0) 2011.07.15
[HTML 5] 20. File API  (2) 2011.06.30
[HTML 5] 19. SVG  (0) 2011.06.29
Posted by woojja

댓글을 달아 주세요


안녕하십니까? 우정환입니다.

이번 동영상은 HTML 의 역사와 HTML 5 의 표준화 일정과 같은 개략적인 내용을 다루고 있습니다.

관련 글은 [HTML 5] 1. HTML 5 의 개요 를 참고하시기 바랍니다.

많이 버벅거려도 이뿌게 봐주셔요... ^^;




감사합니다.

그럼... 행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




[HTML 5] 1. HTML 5 개요 - 동영상

[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상
[HTML 5] 3. HTML4 vs HTML5 (2) - 동영상
[HTML 5] 4. Sementic Element (1) - 동영상
[HTML 5] 5. Sementic Element (2) - 동영상
[HTML 5] 6. Strong Web Form - 동영상
[HTML 5] 7. Rich Text Edit API - 동영상
[HTML 5] 8. Video Element - 동영상
[HTML 5] 9. Audio Element - 동영상
[HTML 5] 10. Canvas Element - 동영상
[HTML 5] 11. Drag & Drop API - 동영상
[HTML 5] 12. Offline Web Application - 동영상
[HTML 5] 13. Communication API - 동영상
[HTML 5] 14. Web Storage - 동영상
[HTML 5] 15. Web SQL Database - 동영상
[HTML 5] 16. Web Worker - 동영상
[HTML 5] 17. Web Socket - 동영상
[HTML 5] 18. Geolocation API - 동영상
[HTML 5] 19. SVG - 동영상
[HTML 5] 20. File API - 동영상


[HTML 5] 1. HTML 5 의 개요
[HTML 5] 2. HTML4 vs HTML5 (1)
[HTML 5] 3. HTML4 vs HTML5 (2)
[HTML 5] 4. Sementic Element (1)
[HTML 5] 5. Sementic Element (2)
[HTML 5] 6. Strong Web Form
[HTML 5] 7. Rich Text Edit API
[HTML 5] 8. Video Element
[HTML 5] 9. Audio Element
[HTML 5] 10. Canvas Element
[HTML 5] 11. Drag & Drop API
[HTML 5] 12. Offline Web Application
[HTML 5] 13. Communication API
[HTML 5] 14. Web Storage
[HTML 5] 15. Web SQL Database
[HTML 5] 16. Web Worker
[HTML 5] 17. Web Socket
[HTML 5] 18. Geolocation API
[HTML 5] 19. SVG
[HTML 5] 20. File API
 





'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 3. HTML4 vs HTML5 (2) - 동영상  (0) 2011.07.15
[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상  (0) 2011.07.15
[HTML 5] 1. HTML 5 개요 - 동영상  (0) 2011.07.15
[HTML 5] 20. File API  (2) 2011.06.30
[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
Posted by woojja

댓글을 달아 주세요

2011. 6. 30. 09:33

안녕하세요?

이번엔 HTML 5 의 File API 를 살펴보려 합니다.

이젠 Web Application 으로 사용자 PC 의 파일을 건드릴 수 있습니다. File API 로 요... 이젠 훨씬 더 많은 일들을 할 수 있겠죠?
엄청나다고 생각하지 않으신가요?

19-1. File API Interface
  • File interface
  • FileReader interface
File interface 를 사용하면 File 의 File Name 이나 Size 등 기본적인 정보에 접근 할 수 있습니다.
File Reader interface 는 File 의 내용을 읽을 수 있는 기능을 제공합니다.

아... 갑자기 걱정하시는 분들이 계시겠죠?
그럼. 보안은? 이라고...
File interface 는 Browser 가 막 건드릴 수있는 것이 아니라 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에 한정되므로 안심해도 좋을 것입니다.


19-2. File interface

File interface 가 가지고 있는 속성과 함수는 다음과 같습니다.
 Attribute/Method  설명
 name  File 이름
 type  File 의 MIME Type(알수 없을때는 null)
 urn  File 의 범용 식별자
 size  File Size
 slice(start, length)  시작위치와 끝 위치를 지정하여 파일의 내용을 잘라내 새로운 Blob객체를 만드는 함수
위 사항들은 아래 예제에서 사용법을 확인하실 수 있을 것입니다.

19-3. FileReader interface

FileReader interface 는 비동기적인 상황에서 사용을 하는데요.
다음은  FileReader interface 가 가지고 있는 속성과 함수들입니다. 
 Attribute/Method  설명
 readAsBinaryString(fileBlob)  File 내용을 읽어 Binary 문자열로 저장
 readAsText(fileBlob, encoding)  File 내용을 읽어 들여 문자열로 저장, 두번째 인수는 File 의 문자 encodeing 을 지정할 수 있음(기본값 : UTF-8)
 readAsDataURL(file)  File 내용을 읽어 dataURL 형식의 문자열로 저장
 result  읽어들인 File 내용
 error  error 발생시의 error 정보
 onload  읽어들이기에 성공 했을 때 호출하는 event handler. load event 에 대응
 onprogress  읽어들이기의 진행 상황을 얻을 수있는 event handler. progress event 에 대응
 onerror  읽어들이기 error 시에 호출되는 event handler. error event 에 대응.

19-4. Error

다음은 FileReader 가 동작하는 중에 발생하는 Error 에 대한 상수값들입니다.
 상수  Code  설명
 NOT_FOUND_ERR  1  읽을 File 을 찾지 못할때
 SECURITY_ERR  2  Web Application 이 Access 하기에 안전하지 못한 File일 때
 File 에 너무 많은 읽기 호출이 있을 때
 사용자의 선택한 이후에 File 에 변경이 있을 때 
인 상황에서 사용할 수 있습니다.
 ABORT_ERR  3  예를 들어 abort() 함수 호출과 같은 것으로 인해 읽기가 중지되었을 때
 NOT_READABLE_ERR  4  File 접근 권한 문제와 같은 것으로 인해 File 을 읽지 못할때
 ENCODING_ERR  5  동기적, 비동기적으로 readAsText() 함수를 사용할 때는 사용할 수없습니다.
 DataURL FH 로 표현될 수 있는 File 이나 Blob 을 구현한 제한된 곳의 DataURL 에 대한 URL 길이 제한에 걸렸을 때 



19-5. 사용법

File interface 는 다음과 같이 사용할 수있습니다. File Name 과 File Size 를 조회합니다.
var file = document.getElementById("file").files[0];

document.getElementById("fileName").textContent = file.name;
document.getElementById("fileSize").textContent = "(" + file.size + "byte)";


다음은 FileReader 를 생성하여 사용하는 방법입니다.
var reader = new FileReader();


19-6. 예제

이젠 위 내용들을 바탕으로 예제를 살펴보겠습니다.
아래 예제는 File interface 와 FileReader interface 를 사용하여 File 을 선택하여 File 의 이름과 Size 를 표시하고, File 의 내용을 읽어 TextBox 에 표시합니다.
<!DOCTYPE html>
    <head>
        <title>HTML5 File API Test</title>
        <meta charset="utf-8" />
    </head>
    <script>
        function readFile() {
            var file = document.getElementById("file").files[0];

            document.getElementById("fileName").textContent = file.name;
            document.getElementById("fileSize").textContent = "(" + file.size + "byte)";

            var reader = new FileReader();

            reader.onload = function() {
                var display = document.getElementById("content");
                display.textContent = reader.result;
            };

            reader.onerror = function(evt) {
                alert(evt.target.error.code);
            };

            var encodingList = document.getElementById("encoding");
            var encoding = encodingList.options[encodingList.selectedIndex].value;  
          
            reader.readAsText(file, encoding);

        };
    </script>
    <body>
        <h1>HTML5 File API 테스트</h1>
        <select id="encoding">
            <option>UTF-8</option>
        </select>
        <button onclick="readFile()">읽기</button><br />
        <div>
            <span id="fileName">File Name</span>
            <span id="fileSize">File Size</span>
        </div>
        <textarea id="content" readonly style="width:600px; height:400px;"></textarea>
    </body>
</html>

(발췌: 혁명을 꿈꾸다 HTML5 & API 입문)

위 파일은 저장할 때 UTF-8 방식으로 저장해 주십시요. 읽을 때 Encoding 을 UTF-8 로 읽겠다고 했으니 말이죠...

Web Page 를 실행시키고 위 파일을 다시 읽어봤습니다.


여러분들께서도 한번 작성하시고 실행시켜보십시요.

비동기 방식의 FileReaderSync 도 있습니다만 Worker 안에서 사용해야하고 FileReader 보다는 간단하다는 특징이 있습니다.
다른 사항들은 거의 비슷하므로 접근하기는 비동기방식의 FileReader보다 훨씬 쉬우실 것입니다.


이제까지 File API 를 살펴보았습니다.
이젠 Web Page 에서 내 PC 의 File 을 읽기위해서 File 을 서버로 Upload 할 필요가 없습니다.
그만큼 Server 의 부하도 줄일수 있겠고, Upload 하고 File 을 읽고 다시 읽은 Streaming 을 내 PC 로 받는 그런 진행되는 동안의 대기 시간이 줄어들 것입니다.


위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
을 참고 하였습니다.



행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


[HTML 5] 1. HTML 5 의 개요
[HTML 5] 2. HTML4 vs HTML5 (1)
[HTML 5] 3. HTML4 vs HTML5 (2)
[HTML 5] 4. Sementic Element (1)
[HTML 5] 5. Sementic Element (2)
[HTML 5] 6. Strong Web Form
[HTML 5] 7. Rich Text Edit API
[HTML 5] 8. Video Element
[HTML 5] 9. Audio Element
[HTML 5] 10. Canvas Element
[HTML 5] 11. Drag & Drop API
[HTML 5] 12. Offline Web Application
[HTML 5] 13. Communication API
[HTML 5] 14. Web Storage
[HTML 5] 15. Web SQL Database
[HTML 5] 16. Web Worker
[HTML 5] 17. Web Socket
[HTML 5] 18. Geolocation API
[HTML 5] 19. SVG
[HTML 5] 20. File API


[HTML 5] 1. HTML 5 개요 - 동영상
[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상
[HTML 5] 3. HTML4 vs HTML5 (2) - 동영상
[HTML 5] 4. Sementic Element (1) - 동영상
[HTML 5] 5. Sementic Element (2) - 동영상
[HTML 5] 6. Strong Web Form - 동영상
[HTML 5] 7. Rich Text Edit API - 동영상
[HTML 5] 8. Video Element - 동영상
[HTML 5] 9. Audio Element - 동영상
[HTML 5] 10. Canvas Element - 동영상
[HTML 5] 11. Drag & Drop API - 동영상
[HTML 5] 12. Offline Web Application - 동영상
[HTML 5] 13. Communication API - 동영상
[HTML 5] 14. Web Storage - 동영상
[HTML 5] 15. Web SQL Database - 동영상
[HTML 5] 16. Web Worker - 동영상
[HTML 5] 17. Web Socket - 동영상
[HTML 5] 18. Geolocation API - 동영상
[HTML 5] 19. SVG - 동영상
[HTML 5] 20. File API - 동영상






'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상  (0) 2011.07.15
[HTML 5] 1. HTML 5 개요 - 동영상  (0) 2011.07.15
[HTML 5] 20. File API  (2) 2011.06.30
[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
Posted by woojja

댓글을 달아 주세요

  1. 2011.10.13 11:15

    예제에 input 창이 없는데 대체 어디서 나온건가요? ㅠㅜ

    • 2011.11.08 17:58 신고

      어익후.. 그렇네요... Script 들 수정하다가 지웠나봐요...

      input 을 File Type 으로 하나 만드셔서 추가하시면 될텐데...

      <input type="file" id="file">

      벌써 해결하셨죠? ^^

2011. 6. 29. 08:59

안녕하셔요? 이번엔 SVG 를 살펴보려합니다.

SVG. Scalable Vector Graphics 의 약자로 XML 을 기반으로 한 Drawing 표준을 이야기합니다.
SVG 는 HTML 5 가 논의되기 이전부터 사용되던 기술로 HTML 5 페이지 상에 선, 곡선, Path, 도형 등을 Vector 로 표현할 수 있다는 Canvas 와는 조금 다른 점이 있습니다.
Canvas 와는 다르게 Pixel 단위의 이미지밖에 표현할 수 없는 Web Page 에서  interactive 한 animation 이나  Vector graphic 을 SVG를 이용하여 표현할 수 있습니다. Silverlight 나 Flash 를 떠올려 보시면 좋겠죠...

SVG 가 표현할 수 있는 효과들을 간단히 살펴보면

  • 기본 도형(예: 원, 다각형)
  • 기타 image 형식 (예: PNG)
  • Bezier Pass, Curve
  • Text
  • Transparency
  • Transformation(회전, 기울이기, 확대/축소)
  • Gradient
  • Animation
뭐... Canvas 에서도 SVG 를 읽어 표현할 수있다고 하는데 직접 관련이 있는 것은 아닙니다.

그럼 Canvas 와 SVG 와의 차이점을 알아보도록 하죠.

   Canvas  SVG
 이미지 처리방식  Bitmap  Vector
 DOM  존재하지 않음(DOM Control 불가)  존재함(Script 로 Control 가능)
 외부 이미지 편집  Bitmap image 편집 용이  Vector image 편집 용이
 성능  높은 해상도의 이미지를 사용하면 성능 저하  이미지가 복잡해질수록 Markup 이 복잡해져 성능이 저하
 Animation  Animation API 가 없으므로 Script 의 Timer 를 사용  높은 수준의 Animation 을 지원
 Cross Browsing  모든 Web Browser 에서 지원하지 않음  모든 Browser 에서 지원되는 Drawing 표준
 외부 이미지로 저장  jpg, png 등으로 저장 가능  불가
 적합한 서비스  Graph 구현, Game  Graph 구현, 매우 세밀한 해상도를 지원하는 UI 및 Application
 적합하지 않은 서비스  Standalone Application UI  Game


이런 SVG 의 장점은 다음과 같은 것들을 들 수 있습니다.
접근성 image 를 접근 가능하게 만들기 위해 설계되었습니다.
파일크기 bitmap image 보다 작습니다.
크기 조절에도 깨지지 않음 Vector graphic 의 특징.
Script 조작 가능 JavaScript 와 DOM 으로 접근 가능.
Animation SGV 언어 Core 자체에 animate 기능이 내장되어 있습니다.


18-1. 사용법과 예제
XML 을 기반으로하기 때문에 기본적으로는 XHTML 에서만 사용할 수 있습니다만 HTML 상에서도 표현이 가능합니다.

SVG 문서는 SVG Element,  SVG Attribute, CSS 로 구성됩니다.
SVG 는 XHTML 문서 자체에 인라인으로 들어가거나 별도의 SVG 파일로 작성된 후 object 나 img Element 로 HTML 이나 XHTML 문서와 링크되어 삽입됟 수 있는데 어느 방식이든 모든 SVG 의 Root Element 는 SVG 입니다.

<svg xmlns="http://www.w3.org/2000/svg">...</svg>

SVG 를 Web Page 에 넣는 방법은 두가지가 있습니다.
1. SVG 파일을 img 나 Object Tag 에 삽입하는 방법.
2. Web Page 에 직접 삽입하는 방법.

먼저 Tag 에 SVG 파일을 삽입하는 방법입니다.
<!DOCTYPE html>
<head>
    <title>SVG Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML5 SVG Circle</h2>
    <img src="SVG_Test.svg" alt="Test SVG" />
    <object type="image/svg+xml" data="SVG_Test.svg" width="300px" height="300px">

        <p>사용하시는 Browser 는 이 그림을 표시하는 기능이 없습니다.
        <a href="http://www.adobe.com/svg/viewer/install/main.html">SVG 플러그인</a>을 설치해보셔요.</P>
    </object>
</body>
</html>


SVG_Test.svg
<svg id="svgelem" height="300" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="150" cy="150" r="150" fill="cyan" />
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:blue;stroke-width:2"/>
    <line x1="0" y1="300" x2="300" y2="0" style="stroke:blue;stroke-width:2"/>
</svg>


이 방법의 특징은 모든 Web Browser 에서 지원을 하는 방법이라는 것입니다.
반면 아래의 직접 SVG를 입력하는 방법은 ie, chrome 을 제외한 Browser 는 지원하지 않습니다.


다음은 Web Page  에 직접 SVG 를 입력하는 방법입니다.

<!DOCTYPE html>
<head>
    <title>SVG Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML5 SVG Circle</h2>
    <svg id="svgelem" height="600" xmlns="http://www.w3.org/2000/svg">
        <circle id="redcircle" cx="150" cy="150" r="150" fill="cyan" />
        <rect id="redrect" x="100" y="100"  width="300" height="100" fill="red" />
        <line x1="0" y1="0" x2="200" y2="400" style="stroke:blue;stroke-width:2"/>
        <ellipse cx="150" cy="350" rx="100" ry="50" fill="brown" />
        <polygon  points="20,10 300,20, 170,50" fill="green" />
        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="pink" />
        <defs>
            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="250" rx="100" ry="50" style="fill:url(#gradient)" />
    </svg>

</body>
</html>




그럼 이번엔 Animation 기능을 넣어 볼까요?

<!DOCTYPE html>
<head>
    <title>SVG Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML5 SVG Animation Test</h2>
    <img src="SVG_Animate_Test.svg" alt="Test SVG" />
    <object type="image/svg+xml" data="SVG_Animate_Test.svg">
        <p>사용하시는 Browser 는 이 그림을 표시하는 기능이 없습니다.
        <a href="
http://www.adobe.com/svg/viewer/install/main.html">SVG 플러그인</a>을 설치해보셔요.</P>
    </object>
</body>
</html>


SVG_Animate_Test.svg
<svg id="svgelem" height="600" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1px;stroke:rgb(0,0,0)">
        <animate attributeName="stroke-width" values="1px;50px;1px;" dur="2s" repeatCount="indefinite" />
    </rect>
    <ellipse stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%">
        <animate attributeName="rx" values="0%;50%;0%" dur="2s" repeatCount="indefinite" />
        <animate attributeName="ry" values="0%;50%;0%" dur="2s" repeatCount="indefinite" />
    </ellipse>
</svg>

(발췌 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS)

아래 Capture image 는 위 코드를 실행한 결과 입니다. Animation 기능이 동작하네요...(두 도형이 점차로 커졌다가 작아지는 것을 반복하는 예제입니다.)

 

위 SVG 코드들을 작성하다보니 초기 WPF 코드를 작성하는 기분이 들었습니다. 손으로 노가다 해가면서 돌려보고, 수정하고, 돌려보고...

그래서 SVG Editor 를 몇가지 찾아 보았습니다.


inkscape (http://inkscape.org/)



Sketsa SVG Editor (http://www.kiyut.com/products/sketsa/index.html)


SVGDeveloper (http://www.perfectsvg.com/)

제가 보기엔 SVGDeveloper 가 매력적이네요...
SVG 에 관심이 있으신 분들께서는 위 Editor 를 다운받아서 설치해보시고 테스트 해보셔도 좋을 듯합니다.

SVG 는 Silverlight 이나 Flash 같은 Vector Graphic 을 사용하는 플러그인을 사용하지않고도 HTML 만으로? Vector Graphic 을 구현할 수 있는 환경을 만들어 준다는 장점이 있습니다. 하지만 SVG 를 작성하고, SVG 요소들을 DOM 조작을 통해 화려하고 interactive 한 Web 을 구현할 수 있을 것입니다. 하지만 이런 DOM 을 통한 Control 은 Memory 소모가 심하고 성능문제를 유발할 수도 있을 것입니다. 더우기 Canvas 를 통해 구현할 수있는 것까지(단순 이미지 동적생성같은...) SVG 를 사용할 필요는 없을 것입니다. Canvas 와 SVG 간의 특징을 잘 알고 적재적소에 사용할수 있도록 많은 연구가 필요할 것입니다.



그럼 이만 SVG 에 대한 살펴보기를 마치겠습니다.


위의 내용들은
웹표준 가이드 HTML5 CSS3
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


행복한 고수되십시요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\











'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 1. HTML 5 개요 - 동영상  (0) 2011.07.15
[HTML 5] 20. File API  (2) 2011.06.30
[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
Posted by woojja

댓글을 달아 주세요


안녕하십니까?

이번엔 Geolocation API 를 살펴보겠습니다.

Geolocation API 는 HTML 5 에 새롭게 추가된 사용자의 위치정보를 얻기위한 JavaScript API 입니다.
여러분들도 잘 아시겠지만 이젠 위치정보를 기반한 서비스가 우리 생활 곳곳에 퍼져있으며 많은 서비스들이 위치정보와 연동하여  사용자들에게 UX 의 편리함을 줄 것입니다.

Geolocation API 는 세개의 Method 로 이루어진 API 입니다.

그 전 먼저 알아야 할 점은 현재의 위치정보가 Network 정보로 부터 추측한 것인지 GPS 로 부터 얻은 것인지에 관한 자세한 내용은 알 수 없다는 것입니다. 단지 GPS 가 내장된 Smartphone 과 같은 Device 에서는 GPS 기능을 활용할 수있고 일반 PC 에서는 WiFi 같은 정보를 이용해서 현재 정보를 알아 낼 수 있습니다.
Geolocation 은 위치정보에 대한 정보를 GPS,  WiFi IP Address, GSM/CDMA 망을 사용하는 휴대전화의 IDs 등에서 얻어옵니다. 다만 PC 에서는 한정된 정보만 제공하여 이용이 불가능한 경우가 있고 특히 Mobile Browser 에서 유용한 API 라고 할 수있습니다.


17-1. 사용법
Geolocation API 와 관련된 함수는 모두 window.navigator 객체에 정의되어 있습니다.
다음 Method를 사용하여 위치정보를 얻어 올수 있습니다.

현재 위치를 한번만 얻기 위한 함수입니다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

다음 함수를 이용하여 위치정보를 계속 확인합니다.
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);

성공시 호출되는 successCallback 함수에 전달되는 위치정보에는 다음과 같은 정보들이 포함됩니다.
 위치정보 속성  coords 속성  설명
 coords  latitude  위도
 longitude  경도
 altitude  표고
 accuracy  위도, 경도의 오차 (단위와 오차)
 altitudeAccuracy  표고의 오차 (단위와 오차)
 heading  Device 의 진행 방향. 북쪽을 기준으로 한 시계방향의 각도로 나타냄
 speed  Device 의 진행 속도(미터/초). (이용할 수 없을 때는 null)
 timestamp  위치정보를 얻은 시각(1970년 1월 1일 부터의 milisecond)

Error 발생시 호출되는 errorCallback 함수에 전달되는 객체에 담겨져 있는 속성과 상수들입니다.
 속성/상수  설명
 code  Error Code
 UNKNOWN_ERROR  알수 없는 Error (Error code 값 : 0)
 PERMISSION_DENIED  권한 없음 Error (Error code 값 : 1)
 POSITION_UNAVAILABLE  위치정보를 얻을 수 없음 (Error code 값 : 2)
 TIMEOUT  시간제한 초과 (Error code 값 : 3)
 message  Error Message

위치정보를 조회시 입력하는 세번째 Parameter 인 option 에 지정할 수 있는 것들은 다음과 같습니다.
 속성/상수  설명
 enableHighAccuracy  정확도가 높은 위치 정보를 요청
 timeout  위치 정보 확인에 시간제한을 설정. 시간제한을 초과하면 TIMEOUT error 발생
 maximumAge  위치정보의 유효기간을 설정. 0 을 지정하면 항상 새로운 위치정보를 요청함

option 의 사용법은 아래와 같습니다.
내용을 보면 위치정보의 유효기간은 0 으로 항상 새로운 위치정보를 가져오며, 정확도 높은 위치정보를 요청합니다. 그리고 timeout 은 3초로 설정하고 있습니다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{maximumAge: 0, enableHighAccuracy: true, timeout: 3000 }
);

17-2. Bing Map 사용하기
예제로 Bing Map 을 사용해 보려합니다.
Bing Map 을 사용하기위해서 사전에 사용자 등록을 하고 사용 Key 를 받아야 하는데요. 간단히 Key 를 받는 과정을 보도록 하겠습니다.

Site 주소는 http://www.microsoft.com/maps/developers/web.aspx 입니다.

Get Account 를 클릭합니다.
Capture 가 안되었지만 Windows Live ID Passport 인증을 한번 묻습니다.
여러분들 모두 MSN Live Messenger 사용하시죠? 입력하시고 Login 이 완료되면 다음 화면으로 넘어갑니다.

새롭게 받을 거니까요...
New User 쪽의 Create 를 클릭합니다.

* 표시가 되어 있는 란에 간단하게 입력합니다.
 

조금 기다리시면 Account ID 가 생성이 됩니다. 그럼 "Create or view Keys" 를 Click 합니다.

* 표시가 되어 있는 란에 간단히 입력하시고요... "Submit" 버튼을 Click 합니다.
또 잠시 기다립니다.


아랫쪽에 보시면 짜자잔.. Key 가 생성이 되었군요.
이 생성된 Key 를 다음에 진행될 Geolocation 예제 소스에 Key 를 입력하는 곳에 입력해 주십시요.

17-3. 예제.

예제를 살펴보겠습니다.
이 예제는 제 PC 에서 동작할 것입니다. 이전에 설명드렸듯이 PC 에서 진행하는 경우 아주 제한적입니다. 주로 서울시 시청이 많이 찍히는데요.  그 옆동네가 찍히기도 합니다. ^^;

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    margin: 0;
    height: 100%;
    background-color: #404040;
}
#map {
     position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 600px;
    margin-left: -400px;
    margin-top: -300px;
}
</style>

<script charset="UTF-8" type="text/javascript" src="
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">

    var _map;

    function GetMap() {
        // Create a Bing map
        _map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "이곳에 Key를 넣습니다." });
        // Get the current position from the browser
        if (!navigator.geolocation)
            alert("This browser doesn't support geolocation");
        else
            navigator.geolocation.getCurrentPosition(onPositionReady, onError, { maximumAge: 0, timeout: 30000, enableHighAccuracy: true });
    };

    function onPositionReady(position) {
        // Apply the position to the map
        var location = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
        _map.setView({ zoom: 18, center: location });
        // Add a pushpin to the map representing the current location
        var pin = new Microsoft.Maps.Pushpin(location);
        _map.entities.push(pin);
    }

    function onError(err) {
        switch (err.code) {
            case 0:
                alert("Unknown error");
                break;
            case 1:
                alert("The user said no!");
                break;
            case 2:
                alert("Location data unavailable");
                break;
            case 3:
                alert("Location request timed out");
                break;
        }

    }
</script>
</head>
<body onload="GetMap();">
<div id="map" />
</body>
</html>

(참조 : http://www.wintellect.com/CS/blogs/jprosise/archive/2011/03/27/making-web-apps-sizzle-with-bing-maps-and-html5-s-geolocation-api.aspx)

위 소스를 각 Browser 에서 실행시키면 먼저 사용자의 위치정보를 공유하겠느냐 라는 메세지 창을 띄워 Geolocation 사용에 대한 동의를 구한 후 화면을 띄우게 됩니다.

같은 Page를 띄우긴 했지만 다른곳이 나오죠? ㅋㅋ
PC 에서는 신경쓰지 마셔요...

Google Map 의 경우는 Bing Map 보다는 Key 를 입력할 필요없이 Test 가 가능하기때문에 조금은 쉬우리라 생각합니다. 구현방법은 약간 차이가 나겠지만요... 

간단하게라도 살펴보시니 어떠십니까? Geolocation 을 여러분의 Site 에 적용하고 싶은 생각이 드시나요?

회사 Web Site 에 살짜기? 몰래 올려서 테스트 해보시면 하루가 즐겁지 않을까효~~? 

위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 


 



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 20. File API  (2) 2011.06.30
[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
Posted by woojja

댓글을 달아 주세요

2011. 6. 25. 14:19

안녕하십니까? ^^

이번엔 Web Socket 입니다.
이 녀석에 관심을 갖고 계신분이 많은 것으로 알고 있습니다. 

웹의 단점을 보완하고자 Ajax 가 등장을 했습니다만 언제나 DisConnected 인 상태인 웹으로써는완벽한? 실시간 웹을 구현하기에는 부족했습니다.
기존에 조금 부족한 Ajax 이외에 Flash, Flex, Silverlight 의 경우에는 Socket 을 지원하고 있으므로 실시간 웹을 구현할 수 있었습니다.

하지만 이젠 Flash, Flex, Silverlight 필요없이 "F5" 누를 필요도? 없이 Server 는 Client 에 갱신된 정보를 전달할 수 있습니다.

그 중심에는 Web Socket 이 있습니다.

이젠 Web Socket 은 웹을 변화 시킬 것이라 말씀드리고 싶습니다.

그 Web Socket 을 살펴보겠습니다.

16-1. Web Socket 환경 구성
Web Socket 구성은 여러분들도 짐작하시겠지만 Socket Server 를 구성해야겠지요.
뭐 간단히 Socket Server 만 구성하면 됩니다. ㅋㅋ

Client 는 Server 구성후에 Page 로 작성할테니까요...

Server 는 주로 Python 으로 작성되어 있는 코드들을 많이 보셨을 겁니다. 
제가 참고 하고 있는 서적도 Python 으로 작성되어 있는 Server 를 사용하고 있구요.

그래서 마구 뒤적뒤적거리다 C#으로 작성되어있는 Web Socket Server 를 찾아냈습니다. ㅋㅋㅋ (또 제것은 아니죠? ㅡㅡ')

그것은 Nugget 입니다. Codeplex 에서 받으실 수 있구요... (http://nugget.codeplex.com/ )
Socket 이 어떻게 돌아가는 지 한번 살펴 보실 수 있습니다.
Web Socket Server 에서 접속한 Client 들에게 Message 를 Push 하는 예제도 함께 포함되어 있는데요. 
Client 를 조금 수정해서 Server로 전송할 수있게 해 보았습니다. (별로 고친건 없습니다.)

16-2. 사용법
사용법도 간단합니다.

Web Socket 을 생성하는 구문은 다음과 같습니다.
var wsSocker = new WebSocket("ws://Web Socket Server URL");
WebSocket 생성시 Web Socket Server 의 URL 을 Parameter로 사용하며 Web Socket 프로토콜 "ws://" 을 사용합니다.

생성한 WebSocket 으로 send Method 를 사용하여 Message 를 전송합니다.
wsSocket.send("전송할 Message");

wsSocket interface 에는 다음과 같은 Event Handler 가 있습니다.
 Event Handler  설명
 onmessage  Server 로 Message를 전달 받을때
 onopen  Web Socket Server 가 열릴 때 
 onclose  Web Socket Server 가 닫힐 때

다음과 같이 사용합니다.
wsSocket.onmessage = function() {
...
};

wsSocket.onopen = function() {
...
};

wsSocket.onclose = function() {
...
};

16-3. 예제
위 내용을 바탕으로한 예제를 살펴보기로 하겠습니다.


nugget Sample 예제 압축을 푸시면 위와 같은 파일들이 있습니다.
두 예제중 첫번째 예제이구요...

오른쪽의 Server.cs, client.html 파일을 살펴볼 것입니다.

Server.cs

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Text;

    5 using Nugget;

    6 

    7 namespace ConsoleApp

    8 {

    9 

   10     class ConsoleAppSocket : WebSocket

   11     {

   12 

   13         public override void Incoming(string data)

   14         {

   15             Console.WriteLine(data);

   16         }

   17 

   18         public override void Disconnected()

   19         {

   20             Console.WriteLine("--- disconnected ---");

   21         }

   22 

   23         public override void Connected(ClientHandshake handshake)

   24         {

   25             Console.WriteLine("--- connected --- ");

   26         }

   27     }

   28 

   29 

   30     class Server

   31     {

   32         static void Main(string[] args)

   33         {

   34 

   35             var nugget = new WebSocketServer(8181, "null", "ws://localhost:8181");

   36 

   37             nugget.RegisterHandler<ConsoleAppSocket>("/consoleappsample");

   38 

   39             Nugget.Log.Level = LogLevel.None;

   40 

   41             nugget.Start();

   42 

   43             Console.WriteLine("Server started, open client.html in a websocket-enabled browser\n");

   44             Console.WriteLine("Once the connection is established\nanything you type into this console, will be send to the browser");

   45 

   46             var input = Console.ReadLine();

   47             while (input != "exit")

   48             {

   49                 nugget.SendToAll(input);               

   50                 input = Console.ReadLine();

   51             }

   52 

   53         }

   54     }

   55 }

   56 

Line 35, 37 의 내용을 보면 Web Socket Server 에서 8181 Port 에 consoleappsample 이라는 곳을 통해서 Web Socket 을 Start 했구요.
아래는 Client Source 인데요. 

client.html

    1 <!DOCTYPE lang="ko">

    2 <html>

    3     <head>

    4         <title>websocket client</title>

    5     </head>

    6     <body>

    7         <input type="text" name="txtinput" id="txtinput">

    8         <button onclick="Send()" name="btnSend" id="btnSend">Send</button><br />

    9         <pre id="incomming"></pre>

   10 

   11                 <script type="text/javascript">

   12 

   13                     var inc = document.getElementById('incomming');

   14                     inc.innerHTML += "connecting to server ..<br/>";

   15 

   16                     var ws = new WebSocket('ws://localhost:8181/consoleappsample');

   17 

   18                     ws.onmessage = function (evt) {

   19                         inc.innerHTML += evt.data + '<br/>';

   20                     };

   21 

   22                     ws.onopen = function () {

   23                         inc.innerHTML += '.. connection open<br/>';

   24                     };

   25 

   26                     ws.onclose = function () {

   27                         inc.innerHTML += '.. connection closed<br/>';

   28                     };

   29 

   30                     function Send() {

   31                         var strMessage = document.getElementById("txtinput").value;

   32 

   33                         var isSend = ws.send(strMessage);

   34 

   35                         if (isSend)

   36                             inc.innerHTML += strMessage + '<br/>';

   37                         else

   38                             inc.innerHTML += 'Send Error<br/>';

   39 

   40                     };

   41         </script>

   42     </body>

   43 </html>



16 Line 을 보면 WebSocket 을 생성하고 18, 22, 26 Line 에서 onmessage, onopen, onclose 이벤트가 도착했을 때 작업을 작성했습니다.

그리고 30 line 의 Send 함수는 제가 추가해서 넣어본건데요
위 코드만으로는 Server 가 Client 는 무조건 Sever 에서 보낸 데이터를 처리하도록만 되어 있는데요.
꺼꾸로 보낸는 동작을 넣어 봤습니다.

아래는 동작시키는 모습을 Capture 한 것입니다.

붉은 색으로 줄을 친 부분은 곧바로 명령창에서 입력한 것입니다.
입력하고 Enter 를 치면 내용이 전송됩니다.
그럼 그 아래 열린 두개의 Browser 에서 그 내용을 받게 되지요.
각 Client 에서 보내는 내용은 Server 에만 보내도록 했습니다.



다른 Web Browser 에서는 제대로 동작을 하지 않습니다. Test 를 해보시려면 Chrome 에서 Test 해보시기 바랍니다. 제 Chrome 버전은 12.0.742.100 입니다.

html5Demos Site 에서 보시면 Safari 도 지원을 한다고 나오는데 Test 결과 제대로 작동을 안했습니다.



다른 예제를 한번 살펴보겠습니다.

아래의 Capture 이미지는 위 html5Demos Site 에 Link 되어있는 예제입니다. 단순한 Chatting Page 입니다.



http://bohuco.net/labs/ 에도 Web Socket 에 관한 PHP 예제가 있습니다. 한번 살펴보시기 바랍니다.

지금까지 Web Socket 에 관해 간단히 살펴보았습니다.

제가 소개한 내용들이 Web Socket 을 이해하는데 조금이나마 도움이 되었는지 모르겠습니다.
이젠 web page 상에 메신저를 구현한다거나 쇼핑몰 운영자와 소비자 사이에서 그림을 함께 보며 마우스가 가리키는 곳에 대해 설명한다거나 하는 일을 HTML 만으로 구현할 수 있을 것입니다.

Web Socket 에 관한 내용으로 Socket Protocol 에 대한 사항이 있습니다.
그 사항은 Download 받으신 Nugget 의 두번째 예제(02-SubProtocol) 을 살펴보시고 자세한 내용은 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-09 을 참고해하시기 바랍니다.

위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


그럼 행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
Posted by woojja

댓글을 달아 주세요

  1. 2013.08.20 02:11

    우왓 +_+ 많이 도움되었어요 !!!!!!!!!! 웹소켓 누겟은 찾아놓고 저거 어떻게 써야할지 몰랐는데 지금부터 함 해보려구요 감사합니다

2011. 6. 23. 02:07

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


이번엔 Web Worker 에 대해서 살펴보려하는데요...
글을 쓰는데 쫌 시간이 걸렸읍니다. ㅋㅋ

JavaScript 가 저를 괴롭혀서... 간단한 Script 인데도 말이죠... ^^;

Web Worker !!!
이젠 Web Browser 에서도 Desktop Application 에서 처럼 Multitasking? 을 할 수 있게 되었습니다.
완전히 Desktop Application 에서 지원하는 Multitasking 과 완전히 같지는 않지만 Web Browser 의 UI Thread 와 완전히 분리된  Background 에서 동작합니다.

기존에는 Javascript 가 오랜 계산을 해야 할 경우 그 계산을 마칠때까지 사용자는 기다려야 했지요.
하지만, 이제 Web Worker 를 사용하면 Javascript 의 오랜 계산에도 사용자는 아무런? 버벅거림도, 기다림도 없이 Web Application 을 이용할 수 있습니다.


15-1. 사용법
Web Worker 를 사용하기 위해서는 먼저 Web Worker 가 호출하여 사용하게될 Javascript 파일이 외부에 필요하게 됩니다.

그리고 사용은 그리 어렵지 않습니다.

var worker = new Worker("외부 Javascript 파일명")

차아~~암. 쉽쬬~~~잉? ㅋㅋㅋ

그리고, 중요한 함수인 postMessage() 와 onmessage . 두 녀석을 기억하셔야 합니다.

이 두녀석은 UI Thread 와 BackGround 사이에서 통신을 하게 되는데요.   
기억하실런지 모르겠지만 전 글에서 이야기 했던 Communication API 와 이제 곧 이야기를 하게될 Web Socket 에서 공통으로 사용하는 개념이지요.
postMessage 로 Message 를 던지면 먼저 등록해 놓은 onmessage Event handler 로 Message 를 받지요.
그리고 다시 posetMessage 로 결과를 되돌려 주게 되고요. onmessage EventHandler로 결과를 받습니다. 
주저리주저리 말보다는 한 줄 코드가 더... ^^;

 먼저 이야기 했듯이 웹페이지 하나와 외부 Javascript File 을 하나 작성할 것입니다.

Javascript 파일을 먼저 구현하겠습니다.
(worker.js)

onmessage = function(evt) {
    var num = evt.data;
    var result = 0;
    for(var i = 1; i <= num; i++)
    {
        result += i;
    }
    postMessage(result);
};

(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)


(WebWorker.html)

<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web Worker 예제</title>
 </head>
 <body>
        <input type="text" id="num">
        <button onclick="calculate()">계산</button>
        <button onclick="stopCalculate()">중지</button><br/>
        <p id="sum">Sum :</p>
 </body>
        <script type="text/javascript">     
      
                var worker;

                function calculate() {

                    if(worker)  {                 
                        worker.terminate();            
                    };

                    var num = document.getElementById("num").value;

                   
worker = new Worker("worker.js");
                    
                    worker.onmessage = function(evt) {
                         document.getElementById("sum").innerHTML = "Sum : " + evt.data;
                    };  
                  
                    worker.onerror=function(evt) {
                        alert("Error : " + evt.message + " (" + evt.filename + ":" + evt.lineno + ")");
                    };

                   
worker.postMessage(num);

                }

                function stopCalculate() {
                    if(worker)  {                 
                        worker.terminate();          
                    };
                    alert("Worker is Stopped");
                }
        </script>
</html>

(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)


실행시킨 모습입니다.


internet explorer 9.0 에서는 작동을 하지 않았습니다. ㅡㅡ'
Opera 도 동작은 하는 듯 보였지만 worker instance 는생성을 했지만
외부 Javascript 파일쪽에서 Script error 가 발생을 하네요...
이건 좀 찾아 봐야할 듯합니다.




위 예제는 간단한 듯하여 예제 하나를 더 소개합니다.

아래 예제는 page 와 worker 간에 계속 계산값을 던집니다.
일을 계속 시키고 싶으셔도 빨리 세워주셔요...버버거림을 느끼실수도... ㅋㅋ

(cals.js)

onmessage = function(evt) {
    for (var i = evt.data; i < 1000000; i++)
    {
        postMessage(i);
    };
};

(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

(webWorker.html)
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web Worker 예제</title>
 </head>
 <body>
        <p>
            <input id="worker_work" type="button" value="Work!!!">
            <input id="worker_work_stop" type="button" value="Stop!!!">
        </p>
        <p id="worker_say">Say</p>
        <textarea rows="4" cols="60">딴짓할 수 있어요.</textarea>
 </body>
        <script type="text/javascript">    
       
                var worker;

                function makeWorker() {               
                    worker = new Worker("cal.js");
                };

                document.getElementById("worker_work").onclick = function() {               
                    makeWorker();

                    worker.postMessage(0);

                    worker.onmessage = function(evt) {
                        document.getElementById("worker_say").innerHTML=evt.data;
                    };

                    document.getElementById("worker_work_stop").onclick = function() {
                        if(worker) {
                            worker.terminate();
                            alert("Worker. Stop!!! ");
                        };
                    };
                    worker.onerror=function(evt) {
                        document.getElementById("worker_say").innerHTML = "Error : " + evt.message + " (" + evt.filename + ":" + evt.lineno + ")";
                    };
                };

        </script>
</html>

(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

간략하게 Web Worker 를 살펴보았습니다.
이제 여러분의 Web Application 에서도 작은 머슴하나 키워보시지 않으시겠습니까? ㅋㅋ
작은 머슴이 기대이하로 버벅거릴 수 있을지도 모릅니다. 잘 다독여서 잘 키우시길 바랍니다. ㅋㅋㅋ


행복한 고수되셔요... 


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\





'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
Posted by woojja

댓글을 달아 주세요


다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


이번엔 Web SQL Database 를 살펴볼까요?
Web SQL Database 는 지난 아티클에서 소개한 Storage 와 함께 기본적인 Web Storage 중 하나입니다.
말씀 안드려도 딱! 알고 계시겠지만 Client 에 데이터를 저장한다는 공통점을 가지고 있지요.

개발자분들께서는 SQL 에 익숙하시니 금방 접근 하실수 있으리라 생각됩니다.
개발자가 아닌 분들도 그리 어렵지 않은 내용이니 너무 어려워 마시고요... ^^

그럼 Database 를 생성하는 작업부터 시작해 보겠습니다.

14-1. Create Database
생성하기 전에 먼저 사용하는 Web Browser 가 Web SQL Database를 지원하는지 확인해 봐야겠죠?
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
...
}

확인도 했으니 이젠 Database를 생성해 보겠습니다.
다음과 같은 Database 를 생성하는 Method 를 제공합니다.

if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
}

openDatabase 함수를 사용하여 Database 를 생성합니다. 그리고 함수에 사용되는 parameter 들은 아래와 같습니다.

openDatabase("Database 이름", "Database Version", "Database 설명", "Database Size");

함수명 이름만 봐서는 Open 이라는 말에 이미 존재하는 Database 를 연다고 생각하기 쉬운데 Database 가 존재하지 않으면 Database 를 생성한다는 것! 기억해 두셔요...

14-2. transaction
Database 가 생성도 되었으니 이젠 슬슬 접근해 보겠습니다.
접근하는 Method 는 transaction()입니다.

if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
...
},
function(error) {  //transaction 에 Error 가 발생한 경우
...
},
function() { //transaction 을 성공했을 때
...
});
}

Error 발생시 그리고 성공완료시에 진행할 코드는 생략가능한 부분입니다.

요기까지가 Database 를 생성하고 접근하는 것 까지의 순서입니다.
많이 어렵게 느껴지시나요?

그럼 계속 이어나가겠습니다.


14-3. executeSql
이젠 테이블을 생성하고 데이터를 입력하는 작업을 해보겠습니다.
이런 작업을 할때 사용하는 Method 는 executeSql() 입니다.
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
tx.executeSql('CREATE TABLE worklist(idx integer primary key, subject, memo)');

tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (1, "업무", "WCF Server 작성")';
tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (2, "약속", "SQLer Article작성")';
tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (3, "가정", "일주일식량 장보기")';
});
}

Table 을 생성하고 세건의 Data 를 입력하는 코드입니다.

음.. 여기까지 작업했으니 제대로 Database 가 생성되고 데이터가 제대로 들어갔는지 확인해 볼까효~~ ^^


확인도 됐으니.. 이젠 데이터를 삭제해 보겠습니다.
삭제하는 구문은 여러분도 알고 계시겠지만 서도...
tx.executeSql('DELETE FROM worklist WHERE idx=2');

테이블 삭제요?
tx.executeSql('DROP TABLE worklist');

^^


14-4. 예제
그럼 위 사항들을 모두 적용한 예제를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web SQL Database 예제</title>
        <script type="text/javascript">

                if (!window.openDatabase) {
                    document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
                    return false;
                } else {

                    var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");

                    db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
                        tx.executeSql('SELECT Count(idx) FROM worklist');
                    },
                    function(error) {  //transaction 에 Error 가 발생한 경우
                        alert("Select Error : " + error.message);
                        tx.executeSql('CREATE TABLE worklist(idx integer primary key, subject, memo)');
                    },
                    function() { //transaction 을 성공했을 때       
                    });

                    db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
                        tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (1, "업무", "WCF Server 작성")');
                        tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (2, "약속", "SQLer Article작성")');
                        tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (3, "가정", "일주일식량 장보기")');
                    },
                    function(error) {  //transaction 에 Error 가 발생한 경우                   
                        alert("insert Error : " + error.message);
                    },
                    function() { //transaction 을 성공했을 때
                        alert("insert Success");       
                    });

                };
        </script>
 </head>
 <body>
 </body>
</html>

(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

 


Safari 의 Development Tool 인 Web Inspector 를 통해서 본 모습입니다.
보시면 제가 만든 Database 의 모습을 보실 수있을 겁니다. 데이터도 잘 들어가 있군요... ㅋㅋ

두번 Refresh 하면 에러납니다. ㅋㅋㅋ
왜 그런지 한번 돌려서 확인해보셔요... ㅋㅋㅋ

아 그리고 Database 의 버전이나 동기화에 대한 문제에 대해서는 숙제로 남겨놓기로 하겠습니다.


아래 이미지는 Webkit 에서 제공하는 예제인 Sticky Note 입니다. (안타깝지만 internet explore 9.0 과 firefox 4.0.1 에서는 돌아가지 않습니다.)
http://www.webkit.org/demos/sticky-notes/index.html
한번 간단히 살펴보셔도 좋을 듯합니다.

지난 글과 이번글을 통해서 Web Storage 와 Web SQL Database 에 대해서 알아 보았습니다.
이제 데이터베이스까지 Client 로 넘어왔습니다. 글만 보고 있어도 클라이언트의 한계가 조금씩 없어지는 것 같아 기분좋아지지 않으신가요? 하긴 생각해야할 것들과 개발해야 하는 것들이 점점 많아지긴 하겠지만 말이죠.
더욱더 UX 라고 하는 사용자 경험에 손쉽게? 다가갈 수 있지 않을까 싶습니다. 아! 다른 녀석들의 도움없이요... ^^


그럼

행복한 고수되셔요... ^^


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
Posted by woojja

댓글을 달아 주세요


이젠 Web Storage 를 살펴보려 합니다.

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

Offline Web Application 과 비슷하게 갑자기 전원이 꺼진다거나 다시 PC 를 켰을때 이전에 작업한 데이터를 보존할수도 있고, 웹메일을 Web Storage 에 저장해 두었다가 읽는다거나, 서버의 많은 정보를 Client 에 저장해 둘 수 있습니다.

Web Stroage 는 Client 의 disk 에 소량의 데이터를 저장하기 위한 Storage로 이전까지는 Cookie 를 사용했습니다만 Cookie 와는 다음과 같은 몇가지 다른 점이 있습니다.
 크기에 제한이 없음.  Cookie 는 4KB 로 제한이 있지만 Web Storage 는 제한이 없습니다.
 서버로 보내지지 않음.  Cookie 는 HTTP Request 에 의해서 자동으로 서버에 전송이 되었지만 Web Storage 는 서버로 전송되지 않습니다.
 유효기간의 제한이 없음.  Cookie 처럼 특정기간이 지나면 자동으로 삭제되지 않습니다.
 JavaScript 객체를 저장할 수 있음.  JavaScript 객체를 저장할 수 있습니다.

Web storage 는 Web Browser 마다 별도로 가지고 있는 저장 공간에 Data 를 Key-Value 형식으로 저장합니다.

Web Storage 는 용도에 따라서 Local Storage 와 Session Storage 로 나뉘는데요. 두 Storage 의 차이는 저장기간이나 유효범위만 다를 뿐 거의 같은 API 를 사용합니다.

그럼 Local Storage 부터 살펴보도록 하겠습니다.

13-1. Local Storage
Local Storage 는 저장기간에 제약이 없고 Web Site 의 Domain 에 따라서 생성되는 Storage 입니다.
저장기간도 사용자가 삭제하기 전까지 영구적으로 저장할 수 있습니다. 그렇기 때문에 기존의 Cookie 를 이용한 저장작업을 Local Storage 가 대신하기에 충분합니다. 거기다 Server 측과의 통신작업도 없기때문에 Client 들이 더욱 좋아라 하리라 생각합니다. Server 측에 부하도 주지 않으니 더욱...

그럼 그 사용법을 한번 보기로 하죠.
먼저 Web Browser 가 Local Storage 를 지원하는지 Check 해 봐야 할 것입니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
.....
};
</script>

이젠 저장하는 방법을 보겠습니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
};
</script>

저장을 했으니... 가져와야겠죠?

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
};
</script>

지우고 싶다고요? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

};
</script>

하나하나 지우지 말고 말끔히 지우실랍니까? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

localStorage.clear();
};
</script>


쉽죠? 쉽죠? ㅋㅋㅋ
너무 쉬운건 매력없잖아효? ㅋㅋㅋ
이번엔 조금 다른 방법을 살펴보도록 하겠습니다.

저장할 때는

localStorage.setItem("NickName", "woojja");
localStorage.NickName = "woojja";
localStorage["NickName"] = "woojja";


가져올 때는
var NickName = localStorage.getItem("NickName");
var NickName = localStorage.NickName;
var NickName = localStorage["NickName"];


지울 때는
localStorage.removeItem("NickName");
delete localStorage.NickName;
delete localStorage["NickName"];


와 같은 방법으로 사용을 합니다.

전체 Storage Data 에 대해서
for(var i=0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
...
}

또는
for(var key in localStorage) {
var value = localStorage[key];
...
}

이렇게 접근해서 사용할 수 있습니다.


Session Storage 도 사용 방법은 다르지 않습니다.
내용에 약간의 차이가 있을 뿐인데요...
그럼 이번엔 Session Storage 를 살펴보도록 하겠습니다.

13-2. Session Storage
Session Storage 는 Local Storage 와 같이 도메인마다 생성이 되지만 Browser Window 의 유효범위와 생존기간을 갖습니다.
그래서 Local Storage 와는 다르게 Browser Window가 닫히면 Session Storage도 같이 삭제됩니다.
그럼 Browser Window를 복제하면 어떻게 될까요?
예상은 하고 계시겠지만, 복제된 순간까지는 Session Storage 의 내용은 같겠지만 그 이후의 내용은 서로에게 아무런 영향을 주지도 않고 별개의 Storage 로 작동하게 됩니다.
이런 특징을 갖는 Session Storage 는 사용자의 동작을 추적하여 기록할 때 사용할 수 있다고 합니다.

Session Storage  의 사용은 Local Storage 와 같다고 말씀을 드렸는데.
단지 localStorage 를 sessionStorage 객체로 바꿔 사용하시기만 하면 됩니다.

13-3. Storage Event Handling
Storage 는 Storage 의 변경에 대해서 window 객체가 Storage Event 를 발생시킵니다. 
다음 표는 그 Event 가 가지고 있는 속성들 입니다.
 속성  설명 
 key  변경된 Key, clear() Method 가 호출되면 null 을 반환한다.
 oldValue  변경되기 전의 값(복사본). 새로운 키로 값을 등록하였다면 null.
 newValue  변경된 후의 값(복사본). 값이 삭제되었을 때는 null.
 url  Event 가 발생한 문서의 URL.
 storageArea  변경된 Storage 참조.

13-4. 예제
아래 예제는 LocalStorage 에 대한 내용입니다.
신기하게도 그대로 남아 있네요... (당연한거겠지만요... ㅋㅋ) 
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>간단 메모지</title>
        <script type="text/javascript">
            function saveText() {
                info = document.getElementById("info");
                info.style.display = "block";
                localStorage.setItem("memo", msg.value);
            };
            function pageload() {
                msg = document.getElementById("txtBox");
                msg.value = localStorage.getItem("memo");
            };
            function clr() {
                msg.value = "";
                localStorage.clear();
                info.style.display = "none";
            };
         </script>
 </head>
 <body onload="pageload()">
        <h2>간단한 메세지</h2>
        <textarea id="txtBox" onKeyDown="saveText();" onKeyUp="saveText();" cols="50" rows="5"></textarea><br/>
        <input type="button" value="메모지 비우기" onClick="clr();" onKeyUp="clr();" />
        <p id="info" style="display:none;">메모내용이 자동 저장되었습니다.</P>
 </body>
</html>
(발췌 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

 



다음 예제는 session Storage 에 대한 내용입니다.
값을 두개 넣고 난후 윈도우 창을 복제하였습니다.
그리고 두번째 생긴 Window 에서 값을 넣어 본 것입니다. 두개의 storage 가 별개라는 것을 말씀드리려 한 것이죠..
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Session Storage Viewer</title>
 </head>
 <body onload="ShowAll()">
        <h1>Session Storage Test</h1>
        키 : <input id="k" type="text"> 값 : <input id="v" type="text">
        <button onclick="Save()">저장</button>
        <button onclick="Remove()">삭제</button>
        <button onclick="window.open(location.href);">윈도우 생성</button>
        <hr>
        <select id="entries" size=5 onchange="onEntrySelected()">
        </select>
        <button onclick="ShowAll()">다시 표시</button>

        <script type="text/javascript">

            var key = document.getElementById("k");
            var value = document.getElementById("v");
            var entries = document.getElementById("entries");

            function ShowAll() {
                entries.innerHTML = "";
                for (var i=0; i < sessionStorage.length; i++ )
                {
                    var k = sessionStorage.key(i);
                    entries.options[entries.options.length] = new Option(k + ":" + sessionStorage[k], k);
                }
            };

            function Save() {
                sessionStorage[key.value] = value.value;
                ShowAll();
            };

            function Remove() {
                delete sessionStorage[key.value];
                ShowAll();
            };

            function onEntrySelected() {
                var selectedOption = entries.options[entries.selectedIndex];
                key.value = selectedOption.value;
                value.value = sessionStorage[selectedOption.value];
            };
         </script>

 </body>
</html>
(발췌 : 혁명을 꿈꾸다 HTML5 & API 입문 )


오늘은 Web Storage 에 대해서 살펴 보았습니다.

잘 기억해 두시기 바랍니다.
이젠 Cookie 보다는 이 두녀석을 사용하시는 걸 고려하실 날이 머지 않았으니 말이죠...

그럼 행복한 고수되십시요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
Posted by woojja

댓글을 달아 주세요


이젠 Communication API 를 살펴보려 합니다.

다음의 내용과 소스는 웹혁명을 꿈꾸다 HTML5 & API 입문 을 참고 하였습니다.


Communication API 는 MessageEvent 라고 하는 javaScript 객체나 문자열을 비동기방식으로 주고 받음으로써 여러프로그램간의 데이터를 공유하게 합니다.
이러한 방식은 다음에 살펴보게될 Web Worker 나 Server-Sent Event 등에서도 사용하는 방식입니다. 공통의 API 를 사용한다는 점이 장점이라고 할 수 있습니다.

12-1. MessageEvent
그럼 Communication API 의 중심인  MessageEvent 부터 살펴보도록 하겠습니다.

앞에서도 말한바와 같이 MessageEvent 는 두 지점간에 주고 받는 메세지를 말하는데요. Javascript 객체입니다.
그리고 다음과 같은 속성을 가지고 있습니다.
 속성 설명 
 data  송신되는 Message 의 내용이 되는 데이터
 origin  Message 송신처의 Domain (Cross Document Messaging 과 Server Sent Event 에서만 사용)
 lastEventId  마지막 Event ID (Server Sent Event 에서만 사용)
 source  Message 를 보내는 Windows 객체(Cross Document Messaging 에서만 사용)
 ports  Message 송신시 지정한 포트의 복사본

12-2. Cross Document Messaging
Cross Document Messaging 을 사용하면 둘 이상의 웹페이지가 서로 데이터를 주고 받을 수 있습니다.
가장 큰 특징은 다른 도메인간의 통신이 가능해 졌다는 것입니다. 도메인간의 통신이 가능해진만큼 보안에 특히나 신경을 써야겠지요? 확인하는 방법도 함께 구현해야 할 것입니다.
구현도 간단해서 수신측 Window 의 postMessage() Method 를 호출하고 수신하는 곳에서는 자신의 window 에 대해 onmessage Event Handler 를 지정하면 됩니다.

소스를 보는 것이 더 편할 듯하죠? ㅋㅋㅋ
일단 이녀석들을 구현하기 위해서 웹서버에 Site 를 두개 만들었습니다.
구성은 아래그림과 같습니다.


비슷해 보이지만 위의 사이트에는 iframe Tag 를 포함한 index.html 페이지가 있습니다.
위 사이트는 8880번 포트를 사용하고 있구요...

아래에는 iframe 의 Source 가 되는 페이지인 frame.html 파일이 있습니다.
아래 사이트는 8881번 포트를 사용하고 있습니다.


시나리오는 이렇게 흘러갑니다. index.html 페이지에서 타이머를 돌려서 매 초당 한번씩 계속 iframe 의 Source 인 frame.html 페이지에 데이터를 전송할 겁니다.
당연히 frame.html 에 데이터가 갱신되겠죠? ㅋㅋㅋ
그럼 소스를 보겠습니다.

index.html 페이지의 내용입니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
        <title>Communication API 예제</title>

        <script type="text/javascript">
            function init() {
                //1초마다 IFrame 에 메시지를 보냄
                setInterval(Send, 1000);
            }

            function Send(){
                var ifrm = document.getElementById("ifrm");
                var MyOrigin = location.protocol + "//" + location.host;
                var date = new Date();
                var dateStr = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + " " + date.getHours() + ":"  + date.getMinutes() + ":" + date.getSeconds();
                var number = Math.floor(Math.random() * 100);    
                   
                ifrm.contentWindow.postMessage({date:dateStr, number:number}, "http://localhost:8881");
                document.getElementById("msg").innerHTML = dateStr + " 생성된 값은 '" + number + "' 입니다. <br/> MyOrigin : " + MyOrigin;
         }
         </script>
 </head>
 <body onload="init();">
     <div id = "msg">8880<br/>MyOrigin</div>          
     <iframe id="ifrm"
src="http://localhost:8881/communicationAPI/frame.html" width=500 height=200></iframe>
 </body>
</html>


네 그럼 이제 받는 녀석의 내용도 봐야겠지요?
frame.html 페이지의 내용입니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8" />
  <title>Communication API 예제</title>
        <script type="text/javascript">

         var MyOrigin =
http://localhost:8880;
         window.addEventListener("message", function(e){
                        if(
e.origin==MyOrigin) {
                            document.body.innerHTML = "<div>e.origin : " + e.origin + " <br/> " + e.data.date + " : 송신된 값은 " + e.data.number + " 입니다.</div>";
                        }
                    }, false);

        </script>
 </head>
 <body>   
  <div id = "msg"></div>
8881
 </body>
</html>
위 Markup 에서 가장 중요한 부분은 addEventHandler 도 있지만
바로 "e.origin==MyOrigin" ... 이 부분... 이 부분입니다.
이렇게 보낸측의 Domain 을 확인하지 않는다면 위와 같이 대상 사이트를 iframe 에 담고 postMessage() 로 계속해서 메세지를 보내는 것도 가능할 것입니다. (내가 악의적 코드를 만든거였던거에요?ㅋㅋㅋ)
이런 보안적으루다가 취약한 점이 있으므로 반드시 받는 쪽에서는 보낸곳의  Domain 을 확인해야 할 것입니다.


안타깝게도 ie9 에서는 data 값을 제대로 인식을 못하네요... ㅡㅡ' (실망이야~~ ㅋㅋㅋ)


12-3. Channel Messaging
이번엔 Channel Messaging 에 대해서 살펴보죠...
Channel Messaging 은 다대다 메세지 통신을 실현하기위한 API 입니다. 

MessageChannel 이라는 Channel 을 통해 Message 를 송수신하게 되는데요. Message 의 출입구가 되는 Channel 에는 두개의 Port가 있어서 Port1 에 수신된 Message 는 Port2 로 Port2 에 수신된 Message 는 Port1 으로 전달됩니다.

이런 각각의 Port 는 MessagePort 라는 Type 의 Object 로 다음과 같은 Method 와 속성을 가집니다.
 Method 명  설명 
 start()  Port 를 사용할 수 있게 합니다. 두개의 Port 모두 Start 해주어야 합니다.
 close()  Port 를 사용할 수 없게 합니다.
 PostMessage  Port 에 Message 를 보냅니다. 보낸 Message 는 상대편 Port 로 부터 읽어들여집니다.
 onmessage  Port 에 Message 가 도착하면 이 속성에 지정된 Event Handler 가 호출됩니다.

그럼 예제를 만나보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8" />
  <title>Channel Messaging 예제</title>
        <style>
            .messageLog{
                width:200px;height:200px;
                overflow:scroll;float:left;
            }
        </style>
        <script type="text/javascript">

            var channel = new MessageChannel();

            channel.port1.start();
            channel.port2.start();


            function addDisplay() {
                var div = document.createElement("div");
                div.className = "messageLog";
                document.getElementById("messageLogs").appendChild(div);

                channel.port2.addEventListener("message", function(e){
                div.innerHTML += "<div>" + e.data + "</div>";               
                }, false);

            }
            function showMsg() {
                var msg = document.getElementById("msg").value;
                channel.port1.postMessage(msg);               
            }
        </script>
 </head>
 <body>
        <h1>채널 메세징 예제</h1>
  <input id="msg" type="text">
        <button onclick="showMsg()">송신</button>
        <button onclick="addDisplay()">표시 영역 추가</button>
        <div id="messageLogs"></div>
 </body>
</html>


Channel 을 생성한 후에 두개의 Port 를 시작하고, 
port 1 의 postMessage 를 통해 Message 를 보내고, port2 에서 Message 를 처리하는 부분에 집중해 주십시요...

아래 그림은  입력란에 "가나다라마바사아" 를 한글자씩 늘려가면서, 표시영역을 하나씩 추가하여 송신을 눌러봤습니다.   


그리고 Communication API 에는 포트 공개라고 하는 것이 하나 더 있는데요.
제가 구현을 해보았는데 계속 에러가 발생을 해서요...
이 부분은 제가 내공을 더 쌓은 후 살펴보도록 하겠습니다. (죄송합니다.) ㅡㅡ'


흠 완벽? 하진 않지만 Communication API 를 살펴보았습니다.
어떻습니까? 이제 진정으로 Web Application 이라는 것이 더욱더 다가오는 것 같지 않으십니까? 그것도 HTML 작성 만으로 말이죠... (HTML 이 더 어려워요... ㅡㅡ' : 뭐 정확학게는 javascript 인가요? ^^;)


 

그럼 행복한 고수되셔요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\







'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
Posted by woojja

댓글을 달아 주세요

이전버튼 1 2 3 4 5 이전버튼